HTML Global Attributes: id, class, data-*, aria-*, and More

HTML Global Attributes

Global attributes are attributes that can be applied to any HTML element. They provide essential functionality for styling, scripting, accessibility, and behavior.

Identity and Styling

<div id="unique-id" class="card primary" style="color: red;">
  <!-- id must be unique, class can repeat -->
</div>

Custom Data Attributes

<article data-post-id="42" data-author="john" data-published="2024-01-15">
  <!-- Access in JS: element.dataset.postId -->
</article>

Data attributes follow these rules:

• Must start with data-
• Lowercase letters, numbers, hyphens only
• Accessed via element.dataset in JavaScript (hyphens become camelCase)

Accessibility Attributes

<button aria-label="Close dialog" aria-expanded="false">
  X
</button>

<div role="alert" aria-live="polite">
  Form submitted successfully.
</div>

<nav aria-label="Main navigation">...</nav>

Focus and Interaction

Attribute	Purpose
tabindex="0"	Makes element focusable in tab order
tabindex="-1"	Focusable by script only, removed from tab order
hidden	Hides element from rendering and accessibility tree
inert	Makes element and descendants non-interactive
draggable	Enables drag-and-drop
contenteditable	Makes content editable by user

Modern Attributes

Popover API:

<button popovertarget="my-popover">Open</button>
<div id="my-popover" popover>
  <p>Popover content</p>
</div>

Security:

<script nonce="abc123">/* CSP nonce */</script>

Internationalization

Attribute	Purpose
lang	Content language (BCP 47 tag)
dir	Text direction (ltr, rtl, auto)
translate	Whether to translate content