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

autocapitalize

An enumerated value indicating browsers how input text should be automatically capitalized. There are four possible values:

  • off or none: the browser shouldn't automatically capitalize input text.
  • on or senctences: the browser should automatically capitalize the first character in each sentence.
  • words: the browser should automatically capitalize the first character in each word.
  • characters: the browser should automatically capitalize all input characters.

Example

<p>Title: <input type="text" name="title" autocapitalize="words"></p>

Title:

autocomplete

The autocomplete attribute provides information about if and how browsers should automatically suggest options for this control, as an attempt to guess what the user is typing. There are three possible values for this attribute:

  • The value on value, indicating the browser that it should suggest options automatically but not providing any further information about what kind of data is expected in the control.
  • The value off, indicating the browser that it shouldn't suggest options automatically, either because the control's input data is particularly sensitive (like the user to login in a very secure area) or because it's a value that will never be reused (like a one-time-key in a registration process).
  • An autofill detail tokens list, indicating the browser that it should suggest options automatically and specifying what kind of value is expected.

The values "on" and "off" never apply to input elements whose type attribute has the hidden value. In such elements, the content of this attribute describes the meaning of the element's value.

An autofill detail tokens list can be composed by the following tokens in the specified order.

  1. Optionally, a token beginning with the string "section-" (case-insentsitive), indicating the named group to which the field belongs.
  2. Optionally, one of the two following tokens (case-insentsitive):
    • shipping: the field is part of the shipping address.
    • billing: the field is part of the billing address.
  3. Either of the following two options:
    • Any of the following tokens (case-insentsitive):
      • For text inputs (input of type hidden, text or search, textarea and select elements):
        • name: a full name
        • honorific-prefix: a prefix or title, like Sir, Mr., Dr., etc.
        • given-name: a given or first name.
        • additional-name: aditinal or middle names.
        • family-name: a familiy or last name.
        • honorific-suffix: a suffix, like Jr., II or ABIST.
        • nickname: a nickname or short name used instead of the full name.
        • organization: the company associated with the person or information in other fields associated with this field.
        • organization-title: a job title, like Account Manager, Architect, Engineer, etc.
        • username: a user name, typically used for login operations, like "adam457" or "dark_matter_01".
        • address-line1: a street address component.
        • address-line2: a street address component.
        • address-line3: a street address component.
        • address-level4: the most fine-grained administrative level, in addresses with four administrative levels.
        • address-level3: the third administrative level, in addresses with three or more administrative levels.
        • address-level2: the second administrative level, in addresses with two or more administrative levels. In countries with two administrative levels, this would typically be the city, town or village.
        • address-level1: the broadest administrative level. This could be the province or state within which the locality is found.
        • country: a country code representing a country, like "US", "UK" or "ES".
        • country-name: the name of a country, like Albania, Liberia or Uruguay.
        • postal-code: a postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the arrondissement, if relevant, to the address-level2 field), etc., like 02139, 1428 or 10025.
        • cc-name: a full name as given on the payment instrument.
        • cc-given-name: a given or first name as given on the payment instrument.
        • cc-additional-name: aditinal or middle names as given on the payment instrument.
        • cc-family-name: a familiy or last name as given on the payment instrument.
        • cc-number: a code identifying the payment instrument, like a credit card number.
        • cc-csc: the security code for the payment instrument (CSC, CVC, CVV, SPC, CCID, etc.)
        • cc-type: the type of payment instrument used, like credit card.
        • transaction-currency: a currency code representing the currecy to be used in the transaction, like "USD", "ARS" or "GBP".
        • language: a language tag identifying the preferred language, like "en", "en-GB" or "es-419".
        • sex: a gender identity, like male or female.
      • For password inputs (input of type hidden, text, search or password, textarea and select elements):
        • new-password: a new password, typically requested when creating an account or changing a password.
        • current-password: the current password, typically requested when logging in or changing a password.
        • one-time-code: a one-time code used for verifying user identity.
      • For multiline inputs (input of type hidden, textarea and select elements):
        • street-address: a street address, possibly composed by multiple lines.
      • For month inputs (input of type hidden, text, search or month, textarea and select elements):
        • cc-exp: the expiration date of the payment instrument.
      • For numeric inputs (input of type hidden, text, search or number, textarea and select elements):
        • cc-month: the expiration month of the payment instrument.
        • cc-year: the expiration year of the payment instrument.
        • transaction-amount: the amount of the transaction, like when entering a bid or sale price.
        • bday-day: the day component of a birthday date.
        • bday-month: the month component of a birthday date.
        • bday-year: the year component of a birthday date.
      • For date inputs (input of type hidden, text, search or date, textarea and select elements):
        • bday: a birthday date.
      • For URL inputs (input of type hidden, text, search or url, textarea and select elements):
        • url: a home page or other web page corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com".
        • photo: a photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com/images/me.jpg".
    • The following, in the given order:
      1. Optionally, a token that is a case-insensitive match for one of the following strings:
        • home: meaning the field is for contacting someone at their residence.
        • work: meaning the field is for contacting someone at their workplace.
        • mobile: meaning the field is for contacting someone at their mobile device.
        • fax: meaning the field describes a fax machine's contact details.
        • pager: meaning the field describes a pager's or beeper's contact details
      2. A token that is a case-insensitive match for one of the following autofill field names:
        • For telephone inputs (input of type hidden, text, search or telephone, textarea and select elements):
          • tel: a full telephone number, including country code, like +1 617 253 5702.
        • For text inputs (input of type hidden, text or search, textarea and select elements):
          • tel-country-code: the country code component of a telephone number, like +1 or +54.
          • tel-national: a telephone number without the country code, with a country-internal prefix, if applicable, like 617 253 5702.
          • tel-area-code: the area code component of a telephone number, like 617.
          • tel-local: a telephone number without country code and country-internal prefix, like 253 5702.
          • tel-local-prefix: the first part of a telephone number without country code and country-internal prefix, when such number is split into two components.
          • tel-local-suffix: the second part of a telephone number without country code and country-internal prefix, when such number is split into two components.
          • tel-extension: the internal extension code of a telephone number.
        • For e-mail inputs (input of type hidden, text, search or email, textarea and select elements):
          • email: an email address, like jhondoe@unknown.com.
          • username: a user name, typically used for login operations, like "second_plane@astromail.com".
        • For URL inputs (input of type hidden, text, search or url, textarea and select elements):
          • impp: an URL representing an instant messaging protocol endpoint like, "aim:goim?screenname=jhondoe" or "xmpp:jhondoe@unknown.com".

