Global Attributes are used to refer to attributes, which are used on any HTML element. These attributes are common for all elements in HTML. However, some attributes have no effect on some elements. For instance, the attribute spellcheck won't affect the behavior or semantic of a paragraph, the same way the lang attribute 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 in combination with ALT, CTRL, ALT+SHIFT or CTRL+ALT depending on the browser. |
character | <element accesskey="character"> |
| class | Adds one or more class names for an element. When used with style sheets, it tells the browser, which classes are supposed to assign properties to the element. | classname | <element class="classname"> |
| contenteditable | Specifies whether the content of the element is editable or not. With the "true" value the content of the element will be editable, with the "false" value (default value) the content won't be editable. |
true false |
<element contenteditable="true|false"> |
| contextmenu | Is used to create a context menu for the element, and it is shown when the user right clicks on the element. Is not used in HTML 4.01. |
menu_id | <element contextmenu="menu_id"> |
| data | Allows exchanging private information between HTML and its DOM representation. It allows embedding custom data attributes on all HTML elements. Is not used in HTML 4.01. |
somevalue | <element data-*="somevalue"> |
| dir | Defines text direction for contents within the element. It is useful for inserting a piece of content with different text direction to the document, like when text in Arabic, Hebrew, or other language. | rtl ltr auto |
<element dir="ltr|rtl|auto"> |
| draggable | Defines, if an element is draggable or not. When "true" value is used, the browser will allow the user to drag this element, when "false" value is used, dragging capabilities won't be provided. Is not used in HTML 4.01. |
true false auto |
<element draggable="true|false|auto"> |
| dropzone | Defines a dragged data is copied, moved or linked after it is dropped. If none of the values are present, the "copy" value is implied by default. Is not used in HTML 4.01. |
copy move link |
<element dropzone="copy|move|link"> |
| hidden | When present, it defines an element is not yet or no longer relevant. Browsers will hide the elements when the hidden attribute is specified. Is not used in HTML 4.01. |
- | <element hidden> |
| id | Defines a unique id for the element. Identifiers must be at least one character long and should not present space characters. | id | <element id="id"> |
| lang | Defines the content language of the element. For this purpose lang or hreflang language attributes are generally used. See all the language codes here. |
language_code | <element lang="language_code"> |
| spellcheck | Defines if an element may be checked for spelling errors or not. When "true" value is set or the empty string (""), browsers will commonly underline misspelled words in red and provide alternatives in a context menu. When "false" value is set, browsers will avoid checking the element's content for spelling errors. Is not used in HTML 4.01. |
true false |
<element spellcheck="true|false"> |
| style | Defines the CSS style for an element. In contrast to the class attribute, this attribute is considered to be the "inline" way of applying style properties. | style_definitions | <element style="style_definitions"> |
| tabindex | Defines tabbing order for an element (when the "tab" button is used for navigating). If the value is negative, the element will be excluded from the tabbing navigation. | number | <element tabindex="number"> |
| title | Is used to put extra information for the element. Browsers generally show this information in a "tool tip" text (a small box of text). | text | <element title="text"> |
| translate | Defines if the content of an element must be translated or not. When "yes" value is set or the empty string (""), browsers will regularly translate all texts in the element, when "false" value is set, browsers will exclude the element in the translation process. Is not used in HTML 4.01. |
yes no |
<element translate="yes|no"> |
Practice Your Knowledge
Which of the following is a true statement about HTML Global attributes according to https://www.w3docs.com/learn-html/global-attributes.html?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.