path: root/files/it/web/html/global_attributes/index.html

---
title: Attributi globali
slug: Web/HTML/Global_attributes
translation_of: Web/HTML/Global_attributes
---
<p>HTML definisce alcuni attributi che sono comuni a tutti gli elementi HTML . Questi atttributi possono essere utilizzati su tutti gli elementi, anche se gli attributi possono non avere effetti su alcuni elemento.</p>
<div class="note">
 <p><strong>Nota d'uso:</strong> La specifica HTML5 afferma che gli attributi globali possono essere specificati su tutti gli elementi HTML, <em>anche quelli non specificati in HTML5</em>. Questo significa che tutti gli elementi non-standard devono comunque consentire l'uso di questi attributi, anche se con l'utilizzo di tali elementi,  il documento non è più HTML5-compliant. Per esempio, i browser HTML5-compliant nascondono i contenuti contrassegnati come <code>&lt;foo hidden&gt;...&lt;foo&gt;</code><code style="font-size: 14px;">,</code><span style="line-height: 1.572;">anche se </span><code>&lt;foo&gt;</code><span style="line-height: 1.572;"> non è un valido elemento HTML.</span></p>
</div>
<h2 id="accesskey"><code><a name="attr-accesskey">accesskey</a></code></h2>
<p class="note">Questo attributo fornisce un suggerimento per generare una scorciatoia da tastiera per l'elemento corrente. Questo attributo è costituito da un elenco separato da spazi di caratteri (un singolo punto Unicode). Il browser dovrebbe utilizzare il primo che esiste sul layout di tastiera del computer.<br>
 {{ HTMLVersionInline(4) }} Nelle precedenti versioni dell'HTML, solo un carattere poteva essere specificato. Inoltre non era un attributo globale e poteva essere applicato solo ai tag {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.</p>
<div class="note">
 <strong>Nota d'uso:</strong> L'operazione di attivare l'accesskey dipende dal browser e la piattaforma utilizzata.
 <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" style="text-align: center;">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" style="text-align: center;">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 apre una lista dei contenuti che sono accessibili tramite un'accesskey, quindi può scegliere un elemento con una chiave</td>
   </tr>
  </tbody>
 </table>
 Notare che Firefox può personalizzare il tasto richiesto con le preferenze dell'utente</div>
<table class="fullwidth-table">
 <tbody>
  <tr>
   <td>Normative document</td>
   <td>{{SpecName('HTML WHATWG', "editing.html#the-accesskey-attribute", "accesskey")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}})</td>
  </tr>
 </tbody>
</table>
<h2 id="class"><code><a name="attr-class">class</a></code></h2>
<p>Questo attributo è un elenco separato da spazi delle classi dell'elemento. Le classi permettono ai CSS e Javascript di selezionare e accedere a elementi specifici con i <a href="/En/CSS/Class_selectors" title="https://developer.mozilla.org/En/CSS/Class_selectors">selettori di classe</a> o funzioni come il metodo DOM {{domxref("document.getElementsByClassName")}}.</p>
<div class="note">
 <p><strong>Nota d'uso:</strong> Anche se le specificazoni non pongono requisiti sul nome delle classi, gli sviluppatori del web sono incoraggiati ad usare nomi che descrivono lo scopo semantico dell'elemento, anzichè la presentazione dell'elemento (ad esempio, attributo che descrive un attributo piuttosto che
  <i>
   corsivo,</i>
  anche se un elemento di questa classe può essere presentata dal corsivo). I nomi semantici rimangono logici, anche se la presentazione della pagina cambia.</p>
</div>
<table class="fullwidth-table">
 <tbody>
  <tr>
   <td>Normative document</td>
   <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}})</td>
  </tr>
 </tbody>
