HTML Global Attributes
Global attributes can be used on (almost) any HTML element. Memorise these — they cover most of what you actually type.
Identification & styling
| Attribute | Purpose |
|---|---|
id | Unique identifier on the page. |
class | One or more space-separated class names. |
style | Inline CSS for this element only. |
title | Tooltip text on hover. |
data-* | Custom data attributes — read via element.dataset. |
Language & direction
| Attribute | Purpose |
|---|---|
lang | Language of the element's content (e.g. en, fr). |
dir | Text direction: ltr, rtl, or auto. |
translate | yes or no — tells translation tools to skip. |
Interaction
| Attribute | Purpose |
|---|---|
tabindex | Override tab order. 0 = focusable; -1 = focusable only by script. |
contenteditable | true makes any element editable in place. |
draggable | true enables drag-and-drop. |
hidden | Hide the element from rendering. |
spellcheck | true / false for editable text. |
autofocus | Focus on page load (use sparingly). |
Accessibility
| Attribute | Purpose |
|---|---|
role | ARIA role (use only if the semantic element doesn't fit). |
aria-label | Accessible name when there's no visible label. |
aria-labelledby | Reference another element's id as the label. |
aria-hidden | Hide from assistive tech. |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Global Attributes</title>
</head>
<body>
<h1>HTML Global Attributes</h1>
<p>This is a demo page for the "HTML Global Attributes" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Mark this section as the page in Spanish using the global lang attribute.
<section
="es">¡Hola!</section>
Four letters. Stands for "language".
Discussion
Loading…