Lesson 10 — Fundamentals

Attributes and Metadata

Attributes add extra information to HTML elements, from styling hooks like class and id, to behaviour-affecting settings like disabled and data attributes for custom data.

Global Attributes

Some attributes can be applied to almost any HTML element. id uniquely identifies one element on the page (used for CSS, JavaScript, and links). class can be shared across many elements and is the main hook for CSS styling.

HTML — Attributes 
<div id="main-banner" class="banner featured" data-category="sale" title="Limited time offer">
  Summer Sale — 20% Off
</div>

Custom Data Attributes

Any attribute prefixed with data- is a custom data attribute, letting you attach extra information to an element that JavaScript can later read, without inventing a non-standard attribute.

Common Mistakes

  • Reusing the same id value on multiple elements — IDs must be unique per page.
  • Using id where class would be more appropriate, such as styling a group of similar buttons.
  • Inventing a non-standard attribute name instead of prefixing custom data with data-.
  • Forgetting quotes around attribute values that contain spaces, e.g. class=featured card instead of class="featured card".

Professional Tip

Reserve id for elements that are genuinely unique on the page — like a specific form or a page's main navigation — and use class for anything that repeats, like card components or buttons.

Your Turn

Create three "card" divs sharing a class of card, each with a unique id, and a data-category attribute set to a different value on each.

Mini Quiz

Which attribute is used to attach custom, non-standard data to an HTML element?