Global attributes

  • Revision slug: HTML/Global_attributes
  • Revision title: Global attributes
  • Revision id: 235600
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

HTML defines a few attributes that are common to all HTML elements. These attributes can be used on all elements, though the attributes may have no effect on some elements. 

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 provides a hint for generating a keyboard shortcut for the current element. This attribute consists of 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 {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.

Usage note: The operation to activate the accesskey depends on browser and its platform.
  Windows Linux Mac
Firefox Alt + Shift + a key
  • Firefox 14 or newer, Control + Alt + a key
  • Firefox 13 or older, Control + a key
Internet Explorer Alt + a key N/A
Google Chrome Alt + a key Control + Alt + a key
Safari Alt + a key N/A Control + Alt + a key
Opera Shift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by a key
Note that Firefox can customize the required modifier key by user's preferences.
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 describe the semantic purpose 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 remain logical even if the presentation of the page changes.

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 editing. 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 not 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. This 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 usage is <label contenteditable="true">Example Label</label>.

Normative document HTML5, section 8.7
contextmenu {{ HTMLVersionInline("5") }} {{ unimplemented_inline("617528") }}
This attribute is related to the new HTML5 Interactive Commands.
data-* {{ HTMLVersionInline("5") }}{{ Gecko_minversion_inline("6.0") }}
This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.
The * may be replaced by any name following the production rule of xml names with the following restrictions:
  • the name must not start with xml, whatever case is used for these letters;
  • the name must not contain any semicolon (U+003A);
  • the name must not contain capital A to Z letters.

Note that the HTMLElement.dataset attribute is a StringMap and the name of the custom data attribute data-test-value will be accessible via HTMLElement.dataset.testValue as any dash (U+002D) is replaced by the capitalization of the next letter (camelcase).

Normative document HTML5, section 3.2.3.8
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);
  • auto, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element. {{ HTMLVersionInline("5") }}{{ unimplemented_inline("548206") }}

Usage notes:

  • This attribute is mandatory for the {{ HTMLElement("bdo") }} element where it has a different semantic meaning.
  • This attribute is not inherited by the {{ HTMLElement("bdi") }} element. If not set, its value is auto.
  • This attribute can be overridden 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 its content 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 will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
  • The auto value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.
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 whether 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. This 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 usage is <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
dropzone {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}
This enumerated attribute indicates what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values:
  • copy, which indicates that dropping will create a copy of the element that was dragged
  • move, which indicates that the element that was dragged will be moved to this new location.
  • link, will create a link to the dragged data.
Normative document HTML5, section 8.6.8
hidden {{ HTMLVersionInline("5") }} {{ Gecko_minversion_inline("2") }}
This Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login 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 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 that are descendants of a hidden element are still active, which 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 identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

Usage note:

  • This attribute's value is an opaque string: this 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's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID.  In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element. 
  • Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.
Normative document HTML5, section 3.2.3.1 ({{ HTMLVersionInline("4") }}: HTML4.01, section 7.5.2)
itemid {{ HTMLVersionInline("5") }}
itemprop {{ HTMLVersionInline("5") }}
itemref {{ HTMLVersionInline("5") }}
itemscope {{ HTMLVersionInline("5") }}
itemtype {{ HTMLVersionInline("5") }}
These attribute are related to the HTML5 Microdata feature. {{ unimplemented_inline("591467") }}
lang
This attribute participates in defining the language of the element, the language that non-editable elements are written in or the 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 whether the element may be checked for spelling errors. 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. This 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 usage is <label spellcheck="true">Example Label</label>.
  • This attribute is merely a hint for the browser: browsers are not 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 declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose of allowing for quick styling, for example for testing purposes.

Usage note: This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain 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 can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:
  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
  • 0 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. If several elements share the same tabindex, their relative order follows their relative position in the document).

An element with a 0 value, an invalid value, 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. Here are some typical uses of this attribute:

  • Link: the title or a description of the linked document
  • Media element like an image: a description or associated credits
  • Paragraph: a footnote or a commentary about it
  • 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 are 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.

Support for multi-line titles was added to Gecko in Gecko 12.0 {{ geckoRelease("12.0") }}.

