HTML Global Attributes | Attributes for HTML Elements

Understanding Global Attributes

Global attributes are HTML attributes that can be specified on all HTML elements, providing information or functionality that is not limited to one particular type of element.

Global attributes are used for many purposes, including identifying elements, assigning classes, specifying languages, storing custom data, controlling visibility, and supporting accessibility and user interaction. Although a global attribute is permitted on all HTML elements, it may not have a useful or observable effect on every element.

The id Attribute

The id attribute assigns an identifier to an HTML element. An id value should be unique within the document so that it identifies one particular element.

<section id="about">
  <h2>About Us</h2>
</section>

An element's id can be used for several purposes, including linking to a location within a document, selecting the element with CSS, and accessing the element with JavaScript.

For example, a hyperlink can reference the about element using a fragment identifier:

<a href="#about">About Us</a>

Because an id identifies a particular element within the document, avoid assigning the same id value to multiple elements.

The class Attribute

The class attribute assigns one or more class names to an element. Unlike an id, the same class name can be assigned to multiple elements.

<p class="notice">Important information.</p>
<p class="notice">Additional information.</p>

Classes are commonly used to identify groups of elements for CSS styling or JavaScript.

An element can belong to more than one class. Multiple class names are separated by spaces within the attribute value:

<p class="notice important">Please read this message.</p>

In this example, the paragraph belongs to both the notice and important classes.

The title Attribute

The title attribute provides advisory information related to an element.

<abbr title="HyperText Markup Language">HTML</abbr>

Browsers may present title information as a tooltip when a pointing device hovers over an element, but this behavior should not be relied upon as the only way to provide important information.

Users working with touchscreens, keyboards, or assistive technologies may not receive the information in the same way. Important instructions or content should therefore be available directly within the page rather than existing only in a title attribute.

The lang Attribute

The lang attribute identifies the language of an element's content. It is commonly specified on the root html element to identify the primary language of the document.

<html lang="en">

The attribute can also identify content written in a different language within the same document:

<p>The Spanish word for hello is <span lang="es">hola</span>.</p>

Correct language information can help browsers, screen readers, translation tools, search engines, and other software process the content appropriately.

The hidden Attribute

The hidden attribute indicates that an element is not currently relevant and should not normally be presented to the user.

<p hidden>This information is currently hidden.</p>

hidden is a boolean attribute, so its presence indicates the hidden state. Removing the attribute removes that state.

Because hidden content is generally not presented to users, the attribute should not be used to hide information that users are expected to access in its current state.

The style Attribute

The style attribute allows CSS declarations to be applied directly to an individual HTML element. This is commonly called inline CSS.

<p style="color: blue;">This paragraph is blue.</p>

Although the style attribute is valid HTML, placing presentation directly in individual elements can make larger websites more difficult to maintain. Styles that are reused across a website are generally better placed in a stylesheet.

These tutorials will introduce CSS separately and show how stylesheets can be used to control presentation while keeping HTML focused primarily on the structure and meaning of the content.

Custom data-* Attributes

Custom data attributes allow information specific to a webpage or application to be stored directly on an HTML element. Their names begin with data- followed by a custom name.

<article data-product-id="1042">
  Product Information
</article>

In this example, data-product-id stores a custom value associated with the article element.

Custom data attributes are commonly accessed by scripts when a webpage needs additional information associated with particular elements.

Use data-* attributes for data that belongs to the page or application rather than inventing nonstandard HTML attributes.

Interaction Global Attributes

Several global attributes affect how users can interact with HTML elements. You will encounter these more frequently as you work with forms, interfaces, CSS, and JavaScript.

contenteditable — indicates whether the user can edit an element's content.
draggable — indicates whether an element can participate in drag-and-drop operations.
spellcheck — provides a hint about whether spelling and grammar checking should be enabled.
tabindex — influences whether and how an element participates in sequential keyboard focus navigation.

For example, the contenteditable attribute can make content editable by the user:

<p contenteditable="true">You can edit this text.</p>

Some interaction attributes have accessibility and usability implications, so they should be used with an understanding of how they affect keyboard, pointer, and assistive-technology users.

Global Attributes & Accessibility

Several global attributes can influence how users and assistive technologies understand or interact with a webpage. Attributes such as lang, dir, hidden, and tabindex can affect language processing, text direction, visibility, and keyboard navigation.

HTML also supports ARIA attributes that can provide additional accessibility information when native HTML alone cannot express the necessary semantics or state.

Whenever possible, begin with the appropriate native HTML element and its built-in semantics. ARIA should supplement HTML where necessary rather than replace correctly chosen HTML elements.

Accessibility attributes should be used according to their defined purpose. Adding attributes without understanding their effects can sometimes make a webpage less accessible rather than more accessible.

Common Global Attribute Mistakes

Global attributes are available across HTML elements, but they still have syntax and usage rules. Using them incorrectly can create confusing markup or cause unexpected behavior.

Common mistakes include:

Using the same id value for multiple elements.
Confusing id and class.
Using title as the only source of important information.
Forgetting to specify the document language with lang.
Using hidden="false" expecting the element to become visible.
Creating nonstandard attributes instead of using appropriate data-* attributes for custom data.
Using positive tabindex values to manually rearrange keyboard navigation without a compelling reason.
Using inline style attributes throughout a website when reusable CSS would be easier to maintain.

As with other HTML attributes, understanding the purpose of a global attribute is more important than simply knowing that the attribute exists.

Global Attribute Best Practices

Global attributes are powerful because they can be used throughout an HTML document. Consistent and purposeful use keeps the markup easier to understand and maintain.

Use unique and meaningful id values.
Use class when multiple elements need to share a classification.
Specify the primary document language with lang on the html element.
Do not rely on title for essential information.
Use data-* attributes rather than inventing custom nonstandard attributes for private page or application data.
Use tabindex carefully and preserve logical keyboard navigation.
Prefer reusable stylesheets over repeated inline style attributes.
Use native HTML semantics before adding ARIA to reproduce behavior or meaning already provided by HTML.

Not every element needs global attributes. Add an attribute when it provides information or functionality that is actually useful to the element, the document, or the people and software interacting with it.

Summary

Global attributes can be specified on all HTML elements and provide capabilities such as identifying elements, assigning classes, declaring languages, controlling certain states and interactions, storing custom data, and supplying additional information.

Some of the most commonly encountered global attributes include id, class, title, lang, hidden, style, data-*, contenteditable, and tabindex. Use global attributes according to their intended purpose and remember that being globally permitted does not necessarily make an attribute useful on every element.