HTML Global Attributes

Global Attributes are attributes that can be applied to any HTML element. Common global attributes include id,  class,  style,  data-*,  and  title.

HTML Tutorial

Example

An id global attribute on a <style> element.

<style id="page-style">
  .bg-page { background-color:white; }
</style>
An id on a style element?

Why would anyone place an id on a <style> element? Yes, it is unusual, but also quite powerful. For example, it allows JavaScript to dynamically change the page background to another color.


List of Global Attributes in HTML

Here is a list of global attributes.
Click on any attribute name to learn more.

Attribute Description
  id Sets a unique identifier for the element.
  class Sets one or more CSS classes to be applied to the element.
  style Sets the style for the element.
  data-* Defines additional data that can be used by JavaScript.
  hidden Specifies whether the element is hidden.
  title Sets a title that displays as a tooltip when element is hovered.
  tabindex Sets a tab sequence number relative to the other elements.
  lang Sets the language for the element.
  draggable Specifies whether the element can be dragged.
  accesskey Sets a shortcut key for the element.
  inputmode Sets keyboard configuration for when editing the element.
  spellcheck Specifies whether to spellcheck the element.
  autocapitalize Specifies to capitalize the data entered.
  contenteditable Specifies whether the element is editable.
  dir Sets the display direction: left-to-right or right-to-left.
  is Specifies that element behaves like a registered custom element.

Note:  In some cases, global attributes have no effect and are simply ignored by the browser.

Note:  Event attributes, such as onclick, are also global and can be placed on any element.


You may also like

Guides