</table>
<h2 id="contenteditable"><code><a name="attr-contenteditable">contenteditable</a></code></h2>
<p>{{ 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:</p>
<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>{{specname("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td>
  </tr>
 </tbody>
</table>
<h2 id="contextmenu"><code><a name="attr-contextmenu">contextmenu</a></code></h2>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.0") }} This attribute is related to the new {{specname("HTML WHATWG", "interactive-elements.html", "contextmenu")}}.</p>
<p>A <em>context menu</em> is a menu that appears upon user interaction, such as a right-click. HTML5 now allows us to customize this menu. Here are some implementation examples, including nested menus.</p>
<div id="ContextMenu_Example">
 <p>The following HTML...</p>
 <pre class="brush:html; highlight:[2,3,4,5,10,11,12,13,15,16,17,18]">&lt;body contextmenu="share"&gt;
  &lt;menu type="context" id="share"&gt;
    &lt;menu label="share"&gt;
      &lt;menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"&gt;&lt;/menuitem&gt;
      &lt;menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"&gt;&lt;/menuitem&gt;
    &lt;/menu&gt;
  &lt;/menu&gt;
  &lt;ol&gt;
    &lt;li&gt;Anywhere in the example you can share the page on Twitter and Facebook using the Share menu from your context menu.&lt;/li&gt;
    &lt;li&gt;&lt;pre contextmenu="changeFont" id="fontSizing"&gt;On this specific list element, you can change the size of the text by using the "Increase/Decrease font" actions from your context menu&lt;/pre&gt;&lt;/li&gt;
    &lt;menu type="context" id="changeFont"&gt;
      &lt;menuitem label="Increase Font" onclick="incFont()"&gt;&lt;/menuitem&gt;
      &lt;menuitem label="Decrease Font" onclick="decFont()"&gt;&lt;/menuitem&gt;
    &lt;/menu&gt;
    &lt;li contextmenu="ChangeImage" id="changeImage"&gt;On the image below, you can fire the "Change Image" action in your Context Menu.&lt;/li&gt;&lt;br /&gt;
    &lt;img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /&gt;
    &lt;menu type="context" id="ChangeImage"&gt;
      &lt;menuitem label="Change Image" onclick="changeImage()"&gt;&lt;/menuitem&gt;
    &lt;/menu&gt;
  &lt;/ol&gt;
&lt;/body&gt;
</pre>
 <div style="display: none;">
  <pre class="brush:css">      ol {
        list-style-type:decimal;
      }
    </pre>
 </div>
 <p>...used with this JavaScript...</p>
 <pre class="brush:js">function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}
function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}
function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}</pre>
 <p>...will result in:</p>
 <div>
  {{EmbedLiveSample("ContextMenu_Example",550,200)}}</div>
</div>
<h2 id="data-*"><code><a name="attr-data-*">data-*</a></code></h2>
<p>{{ HTMLVersionInline(5) }}{{ Gecko_minversion_inline("6.0") }} This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> and its <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} 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:</p>
<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 <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>{{specname("HTML WHATWG", "elements.html#custom-data-attribute", "data")}}</td>
  </tr>
 </tbody>
</table>
<h2 id="dir"><code><a name="attr-dir">dir</a></code></h2>
<p>This enumerated attribute indicates the directionality of the element's text. It can have the following values:</p>
<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) }}</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>{{specname("HTML WHATWG", "elements.html#the-dir-attribute", "dir")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "struct/dirlang.html#h-8.2", "dir")}})</td>
  </tr>
 </tbody>
</table>
<h2 id="draggable"><code><a name="attr-draggable">draggable</a></code></h2>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9.1") }} 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:</p>
<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" 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>
<h2 id="dropzone" style="font-style: normal; font-weight: bold;"><code><a name="attr-draggable">dropzone</a></code></h2>
<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }} This enumerated attribute indicates what types of content can be dropped on an element, using the <a href="/En/DragDrop/Drag_and_Drop" style="color: rgb(51, 102, 153) !important; text-decoration: none; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:</p>
<ul>
 <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" 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>
<h2 id="hidden"><code><a name="attr-hidden">hidden</a></code></h2>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("2") }} 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.</p>
<div class="note">
 <p><strong>Usage notes: </strong></p>
 <ul>
  <li>This attribute must not be used to hide content that could 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>
  <li>Changing the <a href="/en-US/docs/Web/CSS/display">display</a> CSS value of an element with the <code>hidden</code> attribute overrides the behavior. For instance, an element styled <code>display: flex</code> will be displayed on screen regardless of the <code>hidden</code> attribute being present.</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" 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>
<h2 id="id"><code><a name="attr-id">id</a></code></h2>
<p>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).</p>
<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" 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>
<h2 id="itemid"><code><a name="attr-itemid">itemid</a></code></h2>
<h2 id="itemprop"><code><a name="attr-itemprop">itemprop</a></code></h2>
<h2 id="itemref"><code><a name="attr-itemref">itemref</a></code></h2>
<h2 id="itemscope"><code><a name="attr-itemscope">itemscope</a></code></h2>
<h2 id="itemtype"><code><a name="attr-itemtype">itemtype</a></code></h2>
<p>{{Spec2('HTML WHATWG')}} These attributes 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">WHATWG HTML Microdata feature</a>. {{ Bug(591467) }}</p>
<h2 id="lang"><code><a name="attr-lang">lang</a></code></h2>
<p>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>.</p>
<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" 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>
<h2 id="spellcheck"><code><a name="attr-spellcheck">spellcheck</a></code></h2>
<p>{{ 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:</p>
<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>
<p>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.</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 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" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck">HTML5, section 8.8</a></td>
  </tr>
 </tbody>
</table>
<h2 id="style"><code><a name="attr-style">style</a></code></h2>
<p>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.</p>
<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" 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>
<h2 id="tabindex"><code><a name="attr-tabindex">tabindex</a></code></h2>
<p>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:</p>
<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 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" 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>
<h2 id="title"><code><a name="attr-title">title</a></code></h2>
<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 into 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" 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>
<p> </p>