HTML Fundamentals

Global Attributes

Attributes (id, class, style, title, lang, hidden, tabindex…) usable on any element.

1Common Global Attributes

Global attributes work on every HTML element. They cover identity, styling, accessibility, and behavior.

Example Code

css

<div id="main"
     class="container card"
     title="Tooltip text"
     lang="en"
     dir="ltr"
     tabindex="0"
     hidden
     contenteditable="true"
     data-user-id="42">
  Editable content
</div>

2Put the element in context

Global attributes can be used across many HTML elements, but each should serve a clear purpose. Classes connect to reusable styling, IDs identify a unique element, and language information helps tools interpret text. Data attributes can carry application metadata without inventing new HTML element attributes.

3Practice with a small page

Create two cards with the same class and different IDs. Add a data-state value to one and inspect it in developer tools. Keep IDs unique and avoid storing secrets or private records in attributes that every visitor can inspect.

Finished reading?

Mark this topic as complete to track progress.

HTML Attributes

Next Topic

HTML Comments