HTML Global Attributes
We will explain what Global Attributes mean and see them all in this chapter.
Global attributes can be used on any HTML element. However, some attributes have no effect on certain elements. For instance, spellcheck won't affect the behavior or semantics of a paragraph, and lang will have no effect on an element without content.
You can find all Global Attributes and their explanations below:
| Attributes | Description | Value | Syntax |
|---|---|---|---|
| accesskey | Generates a keyboard shortcut for the element. The way of accessing the shortcut key varies depending on the browser (e.g., ALT, CTRL, ALT+SHIFT, or CTRL+ALT). | character | <element accesskey="character"> |
| class | Adds one or more class names to an element. When used with stylesheets, it tells the browser which classes should apply properties to the element. | classname | <element class="classname"> |
| contenteditable | Specifies whether the content of an element is editable. With the "true" value, the content will be editable; with the "false" value (default), it will not be. | true false | <element contenteditable="true|false"> |
| contextmenu | Deprecated. Was used to create a context menu for the element, shown when the user right-clicks. Removed from the HTML Living Standard. | menu_id | <element contextmenu="menu_id"> |
| data-* | Allows embedding custom data attributes on all HTML elements. These attributes are accessible via the JavaScript dataset API. | value | <element data-attribute="value"> |
| dir | Defines the text direction for contents within the element. Useful for inserting content with a different text direction, such as Arabic or Hebrew. | rtl ltr auto | <element dir="ltr|rtl|auto"> |
| draggable | Defines whether an element is draggable. When "true", the browser allows dragging; when "false", dragging is disabled. | true false auto | <element draggable="true|false|auto"> |
| dropzone | Specifies whether dragged data is copied, moved, or linked after it is dropped. If omitted, "copy" is implied by default. | copy move link | <element dropzone="copy|move|link"> |
| hidden | When present, it indicates that an element is not yet or no longer relevant. Browsers will hide the element. | - | <element hidden> |
| id | Defines a unique id for the element. Identifiers must be at least one character long and should not contain space characters. | id | <element id="id"> |
| lang | Defines the language of the element's content. See all language codes here. | language_code | <element lang="language_code"> |
| spellcheck | Defines whether an element may be checked for spelling errors. When "true" or an empty string (""), browsers commonly underline misspelled words and provide alternatives. When "false", spelling checks are disabled. | true false | <element spellcheck="true|false"> |
| style | Defines inline CSS styles for an element. Unlike the class attribute, this applies styles directly to the element. | style_definitions | <element style="style_definitions"> |
| tabindex | Defines the tabbing order for an element when navigating with the "Tab" key. If the value is negative, the element is excluded from sequential keyboard navigation. | number | <element tabindex="number"> |
| title | Provides extra information about the element. Browsers typically display this as a tooltip. | text | <element title="text"> |
| translate | Defines whether the content of an element must be translated. When "yes" or an empty string (""), browsers will translate the text. When "no", the element is excluded from translation. | yes no | <element translate="yes|no"> |
Practice
Practice
Which of the following is a true statement about HTML Global attributes according to https://www.w3docs.com/learn-html/global-attributes.html?