🌱BeginnerAttributes and Accessibility
Global Attributes
Apply id, class, style, title, hidden, and tabindex to any HTML element.
Overview
Global attributes can be applied to any HTML element, regardless of type. They are the universal modifiers of HTML.
The most important global attributes:
- id: unique identifier for the element (used by CSS, JS, and fragment links)
- class: one or more class names for CSS and JS targeting
- style: inline CSS styles (avoid overusing)
- title: tooltip text shown on hover
- hidden: hides the element from display and screen readers
- tabindex: controls keyboard navigation order
- lang: overrides the document language for a specific element
- contenteditable: makes element content editable in the browser
Key Points
- •id must be unique on the page only one element per id
- •class can appear on multiple elements and an element can have multiple classes
- •style applies CSS directly useful for quick changes but hard to maintain at scale
- •title appears as a browser tooltip on hover do not rely on it for essential info
- •hidden="true" or just hidden removes the element from display and accessibility tree
- •tabindex="0" adds an element to keyboard focus order; tabindex="-1" removes it
Examples
id and class usage
<!-- id: unique identifier -->
<section id="hero">
<h1>Welcome</h1>
</section>
<!-- class: reusable styling hook -->
<div class="card featured">
<p>I have two classes: card and featured.</p>
</div>
<div class="card">
<p>I have one class: card.</p>
</div>title, hidden, and tabindex
<!-- Title shows a tooltip on hover -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- Hidden removes from display and accessibility -->
<div hidden>This content is invisible to everyone.</div>
<!-- tabindex="0" makes a non-focusable element keyboard-focusable -->
<div tabindex="0" role="button">Click me with keyboard</div>
<!-- tabindex="-1" removes from tab order but allows JS focus() -->
<div tabindex="-1" id="modal">Modal content</div>contenteditable and lang
<!-- Editable content in the browser -->
<div contenteditable="true">
Click here to edit this text.
</div>
<!-- Override language for a specific element -->
<p lang="es">Hola, ¿cómo estás?</p>Common Mistakes
- Using duplicate id values on a page id must be unique
- Using id for styling (CSS should use class) and class for unique identification
- Relying on title for important information it's not accessible on touch devices
Note
Use id sparingly mainly for JS hooks, scroll targets, and form label associations. Use class for everything that needs reusable CSS styling. Never duplicate an id.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4