Global Attributes are attributes that can be on any HTML element.
Examples include id, class, style, data-*, title, and others.
A <style> element with an id global attribute.
<style id="page-style">
.bg-page { background-color:white; }
</style>
Why would anyone place an id on a <style> element? Yes, it is unusual, but also quite powerful. For example, it allows JavaScript to dynamically change the page background to another color.
Here is a list of global attributes.
Click on any attribute name to learn more.
| Attribute | Description | |
|---|---|---|
| id | Sets a unique identifier for the element. | |
| class | Sets one or more CSS classes to be applied to the element. | |
| style | Sets the style for the element. | |
| data-* |
Defines additional data that can be used by JavaScript. |
|
| hidden | Specifies whether the element is hidden. | |
| title | Sets a title that displays as a tooltip when element is hovered. | |
| tabindex | Sets a tab sequence number relative to the other elements. | |
| lang | Sets the language for the element. | |
| draggable | Specifies whether the element can be dragged. | |
| accesskey | Sets a shortcut key for the element. | |
| inputmode | Sets keyboard configuration for when editing the element. | |
| spellcheck | Specifies whether to spellcheck the element. | |
| autocapitalize | Specifies to capitalize the data entered. | |
| contenteditable | Specifies whether the element is editable. | |
| dir | Sets the display direction: left-to-right or right-to-left. |
|
| is | Specifies that element behaves like a registered custom element. |
Note: In some cases, global attributes have no effect and are simply ignored by the browser.
Note: Event attributes, such as onclick, are also global and can be placed on any element.