Browsers usually perform autofilling operations by retrieving data from a database containing previous inputs or other sources of user information.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Registration code: <input type="text" name="regcode" autocomplete="off"><br>
    Username: <input type="text" name="username" autocomplete="username"><br>
    <input type="submit" value="Send data">
  </p>
</form>

Registration code:
Username:

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.

enterkeyhint

An enumerated attribute that provides browsers with a hint for the purpose of the enter key in the current context. Browsers can consequently display a custom icon for the enter key in virtual keyboards, that better reflects the action that will be executed when the key is pressed.

The enterkeyhint attribute has been recently introduced to the standard and browser support is expected to be low. Nevertheless, its use is still recommended as it may provide a non-crucial feature when supported.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Search your book: <input type="text" name="booksearch" inputmode="search" enterkeyhint="search">
    <input type="submit" value="Search">
  </p>
</form>

Search your book:

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.

inputmode

A value indicating what type of input mechanism would be most helpful for users entering data in a control or any element with the contenteditable attribute present. There are eight possible case-insensitive values:

  • none: no input mechanism should be displayed.
  • text: text input in the user's locale.
  • tel: telephone number input, including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels.
  • url: text input in the user's locale, with keys for aiding in the input of web addresses, such as that for the "/" and "." characters and for quick input of strings commonly found in domain names such as "www." or ".co.uk".
  • email: text input in the user's locale, with keys for aiding in the input of e-mail addresses, such as that for the "@" and "." characters.
  • numeric: numeric input, including keys for the digits 0 to 9, the thousands separator character for the locale, and the character for indicating negative numbers.
  • decimal: fractional numeric input, additionally including a key for the decimal separator.
  • search: text input optimized for search purposes.

Browsers may use the information in this attribute to provide a mechanism to help the user filling the data. For example, virtual on-screen keyboards may provide special keys for the specified input mode.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Enter your e-mail: <input type="text" name="email" inputmode="email">
    <input type="submit" value="Send data">
  </p>
</form>

Enter your e-mail:

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'.

nonce

A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not an external resource specified by the element will be loaded and applied to the document.

Example

<link rel="search" href="search.php" nonce="aHR0cDovL2h0bWxxdWljay5jb20vcy5waHANCg==">

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.

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.

This attribute has been removed from the starndard due to lack of browser support. Authors should use client-side scripts to replace its functionality.

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>

Custom data attributes

Any attribtue on any element that begins with the string "data-" is a custom data attribute. These attributes define author's custom data for the element they're declared in and are designed to be used, mostly, with scripts.

In the following example, custom data attributes are used to help a script identify an item for sale and its characteristics, while leving no trace of this specific information in the user view.

Example

<td data-code="3213764135438543" data-category="trinkets" data-price="25000000">
  <b>Item:</b> Original Fabergé Imperial Coronation Egg<br>
  <b>Price:</b> $25.000.000
</td>

Item: Original Fabergé Imperial Coronation Egg
Price: $25.000.000