FactorPad
Faster Learning Tutorials

HTML Global Attributes List

The 24 HTML5 attributes that can be applied to any tag are often overlooked, and sometimes misunderstood.
  1. About - Understand the purpose and particulars of Global Attributes in HTML.
  2. Sources - See where you can find additional information.
  3. Adoption - Find information about browser adoption of the attributes.
  4. Syntax - Review the basic structure for assigning attributes.
  5. The List - Review each of 24 Global Attributes by purpose and priority.
by Paul Alan Davis, December 18, 2018
Updated: December 18, 2018
Since a list of 24 attributes can be daunting, here we prioritize the list so beginners know were to begin.

Outline Back Next

~/ home  / tech  / html5  / reference  / html global attributes


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.

  1. Number - There are 24 Global Attributes in HTML5.
  2. Adoption - Some Global Attributes are not broadly adopted by all popular browsers (Chrome, Firefox, Safari, Edge) so should be avoided.
  3. Where used? - Global Attributes can be added to any element.
  4. Location - Global Attributes are placed inside the opening tag of an element, like <p lang="en">.
  5. 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.


Other Related HTML Content

Experts know it can take years to fully understand the suite of connected standards HTML, CSS and JavaScript.

Our content here is focused on getting the aspiring data analyst comfortable creating reports in HTML. A great place to start is with the whole list of 108 elements.


What's Next?

Have you seen our YouTube Channel yet? Subscribe here and see if the videos help you learn faster.

  • For the complete HTML tag list, click Outline.
  • To see the main page for HTML content, click Back.
  • For the first element <a> for creating hyperlinks, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html global attributes



 
 
Keywords:
html global attributes
html elements
html tags
html attributes
html data attribute
html5 attributes
html attributes list
html tags and attributes list
html5 global attributes
html elements and attributes
html style attribute
html tag attributes
html id attribute
html style attribute
html lang attribute
html class attribute