HTML Attributes

Attributes are name/value pairs inside the opening tag that configure an element. They are how a plain <img> becomes an image with a source, alternative text, and dimensions.

Attribute syntax

<tagname attribute-name="value">...</tagname>

<!-- Real example -->
<img src="bakery-cake.jpg" alt="A chocolate cake on a wooden table" width="800" height="600">

• Attributes go in the opening tag only.
• Always quote values with double quotes — it prevents errors when a value contains spaces.
• Attribute names are lowercase by convention: class, not CLASS.
• An attribute cannot appear twice in the same tag.

The attributes you will use every day

Global attributes

Some attributes work on every element:

• id — unique name, useful for anchor links like /page#pricing.
• class — one element can hold many classes: class="card featured".
• style — inline CSS. Technically valid, but considered a bad habit — prefer stylesheets.
• data-* — custom data, e.g. data-category="pastry". Read later by JavaScript.
• hidden — hides the element completely.
• tabindex, role, aria-* — accessibility controls, covered in HTML Accessibility.

Boolean attributes

Some attributes act as on/off switches. They have no value — presence means "on":

<input type="checkbox" checked>
<button type="submit" disabled>Send</button>
<video src="tour.mp4" controls muted></video>

Writing checked="false" does not turn the attribute off — in HTML, any value (including "false") means true. To disable it, remove the attribute entirely.

Real-life example: a product card

<article class="product-card" data-category="bread">
  <img src="sourdough.jpg" alt="Round sourdough loaf with a scored top" width="640" height="480">
  <h3 class="product-card__title">Classic sourdough</h3>
  <p>₹220 <span class="stock" id="stock-42">In stock</span></p>
  <button type="button" data-sku="BREAD-042" disabled>Add to cart</button>
</article>

Here data-category lets JavaScript filter products, data-sku identifies the item for checkout, and disabled prevents clicks while an item is out of stock.

Common mistakes

• Unquoted values — alt=Fresh bread breaks the moment a value has a space.
• Duplicate ids — invalid, and anchor links / CSS selectors will target the wrong element.
• Using title instead of alt — tooltips are not accessible; alt is mandatory on images.
• Misusing class vs id — classes for groups, ids for single unique items.

Best practices

• Write width and height on every image — it reserves space and prevents layout shifts (great for Core Web Vitals).
• Use descriptive data-* names instead of stuffing meaning into class names.
• Keep attribute order consistent in your team (a common style: element-defining attributes first, then class, then id, then data/aria).

What's next?

Now that you can configure elements, build content with Headings, Paragraphs & Text Formatting, or learn how attributes power navigation in Links & Navigation.