Global attributes

  • Revision slug: HTML/Global_attributes
  • Revision title: Global attributes
  • Revision id: 38575
  • Created:
  • Creator: Ms2ger
  • Is current revision? No
  • Comment Small tweak; 9 words added

Revision Content

HTML defines a few attributes that are common to all HTML elements. They can be used on all of them, though they may have no effect on some of them. 

Usage note: The HTML5 specification states that global attributes may be specified on all HTML elements, even those not specified by HTML5. This means that their usage with non-standard, incorrect or elsewhere-defined elements is allowed, though using these elements themselves is not allowed.

accesskey
This attribute hints for the generation of a keyboard shortcut for the current element. This attribute consists on a space-separated list of characters (one single Unicode code point). The browser should use the first one that exists on the computer keyboard layout.
{{ HTMLVersionInline("4") }} In previous versions of HTML, only one character could be specified. Also it wasn't a global attribute and could be applied only to the {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.
Normative document HTML5, section 8.5 ({{ HTMLVersionInline("4") }}: HTML4.01, section 17.11.2)
class
This attribute is a space-separated list of the classes of the element. Classes allows CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName().

Usage note: Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describes related to the semantic of the element, rather to the presentation of the element (e.g. attribute to describe an attribute rather than italics although an element of this class may be presented by italics). Semantic names will stay logical if the presentation of the page change.

Normative document HTML5, section 3.2.3.7 ({{ HTMLVersionInline("4") }}: HTML4.01, section 7.5.2)
contenteditable {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("1.9") }}
This enumerated attribute indicates if the element should be editable by the user. If so, the browser modifies its widget to allow this. The attribute must take one of the following values:
  • true or the empty string, which indicates that the element must be editable;
  • false, which indicates that the element must no be editable.

If this attribute is not set, its default value is inherited from its parent element.

Usage note: This attribute is an enumerated one and not a Boolean one; it means that the explicit usage of one of the values true, false or the empty string is mandatory and that a shorthand like <label contenteditable>Example Label</label> is not allowed, the correct way being <label contenteditable="true">Example Label</label>.

Normative document HTML5, section 8.7
contextmenu {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}
This attribute is related to the new HTML5 Interactive Commands.
dir
This enumerated attribute indicates the directionality of the element's text. It can have the following values:
  • ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
  • rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic).

Usage notes:

  • This attribute can be overrided by the CSS properties {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }}, if a CSS page is active and the element supports these properties.
  • As the directionality of the text is semantically related to it and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text would be display correctly even on a browser which doesn't support CSS or with the CSS deactivated.
  • This attribute is mandatory for the {{ HTMLElement("bdo") }} element. 
Normative document HTML5, section 3.2.3.5 ({{ HTMLVersionInline("4") }}: HTML4.01, section 8.2)
draggable {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("1.9.1") }}
This enumerated attribute indicates if the element can be dragged, using the Drag and Drop API. It can have the following values:
  • true, which indicates that the element may be dragged
  • false, which indicates that the element may not be dragged.

If this attribute is not set, its default value is auto meaning the behavior should be the one defined by default by the browser.

Usage notes:

  • This attribute is an enumerated one and not a Boolean one; it means that the explicit usage of one of the values true or false is mandatory and that a shorthand like <label draggable>Example Label</label> is not allowed, the correct way being <label draggable="true">Example Label</label>.
  • By default, only text selections, images and links can be dragged. For all others elements, the event ondragstart must be set in order to the drag and drop mechanism to work, as shown in this comprehensive example.
Normative document HTML5, section 3.9.5
hidden {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("2") }}
This Boolean attribute indicates that the element is not yet, or not longer, relevant. Typically, it can be used to hide elements of the page that can't be used until the log-in process has been completed. The browser won't render such elements.

Usage notes:

  • This attribute must not be used to hide content that could be legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface as this is only a styling decision and another style showing them would lead to a perfectly correct page.
  • Hidden elements shouldn't be linked from non-hidden elements.
  • Elements descendants of a hidden elements are still active, that means that script elements can still execute and form elements can still submit.
Normative document HTML5, section 8.1
id
This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identifies the element when linking (using a fragment identifier), scripting or styling (with CSS).

