Attributes in HTML

Attributes in HTML are used to provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs like name="value". Let's explore this with simple, easy-to-understand examples that are slightly different from common ones you might find online.


data-* Attribute for Custom Data

<a href="https://www.example.com">Go to Example</a>
  • <a> is the start tag for a hyperlink.
  • href="https://www.example.com" is an attribute that specifies the URL of the link.
  • Go to Example is the clickable text.
  • </a> is the end tag for the hyperlink.


src and alt Attributes in Image Element

<img src="picture.jpg" alt="A cute kitten">
  • <img> is a self-closing tag for an image.
  • src="picture.jpg" is an attribute that specifies the path to the image file.
  • alt="A cute kitten" is an attribute that provides alternative text for the image.


id Attribute in a Paragraph Element

<p id="intro">This is the introduction paragraph.</p>
  • <p> is the start tag for a paragraph.
  • id="intro" is an attribute that assigns a unique identifier to the paragraph.
  • This is the introduction paragraph. is the content of the paragraph.
  • </p> is the end tag for the paragraph.


class Attribute in a Div Element

<div class="container">
  <p>This is a paragraph inside a div with a class attribute.</p>
</div>
  • <div> is the start tag for a division or section in an HTML document.
  • class="container" is an attribute that assigns the class name "container" to the div.
  • <p> is the start tag for a paragraph.
  • This is a paragraph inside a div with a class attribute. is the content of the paragraph.
  • </p> is the end tag for the paragraph.
  • </div> is the end tag for the div.


style Attribute in a Heading Element

<h1 style="color: blue;">This is a blue heading</h1>
  • <h1> is the start tag for a heading.
  • style="color: blue;" is an attribute that applies inline CSS styles to the heading.
  • This is a blue heading is the content of the heading.
  • </h1> is the end tag for the heading.


title Attribute in a Span Element

<span title="This is a tooltip text">Hover over me!</span>
  • <span> is the start tag for an inline container.
  • title="This is a tooltip text" is an attribute that provides additional information displayed as a tooltip when hovering over the element.
  • Hover over me! is the content of the span.
  • </span> is the end tag for the span.


These examples demonstrate how attributes can be used to provide additional information and functionality to HTML elements, making web pages more dynamic and interactive.