While some attributes are strictly tied to a single tag (like the src attribute on an <img> tag), Global Attributes are universal. They can be placed on virtually any HTML element, regardless of what that element is.
Below is a list of the most frequent global attributes you will use to identify, style, and manage your HTML elements.
| Attribute | Description |
|---|---|
accesskey | Specifies a shortcut keyboard key to physically focus or activate an element. |
class | Specifies one or more CSS class names for an element. Allows you to style multiple elements at once using CSS, or select them via JavaScript. |
contenteditable | Specifies whether the content inside an element is actively editable by the user directly on the web page (often used to build rich text editors). |
data-* | Allows you to embed custom, invisible data attributes on an HTML element that can be safely read or modified by JavaScript later. |
dir | Specifies the text direction for the content of an element (ltr for left-to-right, rtl for right-to-left). |
draggable | Specifies whether an element can be physically dragged across the screen by a user using the mouse. |
hidden | Specifies that an element is not yet, or is no longer, locally relevant. Browsers will completely hide elements with this attribute. |
id | Specifies a unique identification name for an element. It is illegal to use the exact same ID twice on a single HTML document. |
lang | Specifies the spoken language of the element's direct content (e.g., lang="en"). Crucial for accessibility and screen readers. |
spellcheck | Specifies whether the element's textual content is to have its spelling and grammar checked by the browser natively. |
style | Allows you to specify inline, localized CSS formatting rules directly onto the single element. |
tabindex | Specifies the strict tabbing order of an element when a user navigates a web page using the "Tab" key on their keyboard. |
title | Provides extra, supplementary information about an element. The text is usually displayed as a floating tooltip when the mouse hovers over the element. |
translate | Specifies whether the textual content of an element should be automatically translated by translation tools like Google Translate, or ignored. |
onclick, onmouseover, and onScroll) are also considered Global Attributes, as they can be placed on almost any tag!