Usage note:

  • This attribute is an opaque string: it means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.
  • This attribute must not contains white spaces. Browsers treat non-conforming ID that contains white spaces as if the white space is part of the ID. That means that, contrary to the class attribute which allows space-separated values, only have one single ID through the id attribute. Note that an element may have several IDs, but the others should be set by another means, like via a script interfacing with the DOM interface of the element.
Normative document HTML5, section 3.2.3.1 ({{ HTMLVersionInline("4") }}: HTML4.01, section 7.5.2)
itemid {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}
This attribute is related to the HTML5 Microdata feature.
itemprop {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}
This attribute is related to the HTML5 Microdata feature.
itemref {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}
This attribute is related to the HTML5 Microdata feature.
itemscope {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}
This attribute is related to the HTML5 Microdata feature.
itemtype {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}
This attribute is related to the HTML5 Microdata feature.
lang
This attribute participation to the definition the language of the element, i.e. language non-editable that elements are written in and language that editable elements should be written in. The tag contains one single entry value in the format defines in the Tags for Identifying Languages (BCP47) IETF document. If the tag content is the empty string the language is set to unknown; if the tag content is not valid, regarding to BCP47, it is set to invalid.

Usage note: 

  • Even if the lang attribute is set, it may not be taken into account as the xml:lang attribute has priority. Read the algorithm determining the language of an element's content to see how the language is determined in all cases.
  • For the CSS pseudo-class {{ cssxref(":lang") }}, two invalid language names are different if their names are different.
Normative document HTML5, section 3.2.3.3({{ HTMLVersionInline("4") }}: HTML4.01, section 8.1)
spellcheck {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("1.8.1") }}
This enumerated attribute defines if the element may be checked for spelling errors or not. It may have the following values:
  • true, which indicates that the element should be, if possible, checked for spelling errors;
  • false, which indicates that the element should not be checked for spelling errors.
If this attribute is not set, its default value is element-type and browser-defined. This default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true.

You can consult this article to see a comprehensive example of the use of this attribute.

Usage notes:

  • This attribute is an enumerated one and not a Boolean one; it means that the explicit usage of one of the values true or false is mandatory and that a shorthand like <label spellcheck>Example Label</label> is not allowed, the correct way being <label spellcheck="true">Example Label</label>.
  • This attribute is merely a hint for the browsers: not all browser are required to be able to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.
  • The default value of this attribute is browser and element-dependant:
    Browser {{ HTMLElement("html") }} {{ HTMLElement("textarea") }} {{ HTMLElement("input") }} others Comment
    Firefox false false false inherited When layout.spellcheckDefault is 0
    false true inherited inherited When layout.spellcheckDefault is 1 (default value)
    false true true inherited When layout.spellcheckDefault is 2
    Seamonkey false false false inherited When layout.spellcheckDefault is 0
    false true inherited inherited When layout.spellcheckDefault is 1 (default value)
    false true true inherited When layout.spellcheckDefault is 2
    Camino false false false inherited When layout.spellcheckDefault is 0
    false true inherited inherited When layout.spellcheckDefault is 1
    false true true inherited When layout.spellcheckDefault is 2 (default value)
Normative document HTML5, section 8.8
style
This attribute contains CSS styling declaration to be applied to the element. Note it is recommended for styles to be defined in a separate files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose to allows for quick styling, for testing purpose for example.

Usage note: This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remains semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the hidden attribute.

Normative document HTML5, section 3.2.3.7({{ HTMLVersionInline("4") }}: HTML4.01, section 14.2.2)
tabindex
This integer attribute indicates if the element should be focusable and if it should participate to sequential keyboard navigation and at what position. It can takes several values:
  • a negative value which means that the element should be focusable but should not be reachable via sequential keyboard navigation;
  • 0 which means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
  • a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex (in case of several elements sharing the same tabindex, their relative orders is following their relative position in the document).

The element with a 0, an invalid or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order.

You can consult this article to see a comprehensive explanation of focus management.

Normative document HTML5, section 8.4.1({{ HTMLVersionInline("4") }}: HTML4.01, section 17.11.1)
title

This attribute contains a text representing advisory information related to the element it belongs too. Such information can typically, but not necessarily, be presented to the user as a tooltip. Typically, such title on a link is likely to contain the title or a description of the linked document, on a media element like an image, its description or the associated credits, on a paragraph, a footnote or a commentary about it, on a quotation, some information about the author, and so on.

