Global attributes

Attributes are a mechanism of HTML by which authors can set parameters or configuration for elements. These attributes can define, for example, the direction of text or language used inside the element, a relationship between this and another element, or advisory information for its proper interpretation, among many others.

In HTML5 there's a number of attributes defined for all elements in the standard, called gobal attributes. Nonetheless, not all elements will be affected by all global attributes. For example, the attribute spellcheck will not affect the behavior or semantic of a paragraph, the same way the lang attribute will have no effect on an element without content or textual attributes.

List of global attributes

accesskey

A key label, or list of space separated key labels, to be associated to the element. Browsers will commonly execute the actions associated to the element (for example, following a link for the a element) or give it the focus when the keys specified in this attribute are pressed in combination with ALT, CTRL, ALT+SHIFT or CTRL+ALT, depending on the browser.

Example

<p>Puedes usar el teclado para seguir este vínculo: <a accesskey="h" href="http://www.htmlquick.com/es/">Inicio de HTMLQuick.com</a></p>

Puedes usar el teclado para seguir este vínculo: Inicio de HTMLQuick.com

class

A class name, or a list of class names separated by spaces. This attribute is used toghether with style sheets and tells the browser which classes are supposed to assign presentational properties to the element.

Example

<p class="references">This article is based on the book "Wind in the trees" by Jhon L. Brooks</p>

contenteditable

A value indicating the browser if it should allow the visitor to edit the element's contents. If the attribute takes the values "true" or the empty string (""), or if it's simply present, the contents of the element will be editable. If it takes the value "false" (default value) or it's absent, the contents won't be editable.

Example

<p contenteditable>If your browser supports this attribute, you'll be able to edit this paragraph.</p>

If your browser supports this attribute, you'll be able to edit this paragraph.

contextmenu

The id value of a popup context (menu with the value "popup" in its type attribute). This menu will be shown by browsers as a context menu for the element, usually when the user right-clicks over it.

Support for native menu interfaces is incomplete. Authors may have to rely on scripts in order to provide this functionality cross-browser, until support grows.

Example

<p contextmenu="likemenu">Whenever you find you are on the side of the majority, it is time to pause and reflect.</p>
<menu type="popup" id="likemenu">
  <menuitem label="It's great!" type="radio" radiogroup="likeradiogroup" checked></menuitem>
  <menuitem label="Mmm... nah!" type="radio" radiogroup="likeradiogroup"></menuitem>
</menu>

Whenever you find you are on the side of the majority, it is time to pause and reflect.

dir

The direction that the text in the element's contents is written in. This attribute is useful when inserting a piece of content with different text directionality to the document's, like when text in arabic, hebrew, or syriac is included in a document written in some western language. It can take three case-insensitive values:

  • rtl: Right to left.
  • ltr: Left to right.
  • auto: The browser decides what the text direction is.

The mechanism provided by browsers to detect the directionality of text is very crude. Authors are encouraged to provide a value for this attribute (other than "auto") whenever needed.

Example

<p>The sign said: <q lang="he" dir="rtl">[text in hebrew]</q>.</p>

draggable

A boolean value specifying if the element can be dragged. If the attribute takes the value "true", the browser will allow the user to drag this element. If it takes the value "false" dragging capabilities won't be provided.

When this attribute is present, the title attribute should be present too and provide a name for the element, vital in non-visual interaction.

Unfortunately, browser support for drag and drop operations is extremely low. Authors may need to resort to scripts until support grows.

Example

<p draggable="true">If your browser allows it, you can drag this paragraph.</p>

If your browser allows it, you can drag this paragraph.

dropzone

A list of space-separated tokens, that match case-insensitively one of the following values:

  • copy: Indicates that a copy of the content dropped into the element should be added.
  • move: Makes the content dropped to be moved into the element.
  • link: States that a link to the dropped content should be added to the element.
  • string:[type]: Indicates that a string of type "[type]" is allowed to be dropped inside the element.
  • file:[type]: Indicates that a file of type "[type]" is allowed to be dropped inside the element.