Normative document HTML5, section 3.2.3.3 ({{ HTMLVersionInline("4") }}: HTML4.01, section 7.4.3

{{ languages( { "en": "en/HTML/Global_attributes", "fr": "fr/HTML/Global_attributes", "ja": "ja/HTML/Global_attributes" } ) }}

Revision Source

<p>HTML defines a few attributes that are common to all HTML elements. These attributes can be used on all elements, though the attributes may have no effect on some elements. </p>
<div class="note" style="margin-right: 258px;"> <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> <p class="note">This attribute provides a hint for generating a keyboard shortcut for the current element. This attribute consists of 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 {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.</p> <div class="note"><strong>Usage note:</strong> The operation to activate the accesskey depends on browser and its platform. <table class="standard-table"> <tbody> <tr> <th> </th> <th>Windows</th> <th>Linux</th> <th>Mac</th> </tr> <tr> <th>Firefox</th> <td colspan="2" rowspan="1">Alt + Shift + a key</td> <td> <ul> <li>Firefox 14 or newer, Control + Alt + a key</li> <li>Firefox 13 or older, Control + a key</li> </ul> </td> </tr> <tr> <th>Internet Explorer</th> <td>Alt + a key</td> <td colspan="2" rowspan="1">N/A</td> </tr> <tr> <th>Google Chrome</th> <td colspan="2" rowspan="1">Alt + a key</td> <td>Control + Alt + a key</td> </tr> <tr> <th>Safari</th> <td>Alt + a key</td> <td>N/A</td> <td>Control + Alt + a key</td> </tr> <tr> <th>Opera</th> <td colspan="3" rowspan="1">Shift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by a key</td> </tr> </tbody> </table> Note that Firefox can customize the required modifier key by user's preferences.</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 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 describe the semantic purpose 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 remain logical even if the presentation of the page changes.</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 editing. 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 not 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. This 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 usage is <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("617528") }}</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-data-*">data-*</a> {{ HTMLVersionInline("5") }}{{ Gecko_minversion_inline("6.0") }}</dt> <dd>This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the <a href="/en/HTML" title="en/HTML">HTML</a> and its <a href="/en/DOM" title="en/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the <a href="/en/DOM/HTMLElement" title="https://developer.mozilla.org/en/DOM/HTMLElement"><code>HTMLElement</code></a> interface of the element the attribute is set on. The <a href="/en/DOM/element.dataset" title="https://developer.mozilla.org/en/DOM/element.dataset"><code>HTMLElement.dataset</code></a> property gives access to them.<br> The <code>*</code> may be replaced by any name following <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> with the following restrictions: <ul> <li>the name must not start with <code>xml</code>, whatever case is used for these letters;</li> <li>the name must not contain any semicolon (<code>U+003A</code>);</li> <li>the name must not contain capital <code>A</code> to <code>Z</code> letters.</li> </ul> <p>Note that the <code>HTMLElement.dataset</code> attribute is a <code>StringMap</code> and the name of the custom data attribute <span id="1305983291990S" style="display: none;"> </span><em>data-test-value<span id="1305983291817E" style="display: none;"> </span></em> will be accessible via <code>HTMLElement.dataset.</code><em><code>testValue</code> </em>as any dash (<code>U+002D</code>) is replaced by the capitalization of the next letter (camelcase).</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/elements.html#custom-data-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#custom-data-attribute">HTML5, section 3.2.3.8</a></td> </tr> </tbody> </table> </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> <li><span style="font-family: Courier New;">auto</span>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element. {{ HTMLVersionInline("5") }}{{ unimplemented_inline("548206") }}</li> </ul> <div class="note"> <p><strong>Usage notes: </strong></p> <ul> <li>This attribute is mandatory for the {{ HTMLElement("bdo") }} element where it has a different semantic meaning.</li> <li>This attribute is <em>not</em> inherited by the {{ HTMLElement("bdi") }} element. If not set, its value is <span style="font-family: Courier New;">auto</span>.</li> <li>This attribute can be overridden 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 its content 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 will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.</li> <li>The <code>auto</code> value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.</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#the-dir-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-dir-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 whether 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. This 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 usage is <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 style="font-style: normal; font-weight: bold; "><a name="attr-draggable">dropzone</a> {{ HTMLVersionInline("5") }} {{ unimplemented_inline() }}</dt> <dt style="font-style: normal; font-weight: bold; "> </dt><dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(153, 153, 153); margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px; ">This enumerated attribute indicates what types of content can be dropped on an element, using the <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default; " title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc; list-style-position: initial; list-style-image: initial; "> <li><span style="font-family: Courier New;">copy</span>, which indicates that dropping will create a copy of the element that was dragged</li> <li><span style="font-family: Courier New;">move</span>, which indicates that the element that was dragged will be moved to this new location.</li> <li><span style="font-family: Courier New;">link</span>, will create a link to the dragged data.</li> </ul> <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-dropzone-attribute" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute">HTML5, section 8.6.8</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 is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login 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 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 that are descendants of a hidden element are still active, which 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 identify 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's value is an opaque string: this 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's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID.  In contrast to the <strong>class</strong> attribute, which allows space-separated values, elements can only have one single ID defined through the <strong>id</strong> attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element. </li> <li>Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.</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") }}</dt> <dt><a name="attr-itemprop">itemprop</a> {{ HTMLVersionInline("5") }}</dt> <dt><a name="attr-itemref">itemref</a> {{ HTMLVersionInline("5") }}</dt> <dt><a name="attr-itemscope">itemscope</a> {{ HTMLVersionInline("5") }}</dt> <dt><a name="attr-itemtype">itemtype</a> {{ HTMLVersionInline("5") }}</dt> <dd>These attribute are 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>. {{ unimplemented_inline("591467") }}</dd> <dt><a name="attr-lang">lang</a></dt> <dd>This attribute participates in defining the language of the element, the language that non-editable elements are written in or the 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/elements.html#the-lang-and-xml:lang-attributes" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">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 whether the element may be checked for spelling errors. 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/HTML/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. This 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 usage is <code>&lt;label spellcheck="true"&gt;Example Label&lt;/label&gt;</code>.</li> <li>This attribute is merely a hint for the browser: browsers are not 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> <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></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> </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 declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose of allowing for quick styling, for example for testing purposes. <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 remain 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 can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: <ul> <li>a <em>negative value</em> 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> 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>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> </ul> <p>An element with a <span style="font-family: Courier New;">0</span> value, an invalid value, 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. Here are some typical uses of this attribute:</p> <ul> <li>Link: the title or a description of the linked document</li> <li>Media element like an image: a description or associated credits</li> <li>Paragraph: a footnote or a commentary about it</li> <li>Quotation: some information about the author, and so on.</li> </ul> <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 are 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> <p>defines a two-line title.</p> <p>Support for multi-line titles was added to Gecko in Gecko 12.0 {{ geckoRelease("12.0") }}.</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-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>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"><span style=" font-family:'Ubuntu'; font-size:9pt; color:#000000;">{{ languages( { "en": "en/HTML/Global_attributes", "fr": "fr/HTML/Global_attributes", "ja": "ja/HTML/Global_attributes" } ) }}</span></p>
Revert to this revision