If this attribute is omitted, it means that the title of the nearest ancestor of this element is still relevant for it (and can legitimately be used as the tooltip for that element. If this attribute is set to the empty string, it explicitly means that its nearest ancestor's title is not relevant for this element (and shouldn't be used in the tooltip for that element).

Additional semantics is attached to the title attributes of the {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }} and {{ HTMLElement("input") }}.

Usage note: The title attribute may contains several lines. Each U+000A LINE FEED (LF) inserted represents such a newline. Some caution must be taken though, as that means that:

<p>Newlines in title should be taken it account,like this <abbr title="This is a
multiline title">example</abbr>.</p>  
defines a two-line title.
Normative document HTML5, section 3.2.3.3 ({{ HTMLVersionInline("4") }}: HTML4.01, section 7.4.3)

Revision Source

<p>HTML defines a few attributes that are common to all HTML elements. They can be used on all of them, though they may have no effect on some of them. </p>
<div class="note">
<p><strong>Usage note: </strong>The HTML5 specification states that global attributes may be specified on all HTML elements, <em>even those not specified by HTML5</em>. This means that their usage with non-standard, incorrect or elsewhere-defined elements is allowed, though using these elements themselves is not allowed.</p>
</div>
<dl> <dt><a name="attr-accesskey">accesskey</a></dt> <dd>This attribute hints for the generation of a keyboard shortcut for the current element. This attribute consists on a space-separated list of characters (one single Unicode code point). The browser should use the first one that exists on the computer keyboard layout.<br> {{ HTMLVersionInline("4") }} In previous versions of HTML, only one character could be specified. Also it wasn't a global attribute and could be applied only to the {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.<br> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-accesskey-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-accesskey-attribute">HTML5, section 8.5</a> ({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey" title="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey">HTML4.01, section 17.11.2</a>)</td> </tr> </tbody> </table> </dd> <dt><a name="attr-class">class</a></dt> <dd>This attribute is a space-separated list of the classes of the element. Classes allows CSS and Javascript to select and access specific elements via the <a href="/En/CSS/Class_selectors" title="https://developer.mozilla.org/En/CSS/Class_selectors">class selectors</a> or functions like the DOM method <code title="dom-document-getElementsByClassName"><a href="/en/DOM/document.getElementsByClassName" title="https://developer.mozilla.org/en/DOM/document.getElementsByClassName">document.getElementsByClassName()</a></code>. <div class="note"> <p><strong>Usage note: </strong>Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describes related to the semantic of the element, rather to the presentation of the element (e.g. <em>attribute</em> to describe an attribute rather than <em>italics</em> although an element of this class may be presented by <em>italics</em>). Semantic names will stay logical if the presentation of the page change.</p> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#classes" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#classes">HTML5, section 3.2.3.7</a> ({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/struct/global.html#adef-class" title="http://www.w3.org/TR/REC-html40/struct/global.html#adef-class">HTML4.01, section 7.5.2</a>)</td> </tr> </tbody> </table> </dd> <dt><a name="attr-contenteditable">contenteditable</a> {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("1.9") }}</dt> <dd>This enumerated attribute indicates if the element should be editable by the user. If so, the browser modifies its widget to allow this. The attribute must take one of the following values: <ul> <li><span style="font-family: Courier New;">true</span> or the <em>empty string</em>, which indicates that the element must be editable;</li> <li><span style="font-family: Courier New;">false</span>, which indicates that the element must no be editable.</li> </ul> <p>If this attribute is not set, its default value is <em>inherited</em> from its parent element.</p> <div class="note"> <p><strong>Usage note: </strong>This attribute is an <em>enumerated </em>one and not a <em>Boolean </em>one; it means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span>, <span style="font-family: Courier New;">false</span> or the empty string is mandatory and that a shorthand like <code>&lt;label contenteditable&gt;Example Label&lt;/label&gt; </code>is not allowed, the correct way being <code>&lt;label contenteditable="true"&gt;Example Label&lt;/label&gt;</code>.</p> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-contenteditable" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-contenteditable">HTML5, section 8.7</a></td> </tr> </tbody> </table> </dd> <dt><a name="attr-contextmenu">contextmenu</a> {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}</dt> <dd>This attribute is related to the new <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html">HTML5 Interactive Commands</a>.</dd> <dt><a name="attr-dir">dir</a></dt> <dd>This enumerated attribute indicates the directionality of the element's text. It can have the following values: <ul> <li><span style="font-family: Courier New;">ltr</span>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> <li><span style="font-family: Courier New;">rtl</span>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic).</li> </ul> <div class="note"> <p><strong>Usage notes: </strong></p> <ul> <li>This attribute can be overrided by the CSS properties {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }}, if a CSS page is active and the element supports these properties.</li> <li>As the directionality of the text is semantically related to it and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text would be display correctly even on a browser which doesn't support CSS or with the CSS deactivated.</li> <li>This attribute is mandatory for the {{ HTMLElement("bdo") }} element. </li> </ul> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-accesskey-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-accesskey-attribute">HTML5, section 3.2.3.5</a> ({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-dir" title="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-dir">HTML4.01, section 8.2</a>)</td> </tr> </tbody> </table> </dd> <dt><a name="attr-draggable">draggable</a> {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("1.9.1") }}</dt> <dd>This enumerated attribute indicates if the element can be dragged, using the <a href="/En/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: <ul> <li><span style="font-family: Courier New;">true</span>, which indicates that the element may be dragged</li> <li><span style="font-family: Courier New;">false</span>, which indicates that the element may not be dragged.</li> </ul> <p>If this attribute is not set, its default value is <span style="font-family: Courier New;">auto</span> meaning the behavior should be the one defined by default by the browser.</p> <div class="note"> <p><strong>Usage notes: </strong></p> <ul> <li>This attribute is an <em>enumerated </em>one and not a <em>Boolean </em>one; it means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span> or <span style="font-family: Courier New;">false</span> is mandatory and that a shorthand like <code>&lt;label draggable&gt;Example Label&lt;/label&gt; </code>is not allowed, the correct way being <code>&lt;label draggable="true"&gt;Example Label&lt;/label&gt;</code>.</li> <li>By default, only text selections, images and links can be dragged. For all others elements, the event <strong>ondragstart</strong> must be set in order to the drag and drop mechanism to work, as shown in this <a href="/En/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">comprehensive example</a>.</li> </ul> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute">HTML5, section 3.9.5</a></td> </tr> </tbody> </table> </dd> <dt><a name="attr-hidden">hidden</a> {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("2") }}</dt> <dd>This Boolean attribute indicates that the element is not yet, or not longer, <em>relevant</em>. Typically, it can be used to hide elements of the page that can't be used until the log-in process has been completed. The browser won't render such elements. <div class="note"> <p><strong>Usage notes: </strong></p> <ul> <li>This attribute must not be used to hide content that could be legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface as this is only a styling decision and another style showing them would lead to a perfectly correct page.</li> <li>Hidden elements shouldn't be linked from non-hidden elements.</li> <li>Elements descendants of a hidden elements are still active, that means that script elements can still execute and form elements can still submit.</li> </ul> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute">HTML5, section 8.1</a></td> </tr> </tbody> </table> </dd> <dt><a name="attr-id">id</a></dt> <dd>This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identifies the element when linking (using a fragment identifier), scripting or styling (with CSS). <div class="note"> <p><strong>Usage note: </strong></p> <ul> <li>This attribute is an opaque string: it means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.</li> <li>This attribute must not contains white spaces. Browsers treat non-conforming ID that contains white spaces as if the white space is part of the ID. That means that, contrary to the <strong>class</strong> attribute which allows space-separated values, only have one single ID through the <strong>id</strong> attribute. Note that an element may have several IDs, but the others should be set by another means, like via a script interfacing with the DOM interface of the element.</li> </ul> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#concept-id" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#concept-id">HTML5, section 3.2.3.1</a> ({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/struct/global.html#adef-id" title="http://www.w3.org/TR/REC-html40/struct/global.html#adef-id">HTML4.01, section 7.5.2</a>)</td> </tr> </tbody> </table> </dd> <dt><a name="attr-itemid">itemid</a> {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}</dt> <dd>This attribute is related to the <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">HTML5 Microdata feature</a>.</dd> <dt><a name="attr-itemprop">itemprop</a> {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}</dt> <dd>This attribute is related to the <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">HTML5 Microdata feature</a>.</dd> <dt><a name="attr-itemref">itemref</a> {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}</dt> <dd>This attribute is related to the <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">HTML5 Microdata feature</a>.</dd> <dt><a name="attr-itemscope">itemscope</a> {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}</dt> <dd>This attribute is related to the <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">HTML5 Microdata feature</a>.</dd> <dt><a name="attr-itemtype">itemtype</a> {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}</dt> <dd>This attribute is related to the <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">HTML5 Microdata feature</a>.</dd> <dt><a name="attr-lang">lang</a></dt> <dd>This attribute participation to the definition the language of the element, i.e. language non-editable that elements are written in and language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class=" external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. If the tag content is the <em>empty string</em> the language is set to <em>unkn</em><em>own</em>; if the tag content is not valid, regarding to BCP47, it is set to <em>invalid</em>. <div class="note"> <p><strong>Usage note: </strong></p> <ul> <li>Even if the <strong>lang</strong> attribute is set, it may not be taken into account as the <strong>xml:lang</strong> attribute has priority. Read the <a href="/en/Determining_the_language_of_element" title="en/Determining the language of element">algorithm determining the language</a> of an element's content to see how the language is determined in all cases.</li> <li>For the CSS pseudo-class {{ cssxref(":lang") }}, two invalid language names are different if their names are different.</li> </ul> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-contenteditable" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-contenteditable">HTML5, section 3.2.3.3</a>({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-lang" title="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-lang">HTML4.01, section 8.1</a>)</td> </tr> </tbody> </table> </dd> <dt><a name="attr-spellcheck">spellcheck</a> {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("1.8.1") }}</dt> <dd>This enumerated attribute defines if the element may be checked for spelling errors or not. It may have the following values: <ul> <li><span style="font-family: Courier New;">true</span>, which indicates that the element should be, if possible, checked for spelling errors;</li> <li><span style="font-family: Courier New;">false</span>, which indicates that the element should not be checked for spelling errors.</li> </ul> If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <span style="font-family: Courier New;">inherited</span>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <span style="font-family: Courier New;">true</span>.<br> <br> You can consult <a href="/en/Controlling_spell_checking_in_HTML_forms" title="en/Controlling spell checking in HTML forms">this article</a> to see a comprehensive example of the use of this attribute. <div class="note"> <p><strong>Usage notes: </strong></p> <ul> <li>This attribute is an <em>enumerated </em>one and not a <em>Boolean </em>one; it means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span> or <span style="font-family: Courier New;">false</span> is mandatory and that a shorthand like <code>&lt;label spellcheck&gt;Example Label&lt;/label&gt; </code>is not allowed, the correct way being <code>&lt;label spellcheck="true"&gt;Example Label&lt;/label&gt;</code>.</li> <li>This attribute is merely a hint for the browsers: not all browser are required to be able to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <strong>spellcheck</strong> attribute is set to true and the browser supports spellchecking.</li> <li>The default value of this attribute is browser and element-dependant:</li> </ul> <ul> <table class="fullwidth-table"> <tbody> <tr> <th>Browser</th> <th>{{ HTMLElement("html") }}</th> <th>{{ HTMLElement("textarea") }}</th> <th>{{ HTMLElement("input") }}</th> <th>others</th> <th>Comment</th> </tr> <tr> <td rowspan="3">Firefox</td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">inherited</span></td> <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td> </tr> <tr> <td><strong><span style="font-family: Courier New;">false</span></strong></td> <td><strong><span style="font-family: Courier New;">true</span></strong></td> <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span> (default value)</strong></td> </tr> <tr> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">true</span></td> <td><span style="font-family: Courier New;">true</span></td> <td><span style="font-family: Courier New;">inherited</span></td> <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2</span></td> </tr> <tr> <td rowspan="3">Seamonkey</td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">inherited</span></td> <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td> </tr> <tr> <td><strong><span style="font-family: Courier New;">false</span></strong></td> <td><strong><span style="font-family: Courier New;">true</span></strong></td> <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span> (default value)</strong></td> </tr> <tr> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">true</span></td> <td><span style="font-family: Courier New;">true</span></td> <td><span style="font-family: Courier New;">inherited</span></td> <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2</span></td> </tr> <tr> <td rowspan="3">Camino</td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">inherited</span></td> <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td> </tr> <tr> <td><span style="font-family: Courier New;">false</span></td> <td><span style="font-family: Courier New;">true</span></td> <td><span style="font-family: Courier New;">inherited</span></td> <td><span style="font-family: Courier New;">inherited</span></td> <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span><strong> <br> </strong></td> </tr> <tr> <td><strong><span style="font-family: Courier New;">false</span></strong></td> <td><strong><span style="font-family: Courier New;">true</span></strong></td> <td><strong><span style="font-family: Courier New;">true</span></strong></td> <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2 </span><strong>(default value)</strong></strong></td> </tr> </tbody> </table> </ul> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck">HTML5, section 8.8</a></td> </tr> </tbody> </table> </dd> <dt><a name="attr-style">style</a></dt> <dd>This attribute contains <a href="/en/CSS" title="en/CSS">CSS</a> styling declaration to be applied to the element. Note it is recommended for styles to be defined in a separate files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose to allows for quick styling, for testing purpose for example. <div class="note"> <p><strong>Usage note: </strong>This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remains semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the <a href="/#attr-hidden" title="#attr-hidden"><strong>hidden</strong></a> attribute.</p> </div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute">HTML5, section 3.2.3.7</a>({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2" title="http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2">HTML4.01, section 14.2.2</a>)</td> </tr> </tbody> </table> </dd> <dt><a name="attr-tabindex">tabindex</a></dt> <dd>This integer attribute indicates if the element should be focusable and if it should participate to sequential keyboard navigation and at what position. It can takes several values:<br> <ul> <li>a <em>negative value</em> which means that the element should be focusable but should not be reachable via sequential keyboard navigation;</li> <li><span style="font-family: Courier New;">0</span> which means that the element should be focusable and<span style="font-style: italic;"> </span>reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> <li>a <span style="font-style: italic;">positive</span><em> value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <strong>tabindex</strong> (in case of several elements sharing the same tabindex, their relative orders is following their relative position in the document).</li> </ul> <p>The element with a <span style="font-family: Courier New;">0</span>, an invalid or no <strong>tabindex</strong> value should be placed after elements with a positive <strong>tabindex</strong> in the sequential keyboard navigation order.</p> <p>You can consult <a href="/en/Focus_management_in_HTML" title="en/Focus management in HTML">this article</a> to see a comprehensive explanation of focus management.</p> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-tabindex" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-tabindex">HTML5, section 8.4.1</a>({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-tabindex" title="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-tabindex">HTML4.01, section 17.11.1</a>)</td> </tr> </tbody> </table> </dd> <dt><a name="attr-title">title</a></dt> <dd> <p>This attribute contains a text representing advisory information related to the element it belongs too. Such information can typically, but not necessarily, be presented to the user as a tooltip. Typically, such title on a link is likely to contain the title or a description of the linked document, on a media element like an image, its description or the associated credits, on a paragraph, a footnote or a commentary about it, on a quotation, some information about the author, and so on.</p> <p>If this attribute is omitted, it means that the title of the nearest ancestor of this element is still relevant for it (and can legitimately be used as the tooltip for that element. If this attribute is set to the <em>empty string</em>, it explicitly means that its nearest ancestor's title is not relevant for this element (and shouldn't be used in the tooltip for that element).</p> <p>Additional semantics is attached to the <strong>title</strong> attributes of the {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }} and {{ HTMLElement("input") }}.</p> <div class="note"> <p><strong>Usage note:</strong> The <strong>title</strong> attribute may contains several lines. Each U+000A LINE FEED (LF) inserted represents such a newline. Some caution must be taken though, as that means that:</p> <pre class="brush: html">&lt;p&gt;Newlines in title should be taken it account,like this &lt;abbr title="This is a
multiline title"&gt;example&lt;/abbr&gt;.&lt;/p&gt;  
</pre> defines a two-line title.</div> <table class="fullwidth-table"> <tbody> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute">HTML5, section 3.2.3.3</a> ({{ HTMLVersionInline("4") }}: <a class=" external" href="http://www.w3.org/TR/REC-html40/struct/global.html#adef-title" title="http://www.w3.org/TR/REC-html40/struct/global.html#adef-title">HTML4.01, section 7.4.3</a>)</td> </tr> </tbody> </table> </dd>
</dl>
Revert to this revision