The dropzone attribute shouldn't have more than one of the three first values ("copy", "move", and "link"). If none are present, the "copy" value is implied.

Unfortunately, browser support for drag and drop operations is extremely low. Authors may need to resort to scripts until support grows.

Example

<p dropzone="copy string:text/html file:image/png">This paragraph is a dropzone. If your browser supports it you should be able to drop here HTML strings, and PNG files.</p>

hidden

A value that indicates the element is not yet, or no longer, relevant. The attribute can state this by taking the values "hidden" or the empty string (""), or by just being present with no value at all. Browsers will hide the whole element from the document (not only visual but completely) as if it doesn't exists.

Example

<p>This is the first paragraph.</p>
<p hidden>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

This is the first paragraph.

This is the third paragraph.

id

An identifier for the element. This identifier must be unique in the document and can be used to refer to the element from links, scripts, style definitions or other attributes.

Identifiers must be at least one character long and should not present space characters (spaces, tabulations, line feeds, form feeds or carriage return).

Example

<p id="paragraph1">This paragraph has an ID so you can, for example, manipulate it from a script.</p>

is

A name for a custom element that extends other element in the standard.

This attribute requires an extended class to be defined programatically to have meaning. Content authors may not find a productive use for it.

Example

<button is="fancy-button">This is a custom button that extends a regular button element.</button>

itemid

A URI matching a global identifier for the property the element is representing. This global identifier must be defined by the vocabulary declared in the itemtype attribtue.

This attribute should be present only if the attributes itemscope and itemtype are also present.

This attribute is part of Microdata syntax, a mechanism of HTML5 to provide script-accessible versions of the data contained in a document.

Example

<ul itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:1-619-49173-7">
 <li>Title: <span itemprop="title">The sign of the four</span></li>
 <li>Author: <span itemprop="author">Sir Arthur Conan Doyle</span></li>
 <li>Publication date: <time itemprop="pubdate" datetime="2013-10-03">October 3, 2013</time></li>
</ul>

itemprop

A space-separated list of one or more tokens, providing each the name of a property this element gives a value for.

The tokens in this attribute must be a property name allowed by the specification defined in the itemtype attribute of the item. If the itemtype attribute isn't present, it can be any value not containing a full stop character ("."), nor a colon character (":").

This attribute is part of Microdata syntax, a mechanism of HTML5 to provide script-accessible versions of the data contained in a document.

Example

<p itemscope><span itemprop="user">John Doe</span>: <span itemprop="comment">That's really cool!</span></p>

itemref

A space-separated list of one or more tokens, matching the id attributes of the elements that provide data for this item.

This attribute isn't part of the Microdata syntax. It's simply a mechanism to allow authors to declare properties that aren't children of the item, like between cells in a table.

Example

<table>
  <tr>
    <th>Name</th>
    <td itemscope itemprop="name" itemref="surname1">Johann Sebastian</td>
    <td itemscope itemprop="name" itemref="surname1">Wolfgang Amadeus</td>
  </tr>
  <tr>
    <th>Surname</th>
    <td id="surname1" itemprop="surname">Bach</td>
    <td id="surname2" itemprop="surname">Mozart</td>
  </tr>
</table>

itemscope

A boolean value indicating if this element is an item in the Microdata syntax model. If this attribute takes the value "itemscope" or the empty string, or if it's just present, the element is an item.

This attribute is part of Microdata syntax, a mechanism of HTML5 to provide script-accessible versions of the data contained in a document.

Example

<p itemscope><span itemprop="event-name">John's birthday party</span> will start <time itemprop="event-time" datetime="2015-05-21 20:00">tonight at 8:00 o'clock</time></p>

itemtype

A space-separated list of URIs, each pointing to a resource defining a vocabulary (the set of names used in the itemprop attribute). If this list has more than one element, all elements must define the same vocabulary.

