HTML Global Attributes and Their Purpose With HTML5 Examples

The 24 Global Attributes for HTML5

Beginner

With the introduction of HTML5 in 2014, the World Wide Web Consortium (W3C) introduced the concept of Global Attributes.

HTML Global Attributes

Global Attributes pass additional information to the user-agent (browser) regarding how to treat an element.

1. About the 24 HTML5 Global Attributes

Let's start with interesting points about Global Attributes.

Number - There are 24 Global Attributes in HTML5.
Adoption - Some Global Attributes are not broadly adopted by all popular browsers (Chrome, Firefox, Safari, Edge) so should be avoided.
Where used? - Global Attributes can be added to any element.
Location - Global Attributes are placed inside the opening tag of an element, like <p lang="en">.
Actions - Some Global Attributes have no impact, meaning the browser ignores them. In this case, they are exclusively for the convenience of the developer.

2. Source Documents for HTML5 Global Attributes

The developers of the browsers (Chrome, Firefox, Edge and Safari) build features into their browsers on their own schedule based on recommendations from two sometimes competing organizations. Links to their documentation here open in a new browser window.

whatwg.org - The Web Hypertext Application Technology Working Group (WHATWG) issues a resource called the Living Standard.
w3.org - The World Wide Web Consortium issues a resource called the HTML 5 Recommendation.

3. Documentation on HTML5 Global Attribute Adoption

As mentioned, some Global Attributes do not have broad support across browsers, so the developer must understand that the user experience may be inconsistent.

The website https://caniuse.com (opens in a new window) is a frequently used site by developers. It offers information on browser adoption of not only HTML and its Global Attributes, but other HTML browser features including CSS and JavaScript.

4. Syntax for HTML5 Global Attributes

Let's walk through an example of a commonly used Global Attribute for the <div> element. It is used to create a section, or division, within a document.

Assume a developer has a division of HTML that she wants to style with a gray background. A block of CSS code saved in a separate file might look like this.

.gray-background { background-color:gray }

Next, in the HTML document the developer uses the class Global Attribute to point to customized styling information in the CSS file.

<div class="gray-background"> <p>This block has a gray background.</p> </div>

Coded like this, that same styling information can be shared across any similarly coded <div> element. So anywhere the <div class="gray-background"> appears, that syling will be displayed.

5. The List of 24 Global Attributes for HTML5

Below is the list of Global Attributes. See the source documentation above for details on possible attribute values.

As mentioned, not all are widely adopted by developers and user-agents, so we prioritize the most widely-supported attributes that beginners should learn first as High in the Priority column.

Attribute	Priority	Purpose
`accesskey`	Low	To specify a keyboard shortcut to an element. (Not widely supported across operating systems, so an alternative is `tabindex`)
`autocapitalize`	Low	To automatically capitalize or lowercase text in input fields like forms. (Low browser adoption)
`class`	High	To specify one or more class names (space-separated list) to apply to an element for CSS styling or JavaScript automation.
`contenteditable`	Mid	A true ("true" or "") or false ("false") setting for whether the content in the element can be edited.
`data-*`	Mid	A powerful feature to pass one or many custom data attributes, like name-value pairs, to the element within the web page or application. The * is where custom names are supplied using common naming conventions.
`dir`	Mid	To set the direction for the text in an element with "ltr" for left-to-right languages like English and "rtl" for languages like Arabic and Hebrew. An "auto" setting lets the user-agent decide.
`draggable`	Mid	A "true" or "false" specification for whether an element can be dragged. This is typically used for text, images and links.
`dropzone`	Low	To specify the results of dragged data. Dragging can "copy", "move", or create a "link" to the data being dragged. (Low adoption)
`hidden`	Mid	A "true" or "false" Boolean that sets an element as hidden until some further action is completed.
`id`	High	Assigns an element an identifier with a unique name in the document to be used for styling or scripting.
`inputmode`	Low	Provides information to the user-agent as to what type of input to expect so it can provide an appropriately helpful keyboard to input "text", "decimal", "numeric", or "search" data, among others. (Low adoption and may be deprecated)
`is`	Low	To instruct the browser to interpret a standard element as a custom-defined element. (Low adoption)
`itemid`	Mid	One of five attributes used for passing Microdata, like that specified by schema.org for search engines. This attribute specifies a unique identifier.
`itemprop`	Mid	One of five attributes used for passing Microdata, like that specified by schema.org for search engines. This attribute supplies properties as name-value pairs.
`itemref`	Mid	One of five attributes used for passing Microdata, like that specified by schema.org for search engines. This attribute provides a list of element IDs associated with the Microdata found elsewhere in the document.
`itemscope`	Mid	One of five attributes used for passing Microdata, like that specified by schema.org for search engines. This attribute creates the Item.
`itemtype`	Mid	One of five attributes used for passing Microdata, like that specified by schema.org for search engines. This attribute points to the URL that defines the Microdata and its properties.
`lang`	High	To indicate the language of the element's content using a simple, but potentially-complex language tag that can include all of the dialects across the world. The `<html>` tag often contains this Global Attribute. The document Tags for Identifying Languages (opens in a new window) provides details.
`slot`	Low	To create elements in the Shadow DOM which is a subtree not in the main document's DOM tree. (Only modest adoption)
`spellcheck`	Mid	Set to "true" or "false" to specify whether the element should be checked for spelling errors. This is typically used for `<input>` or `<textarea>` elements. Many mobile devices have their own spellcheck so this might not be compatible there.
`style`	High	To set styling for that element alone which is fairly common for testing purposes but is not an advised practice for production. Styling should be placed in CSS files instead.
`tabindex`	Mid	A setting that indicates whether an element is focusable and reachable via sequential keyboard navigation, like when a user tabs from one element to the next in an input form. Integers provided have different meanings. When a negative integer is supplied "-1" for focusable but not reachable by keyboard navigation (ie, tabbing). A "0" means it is both focusable and reachable. A "+1" and above sets the order.
`title`	High	To provide additional information about an element. Sometimes the text provided can be seen when the mouse hovers over an element to provide details of an abbreviation `<abbr>`, as an example. Other tags where it is common include: `<input>`, `<link>`, `<menuitem>` and `<iframe>`. Be careful with container elements because of inheritance. This attribute is less useful for touch-only devices like mobile devices.
`translate`	Mid	Specify "yes" or "" to specify whether the text content in an element should be translated when the page is localized, or "no" to leave it as is. (Adoption varies depending on the element it is assigned to)

As a starting point, beginners should feel comfortable with the five Global Attributes marked High and know how to look up the details of Mid priority attributes in the documentation, with links provided above.

HTML Global Attributes List: Reference and Examples