Most global vocabularies can be found at the Schema.org website. Because of its popularity, authors are encouraged to use it as vocabulary resource whenever possible.

This attribute is part of Microdata syntax, a mechanism of HTML5 to provide script-accessible versions of the data contained in a document.

Example

<p itemscope itemtype="http://schema.org/Event">The opera <span itemprop="name">La traviata</span> will be played <time itemprop="startDate" datetime="2015-08-10 22:00">the next monday at 10pm</time> and will last <time itemprop="duration" datetime="PT 2H">two hours</time> long.</p>

lang

The language used in the element's content and in all the attributes containing text. The language must be specified with a valid language tag.

It's very important to define the lang attribute wherever text is presented in a language other than the document's. This can be specially helpful for interpreters like voice browsers, that need to change the pronunciation of words according to the language they're written in.

Example

<p>'Guy' is the most approximate translation for '<span lang="es-ES">chaval</span>'.</p>

'Guy' is the most approximate translation for 'chaval'.

slot

The name of the component slot this element should be placed in. The value of this attribute should match the name attribute of the target slot.

The slot attribute is part of the shadow DOM specification and is intended to be handled by scripts. Content authors may find little use in this attribute.

Example

<span slot="album">Looking at the stars</span>

spellcheck

A value indicating wether the element should be subject to spell or grammar checking. If set to "true" or the empty string (""), browsers will commonly underline misspelled words in red and provide alternatives in a context menu. When set to "false", the browser will avoid checking the element's content for spelling errors.

The spellcheck attribute is supposed to work only in text fields and elements with the contenteditable attribute enabled. In most browsers, its effects will only be shown when the element gets the focus.

Support for the spellcheck attribute is incomplete. Authors may have to rely on scripts in order to provide cross-browser spellchecking until support grows.

Example

<input type="text" value="Text to be xhecked" spellcheck="true">

style

A set of CSS declarations that will be applied by browsers to the element, and will define presentational attributes for it. In contrast to the class attribute, this is considered the "inline" way of applying style properties.

Example

<p style="color: #ff6600; font-size: 1.5em">This is a paragraph with a defined style.</p>

This is a paragraph with a defined style.

tabindex

An integer indicating the position of the element in the tabbing navigation (the navigation through all the focusable elements by pressing the TAB key). If the value is negative, the element will be excluded from the tabbing navigation.

The default focusable elements are: a and link (with an href value), button, input (when its type isn't "hidden"), select, textarea, menuitem, an element defining a browsing context (like iframe), an element with the contenteditable attribute present or th with a sorting interface.

If this attribute is omitted, the browser will automatically determine the position of all focusable elements according to their position in the code.

Besides deciding the position of the element in the tabbing navigation, the tabindex attribute also states that the element becomes a focusable element, despite its default condition.

Example

<a href="document2.html" tabindex="2" style="float: right;">Second document</a>
<a href="document1.html" tabindex="1">First document.</a>

title

A run of text representing advisory information for the element that could act as description, expansion, footnote, title, label, instruction, etc. Browsers usually show this information in a "tool tip" (a small box of text) in response to some event like , for example, when the user puts the mouse over the element.

Some elements, such as link, abbr, and input, define additional semantics for the title attribute beyond the semantics described above.

Example

<p>Put your mouse over the following link to see the "tool tip": <a title="Link to HTMLQuick.com homepage" href="http://www.htmlquick.com/">HTML tutorials</a>.</p>

Put your mouse over the following link to see the "tool tip": HTML tutorials.

translate

A value indicating wether the browser should translate the content of the element and its children (including attributes with textual values) when the document is localized. If set to "yes" or the empty string (""), browsers will commonly translate all texts in this element. If set to "false", browsers will omit the element in the translation process.

Browser support for the translate attribute is incomplete. Authors shouldn't rely on this functionality until support grows.

Example

<p translate="yes">This weekend we'll go to the '<span translate="no">Super Party</span>' festival.</p>

This weekend we'll go to the 'Super Party' festival.