Les attributs globaux

  • Raccourci de la révision : Web/HTML/Global_attributes
  • Titre de la révision : Les attributs globaux
  • ID de la révision : 423011
  • Créé :
  • Créateur : mistyrouge
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

HTML défini quelques attributs communs à toutes les éléments HTML. Ces attributs peuvent être utilisés sur tous les éléments. Ceci dit, les attributs peuvent ne pas avoir d'effets sur certains éléments.

Note : La spécification HTML5 indique que les attributs globaux peuvent être utilisés sur tous les éléments, même ceux non défini par HTML5. Cela veut dire que leur utilisation avec des éléments non-standards, incorrectes, ou définis ailleurs, est autorisé, bien que l'utilisation de ces éléments fait que la page n'est plus de l'HTML5 valide.

accesskey

Cet attribut spécifie un accélérateur de navigation au clavier pour l'élément. Il s'agit d'une liste de caractères (un seul caractère Unicode) séparés par des espaces. Le navigateur doit utilise le premier existant sur le clavier. 

{{ HTMLVersionInline(4) }} Dans les versions précédentes de HTML, seulement un caractère pouvait être spécifié. De plus ce n'était pas un attribut global et ne pouvait être appliqué que à {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} et {{ HTMLElement("textarea") }}.

Note d'utilisation: La manipulation pour activer les accesskey dépend des navigateurs et de la platforme

  Windows Linux Mac
Firefox Alt + Shift + accesskey
  • Firefox 14 ou plus récent, Control + Alt + accesskey
  • Firefox 13 or older, Control + accesskey
Internet Explorer Alt + accesskey N/A
Google Chrome Alt + accesskey Control + Alt + accesskey
Safari Alt + accesskey N/A Control + Alt + accesskey
Opera

Shift + Esc ouvre une liste contenant les accesskey possibles, puis vous pouvez choisir un élément par sa clé.

Notez que Firefox permet de personnaliser la combinaison de touches dans les préférences utilisateurs.

Document normatif {{SpecName('HTML WHATWG', "elements.html#classes", "class")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "global.html#h-7.5.2", "class")}})

class

Cet attribut est une liste de classe d'un élément, séparé par des espaces. Les classes permettent à CSS et Javascript de sélectionner et accéder à un élément particulier via le sélecteur de classe ou des fonctions comme la méthode du DOM {{domxref("document.getElementByClassName")}}

Note d'utilisation: Bien que la spécification ne donne pas de contraintes sur les noms de classes, les développeurs web sont encouragés à utiliser des noms décrivant sémantiquement le but de l'élément, plutôt qu'une présentation de l'élément (ex. attribut pour décrire un attribut plutôt que italique, même si l'élément de cette classe sera présenté en italique). Un nom sémantique reste logique même dans le cas où la présentation de la page change.

Document normatif {{SpecName('HTML WHATWG', "elements.html#classes", "class")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "global.html#h-7.5.2", "class")}})

contenteditable

{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9") }}

Cet attribut indique que l'élément doit être éditable par l'utilisateur. Dans ce cas, le navigateur modifie l'élément visuel associé pour permettre son édition. L'attribut doit avoir l'une des valeurs suivante:

true ou aucune valeur, indique que l'élément doit être éditable.

false, indique de l'élément ne doit pas être éditable.

Si un attribut n'est pas initialisé, sa valeur par défaut est hérité depuis l'élément parent.

Note d'utilisation: Cet attribut est un attribut énuméré et non un booléen. Cela signifie que l'utilisation explicite d'une valeur true, false ou la chaine vide sont obligatoires et que un raccourci comme <label contenteditable>Exemple de label</label> n'est pas permis. L'utilisation correcte est <label contenteditable="true">Exemple de label</label>

Document normatif {{specname("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}

contextmenu

{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.0") }}

Cet attribut est lié aux nouvelles commandes html5 {{specname("HTML WHATWG", "interactive-elements.html", "contextmenu")}}. Un menu contextuel est un menu qui apparait lors d'un action d'un utilisateur, comme un clic droit. HTML5 autorise maintenant la personalisation de ce menu. Voici quelques exemples d'implémentations, y compris des menus imbriqués.

Le code HTML suivant…

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="partager">
      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Youpi!, Je suis en train d'apprendre ContextMenu sur le MDN de Mozilla');"></menuitem>
      <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');"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>Partout dans cet exemple, vous pouvez partager cette page sur Twitter et Facebook en utilisant Partager dans le menu contextuel.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">Sur cet liste particulière d'éléments, vous pouvez changer la taille du texte en utilisant l'action "Agrandir/Diminuer la police" du menu contextuel</pre></li>
        <menu type="context" id="changeFont">
          <menuitem label="Agrandir la police" onclick="incFont()"></menuitem>
          <menuitem label="Diminuer la police" onclick="decFont()"></menuitem>
        </menu>
        <li contextmenu="ChangeImage" id="changeImage">Sur l'image suivante, vous pouvez déclencher l'action "Changer l'image" depuis le menu contextuel.</li><br />
        <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
        <menu type="context" id="ChangeImage">
          <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
        </menu>
      </ol>
    </body>

… utilisé en javascript…

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";
}

…deviendra :

{{EmbedLiveSample("exemple_context_menu",550,200)}}

data-*

{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.0") }}

Cet catégorie d'attributs, appelés data attributes personnalisés, permet déchangé des informations particulières entre le HTML et sa représentation DOM qui peut être utilisé par des scripts. Toutes ces données sont accessibles via l'interface {{domxref("HTMLElement")}} du l'élément ou est mis l'attribut. La propriete {{domxref("HTMLElement.dataset")}} y donne acces.

dir

 

 

draggable

{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9.1") }}

Cet attribut indique si l'élément peut être glissé via l' API de glissé déposé. Il peut avoir une des valeurs suivantes:

Notes:

  • Par défaut, seul le texte selectionné, les images et les liens peuvent être glissé.Pour tout les autres éléments, Un événement ondragstart doit avoir été défini pour que le mécanisme de glissé/déposé puisse fonctionner, comme montré dans cet exemple (anglais) comprehensive example.
Document normatif HTML5, section 3.9.5

hidden

{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("2") }}

Cet attribut booléen indique que l'élément n'est pas encore, ou n'est plus, pertinente. Par exemple, il peut être utilisé pour masquer des éléments de la page qui ne peuvent être utilisé jusqu'à ce que le processus de connexion soit terminée. Le navigateur ne rendra pas ces éléments.

Note d'utilisation:

  • Cet attribut ne doit pas être utilisé pour masquer le contenu qui pourrait être légitimement être montré. Par exemple, il ne devrait pas être utilisé pour masquer les panneaux onglets d'une interface à onglets, car il s'agit d'une décision de style et un autre style conduirait à une page tout à fait correct.
  • Les éléments Hidden ne doivent pas être liées à des éléments non-cachés.
  • Les éléments qui sont des descendants d'un élément caché sont toujours actifs, ce qui signifie que les éléments de script peuvent encore exécuter et la forme des éléments serot encore visible.
Document normatif HTML5, section 8.1

id

Cet attribut définit un identifiant unique (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément lors du link (en utilisant un identifiant de fragment), scripting, ou de style style (avec CSS).

Note sur l'utilisation:

  • Cet attribut de valeur est une chaîne opaque: cela signifie que l'auteur Web ne doit pas l'utiliser pour transmettre toute information. Signification particulière pour l'exemple de sens sémantique: l'attribut ne doit pas être dérivée de la chaîne.
  • Cet attribut de valeur ne doit pas contenir d'espaces blancs. Les navigateurs traitent les ID non conformes qui contient des espaces blancs comme si l'espace blanc fesait partie de l'ID. Contrairement à l'attribut de classe, qui autorise les valeurs séparées par des espaces, des éléments ne peut avoir qu'un seul ID définis par l'attribut id.Notez qu'un élément peut avoir plusieurs IDs, mais les autres devraient être fixés par un autre moyen, comme par exemple via un scriptd'interface avec l'interface DOM de l'élément.
  • L'utilisation d'autre caractères que les lettres et chiffres ASCII, "_", "-" et "." peut causer des problèmes de compatibilité, car ils n'ont pas été autorisés dans le HTML 4. Bien que cette restriction a été levée dans HTML 5, un ID doit commencer par une lettre pour être compatible.
Document normatif HTML5, section 3.2.3.1 ({{ HTMLVersionInline(4) }}: HTML4.01, section 7.5.2)

itemid

{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}

Cet attribut est lié à HTML5 Microdata feature.

itemprop

{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}

Cet attribut est lié à HTML5 Microdata feature.

itemref

{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}

Cet attribut est lié à HTML5 Microdata feature.

itemscope

{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}

Cet attribut est lié à HTML5 Microdata feature.

itemtype

{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}

Cet attribut est lié à HTML5 Microdata feature.

Lang

Cet attribut participe à la définition de la langue de l'élément, la langue dans laquelle les éléments non modifiables sont écrits ou dans laquelle les éléments modifiables doivent être rédigés. Le tag contient une valeur d'entrée unique dans le format définit dans le document

(en anglais). Si le contenu de la balise est la chaîne vide (empty string) la langue est définie inconnue (unknown), si le contenu de la balise n'est pas valide, en ce qui concerne à BCP47, il définit non valide (invalid).

Spellcheck

{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.8.1") }}

      Cet énumérateur d'attributs définit si l'élément peut être vérifié pour les fautes d'orthographe. Il peut avoir les valeurs suivantes:

Si cet attribut n'est pas défini, sa valeur par défaut est l'élement-type défini par le navigateur. Cette valeur par défaut peut également être héréditaire (inherited), ce qui signifie que le contenu de l'élément sera vérifié pour les fautes d'orthographe que si son ancien spellcheck le plus proche est un spellcheck "true".

Vous pouvez consulter cet article pour voir un exemple complet de l'utilisation de cet attribut.

 

Note d'utilisation:

  • Cet attribut est une une énumération et non pas un booléen. Cela signifie que l'usage explicite de l'une des valeurs true ou false est obligatoire et que le raccourci <label spellcheck> Exemple d'étiquette </label> n'est pas autorisé. L'utilisation correcte est <label spellcheck="true"> Exemple d'étiquette </label>.
  • Cet attribut est simplement une indication pour le navigateur: les navigateurs ne sont pas tenus d'être en mesure de vérifier les fautes d'orthographe. Typiquement les éléments non modifiables ne sont pas vérifiés pour les fautes d'orthographe, même si l'attribut spellcheck à la valeur true et le navigateur prend en charge la correction orthographique.
  • La valeur par défaut de cet attribut est le navigateur et l'element-dependant:
Browser {{ HTMLElement("html") }} {{ HTMLElement("textarea") }} {{ HTMLElement("input") }} others Comment
Firefox false false false inherited Quand layout.spellcheckDefault = 0
false true inherited inherited Quand layout.spellcheckDefault = 1 (default value)
false true true inherited Quand layout.spellcheckDefault = 2
Seamonkey false false false inherited Quand layout.spellcheckDefault = 0
false true inherited inherited Quand layout.spellcheckDefault = 1 (default value)
false true true inherited Quand layout.spellcheckDefault = 2
Camino false false false inherited Quand layout.spellcheckDefault = 0
false true inherited inherited Quand layout.spellcheckDefault = 1
false true true inherited Quand layout.spellcheckDefault = 2 (default value)
Document normatif HTML5, section 8.8

Style

Cet attribut contient des déclarations de style CSS à appliquer à l'élément. Notez qu'il est recommandé pour les styles d'être définis dans un fichier séparés ou fichiers distincts. Cet attribut et l'élément {{ HTMLElement ("style") }} ont principalement pour but de permettre un style rapide, par exemple pour des fins de test.

 

Note d'utilisation: Cet attribut ne doit pas être utilisé pour transmettre de l'information sémantique. Même si tous les styles sont enlevé, une page doit rester sémantiquement correcte. En général, il ne devrait pas être utilisé pour masquer les informations non pertinentes, ce qui devrait être fait en utilisant l'attribut hidden.

Document normatif HTML5, section 3.2.3.7({{ HTMLVersionInline(4) }}: HTML4.01, section 14.2.2)

Tabindex

Cet attribut intégré indique si l'élément peut prendre le focus d'entrée (est focalisable), si il doit participer à la navigation séquentielle du clavier , et si oui, à quelle position. Il peut prendre plusieurs valeurs:

Un élément avec une valeur 0, une valeur non valide, ou pas de valeur tabindex doit être placé après les éléments avec un tabindex positif dans l'ordre séquentiel de navigation du clavier.

Vous pouvez consulter cet article pour voir une explication complète de la gestion du focus.

Document normatif HTML5, section 8.4.1({{ HTMLVersionInline(4) }}: HTML4.01, section 17.11.1)

Title

Cet attribut contient un texte qui représentent aussi les informations et les conseils liés à l'élément auquel il appartient . Ces informations peuvent généralement, mais pas nécessairement, être présenté à l'utilisateur comme une info-bulles. Voici quelques utilisations typiques de cet attribut:

Des sémantiques supplémentaires sont attachés aux atributs de titres : {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }} et {{ HTMLElement("input") }}.

Document normatif HTML5, section 3.2.3.3 ({{ HTMLVersionInline(4) }}: HTML4.01, section 7.4.3)

Cet attribut permet de définir un raccourci clavier pour l'élément.   Le contenu de l'attribut consiste en une liste de touche séparés par un espace (d'un point de vue unicode). Le navigateur utilisera le premier raccourci valide dispoble.
{{ HTMLVersionInline(4) }} Dans les version précédante de HTML, seulement un seul raccourci était accepté. Auparavant, il n'était pas global et ne s'appliquait qu'au éléments suivent  {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} et {{ HTMLElement("textarea") }}. Il est bel et bien global maintenant et s'applique a tous les éléments.
 
Document normatif HTML5, section 8.5 ({{ HTMLVersionInline(4) }}: HTML4.01, section 17.11.2)
  Cet attribut est la liste des classes CSS utilisée par un élément, séparé par un espace. Les classes permettent a CSS et à javascript d'accéder et/ou de modifier un élément vie le selecteur de classe  selecteur de classe ou des fonctions tel que les méthodes DOM document.getElementsByClassName().

Note: Alors que les spécifications de précisent pas quel type de nom de classe utiliser, il est conseillé d'utiliser des noms de classes ayant un sens sémantique plutôt que des nom ayant un sens esthétique. (e.g., utilisé un nom de classe comme texte_important plutôt que texte_gras ). Un nom sémantique conserve sa logique même la présentation del a page change.

Document normatif HTML5, section 3.2.3.7 ({{ HTMLVersionInline(4) }}: HTML4.01, section 7.5.2)
Cet attribut demande au navigateur de rendre l'élément editablepar l'utilisateur,il peut prendre une de ces 3 valeurs:
  • "true" ou une châine videindique que l'élément est modifiable;
  • "false"indiquant que l'élément n'est pas modifiable.
  • "inherited" indique que l'élément herite de l'attribut contenteditablede ses parent (comportement par défaut).
Document normatif HTML5, section 8.7
{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}
Cet attribut est en rapport avec commandes interactives HTML5 (anglais).
Cet attribut indique le sens du texte. Dans certain pays le texte va de droite à gauche au lieu de gauche a droite. Il peut avoir deux valeurs:
  • "ltr", qui veux dire left to right et indique un texte allant de gauche a droite (comme le français);
  • "rtl", qui veux dire right to left et indique un texte allant de droite a gauche (comme l'arabe).

Notes:

  • Cet attribut peut etre écrasé par les propriété CSS  {{ cssxref("direction") }} et {{ cssxref("unicode-bidi") }},si une page CSS est active et si l'élément supporte ces propriété.
  • Puisque l'orientation du texte est rattachée au contenu, il est recommendé au developeur web d'utilisé cet attribut plutôt que leur equivalent CSS, si cela est possible. De cette façon le texte sera correctement présenté si le navigateur ne supporte pas le CSS (ou qu'il est désactivé).
  • Cet attribut est indispensable pour l'élément HTML {{ HTMLElement("bdo") }}.
Document normatif HTML5, section 3.2.3.5 ({{ HTMLVersionInline(4) }}: HTML4.01, section 8.2)
  • "true", indique que l'élément peut être glissé.
  • "false", indique que l'élément de peut pas être glissé.
  • "auto", indique que l'éklément se comporte selon les regle du navigateur (défaut).

Note d'utilisation:

  • Même si l'attribut lang est défini, il peut ne pas être pris en compte, comme l'attribut xml: lang est prioritaire. Lisez l'algorithme de détermination de la langue du contenu d'un élément pour voir comment la langue est déterminée dans tous les cas.
  • For the CSS pseudo-class {{ cssxref(":lang") }}, two invalid language names are different if their names are different.
Document normatif HTML5, section 3.2.3.3({{ HTMLVersionInline(4) }}: HTML4.01, section 8.1)
  • True, ce qui indique que l'élément doit être, si possible, vérifier les fautes d'orthographe;
  • false, ce qui indique que l'élément ne doit pas être vérifiée pour les fautes d'orthographe..
  • - Une valeur négative signifie que l'élément doit être focalisable, mais ne devrait pas être accessible via la navigation séquentielle du clavier ;
  • - 0 signifie que l'élément doit être focusable et accessible via la navigation séquentielle du clavier , mais son ordre relatif est défini par la convention de la plate-forme;
  • - Une valeur positive qui signifirait que l'attribut devrait être focusable et accessible via la navigation séquentielle du clavier ; son ordonnance relative est définie par la valeur de l'attribut: le suivi séquentiel du nombre croissant des tabindex. Si plusieurs éléments partagent la même tabindex, leur ordre relatif suit leur position relative dans le document).
  •            Lien: le titre ou une description du document lié
  •            Eléments médias comme une image: une description ou des crédits associés
  •            Le paragraphe: une note ou un commentaire à ce sujet
  •            Citation: quelques informations sur l'auteur, et ainsi de suite.

    Si cet attribut est omis, cela signifie que lancien titre le plus proche de cet élément est toujours d'actualité pour lui (et peut légitimement être utilisé comme l'info-bulle pour cet élément). Si cet attribut est défini pour une chaine vide (empty string), cela signifie explicitement que l'ancien titre le plus proche n'est pas pertinent pour cet élément (et ne doit pas être utilisé dans l'encadré d'aide de cet élément).

 

 

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

Source de la révision

<p>HTML défini quelques attributs communs à toutes les éléments HTML. Ces attributs peuvent être utilisés sur tous les éléments. Ceci dit, les attributs peuvent ne pas avoir d'effets sur certains éléments.</p>
<div class="note">
  <strong>Note</strong> : La spécification HTML5 indique que les attributs globaux peuvent être utilisés sur <em>tous</em> les éléments, <em>même ceux non défini par HTML5</em>. Cela veut dire que leur utilisation avec des éléments non-standards, incorrectes, ou définis ailleurs, est autorisé, bien que l'utilisation de ces éléments fait que la page n'est plus de l'HTML5 valide.</div>
<h2 id="accesskey"><a name="attr-accesskey">accesskey</a></h2>
<p>Cet attribut spécifie un accélérateur de navigation au clavier pour l'élément. Il s'agit d'une liste de caractères (un seul caractère Unicode) séparés par des espaces. Le navigateur doit utilise le premier existant sur le clavier.&nbsp;</p>
<p>{{ HTMLVersionInline(4) }} Dans les versions précédentes de HTML, seulement un caractère pouvait être spécifié. De plus ce n'était pas un attribut global et ne pouvait être appliqué que à {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} et {{ HTMLElement("textarea") }}.</p>
<div class="note">
  <p><strong>Note d'utilisation:</strong> La manipulation pour activer les <code>accesskey</code> dépend des navigateurs et de la platforme</p>
  <table class="standard-table">
    <tbody>
      <tr>
        <th>&nbsp;</th>
        <th>Windows</th>
        <th>Linux</th>
        <th>Mac</th>
      </tr>
      <tr>
        <th>Firefox</th>
        <td colspan="2" rowspan="1"><code>Alt</code> + <code>Shift</code> + <code>accesskey</code></td>
        <td>
          <ul>
            <li>Firefox 14 ou plus récent, <code>Control</code> + <code>Alt</code> + <code>accesskey</code></li>
            <li>Firefox 13 or older, <code>Control</code> + <code>accesskey</code></li>
          </ul>
        </td>
      </tr>
      <tr>
        <th>Internet Explorer</th>
        <td><code>Alt</code> + <code>accesskey</code></td>
        <td colspan="2" rowspan="1">N/A</td>
      </tr>
      <tr>
        <th>Google Chrome</th>
        <td colspan="2" rowspan="1"><code>Alt</code> + <code>accesskey</code></td>
        <td><code>Control</code> + <code>Alt</code> + <code>accesskey</code></td>
      </tr>
      <tr>
        <th>Safari</th>
        <td><code>Alt</code> + <code>accesskey</code></td>
        <td>N/A</td>
        <td><code>Control</code> + <code>Alt</code> + <code>accesskey</code></td>
      </tr>
      <tr>
        <th>Opera</th>
        <td colspan="3" rowspan="1">
          <p><code>Shift</code> + <code>Esc</code> ouvre une liste contenant les <code>accesskey</code> possibles, puis vous pouvez choisir un élément par sa clé.</p>
        </td>
      </tr>
    </tbody>
  </table>
  <p>Notez que Firefox permet de personnaliser la combinaison de touches dans les préférences utilisateurs.</p>
</div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td>Document normatif</td>
      <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "global.html#h-7.5.2", "class")}})</td>
    </tr>
  </tbody>
</table>
<h2 id="class"><a name="attr-class">class</a></h2>
<p>Cet attribut est une liste de classe d'un élément, séparé par des espaces. Les classes permettent à CSS et Javascript de sélectionner et accéder à un élément particulier via le <a href="/fr/docs/CSS/Sélecteurs_de_classe" title="/fr/docs/CSS/Sélecteurs_de_classe">sélecteur de classe</a> ou des fonctions comme la méthode du DOM {{domxref("document.getElementByClassName")}}</p>
<div class="note">
  <p><strong>Note d'utilisation: </strong>Bien que la spécification ne donne pas de contraintes sur les noms de classes, les développeurs web sont encouragés à utiliser des noms décrivant sémantiquement le but de l'élément, plutôt qu'une présentation de l'élément (ex. <code>attribut</code> pour décrire un attribut plutôt que <code>italique</code>, même si l'élément de cette classe sera présenté en italique). Un nom sémantique reste logique même dans le cas où la présentation de la page change.</p>
</div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td>Document normatif</td>
      <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "global.html#h-7.5.2", "class")}})</td>
    </tr>
  </tbody>
</table>
<h2 id="contenteditable"><a name="attr-contenteditable">contenteditable</a></h2>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9") }}</p>
<p>Cet attribut indique que l'élément doit être éditable par l'utilisateur. Dans ce cas, le navigateur modifie l'élément visuel associé pour permettre son édition. L'attribut doit avoir l'une des valeurs suivante:</p>
<p><code>true</code> ou aucune valeur, indique que l'élément doit être éditable.</p>
<p><code>false</code>, indique de l'élément ne doit pas être éditable.</p>
<p>Si un attribut n'est pas initialisé, sa valeur par défaut est hérité depuis l'élément parent.</p>
<div class="note">
  <p><strong>Note d'utilisation:</strong> Cet attribut est un attribut <code>énuméré</code> et non un <code>booléen</code>. Cela signifie que l'utilisation explicite d'une valeur <code>true</code>, <code>false</code> ou la chaine vide sont obligatoires et que un raccourci comme &lt;label contenteditable&gt;Exemple de label&lt;/label&gt; n'est pas permis. L'utilisation correcte est &lt;label contenteditable="true"&gt;Exemple de label&lt;/label&gt;</p>
</div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td>Document normatif</td>
      <td>{{specname("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td>
    </tr>
  </tbody>
</table>
<h2 id="contextmenu"><a name="attr-contextmenu">contextmenu</a></h2>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.0") }}</p>
<p>Cet attribut est lié aux nouvelles commandes html5 {{specname("HTML WHATWG", "interactive-elements.html", "contextmenu")}}. Un menu contextuel est un menu qui apparait lors d'un action d'un utilisateur, comme un clic droit. HTML5 autorise maintenant la personalisation de ce menu. Voici quelques exemples d'implémentations, y compris des menus imbriqués.</p>
<p>Le code HTML suivant…</p>
<div id="exemple_context_menu">
  <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="partager"&gt;
      &lt;menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Youpi!, Je suis en train d'apprendre ContextMenu sur le MDN de 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;Partout dans cet exemple, vous pouvez partager cette page sur Twitter et Facebook en utilisant Partager dans le menu contextuel.&lt;/li&gt;
    &lt;li&gt;&lt;pre contextmenu="changeFont" id="fontSizing"&gt;Sur cet liste particulière d'éléments, vous pouvez changer la taille du texte en utilisant l'action "Agrandir/Diminuer la police" du menu contextuel&lt;/pre&gt;&lt;/li&gt;
        &lt;menu type="context" id="changeFont"&gt;
          &lt;menuitem label="Agrandir la police" onclick="incFont()"&gt;&lt;/menuitem&gt;
          &lt;menuitem label="Diminuer la police" onclick="decFont()"&gt;&lt;/menuitem&gt;
        &lt;/menu&gt;
        &lt;li contextmenu="ChangeImage" id="changeImage"&gt;Sur l'image suivante, vous pouvez déclencher l'action "Changer l'image" depuis le menu contextuel.&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="Changer l'image" onclick="changeImage()"&gt;&lt;/menuitem&gt;
        &lt;/menu&gt;
      &lt;/ol&gt;
    &lt;/body&gt;
</pre>
  <p>… utilisé en 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>
</div>
<p>…deviendra :</p>
<p>{{EmbedLiveSample("exemple_context_menu",550,200)}}</p>
<h2 id="data-*"><a name="attr-data-*">data-*</a></h2>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.0") }}</p>
<p>Cet catégorie d'attributs, appelés data attributes personnalisés, permet déchangé des informations particulières entre le <a href="/fr/docs/Web/HTML" title="/fr/docs/Web/HTML">HTML</a> et sa représentation <a href="/fr/docs/DOM" title="/fr/docs/DOM">DOM</a> qui peut être utilisé par des scripts. Toutes ces données sont accessibles via l'interface {{domxref("HTMLElement")}} du l'élément ou est mis l'attribut. La propriete {{domxref("HTMLElement.dataset")}} y donne acces.</p>
<h4 id="dir"><a name="attr-dir">dir</a></h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4 id="draggable"><a name="attr-draggable">draggable</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9.1") }}</p>
<p>Cet attribut indique si l'élément peut être glissé via l' <a href="/Fr/DragDrop/Drag_and_Drop" title="fr/DragDrop/Drag and Drop">API de glissé déposé</a>. Il peut avoir une des valeurs suivantes:</p>
<div class="note">
  <p><strong>Notes: </strong></p>
  <ul>
    <li>Par défaut, seul le texte selectionné, les images et les liens peuvent être glissé.Pour tout les autres éléments, Un événement <code><strong>ondragstart</strong></code> doit avoir été défini pour que le mécanisme de glissé/déposé puisse fonctionner, comme montré dans cet exemple (anglais) <a href="/En/DragDrop/Drag_Operations" title="en/DragDrop/Drag Operations">comprehensive example</a>.</li>
  </ul>
</div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td>Document normatif</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>
<h4 id="hidden"><a name="attr-hidden">hidden</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("2") }}</p>
<p>Cet attribut booléen indique que l'élément n'est pas encore, ou n'est plus, pertinente. Par exemple, il peut être utilisé pour masquer des éléments de la page qui ne peuvent être utilisé jusqu'à ce que le processus de connexion soit terminée. Le navigateur ne rendra pas ces éléments.</p>
<div class="note">
  <p><strong>Note d'utilisation</strong>:</p>
  <ul>
    <li>Cet attribut ne doit pas être utilisé pour masquer le contenu qui pourrait être légitimement être montré. Par exemple, il ne devrait pas être utilisé pour masquer les panneaux onglets d'une interface à onglets, car il s'agit d'une décision de style et un autre style conduirait à une page tout à fait correct.</li>
    <li>Les éléments Hidden ne doivent pas être liées à des éléments non-cachés.</li>
    <li>Les éléments qui sont des descendants d'un élément caché sont toujours actifs, ce qui signifie que les éléments de script peuvent encore exécuter et la forme des éléments serot encore visible.</li>
  </ul>
</div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Document</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">normatif</span></span></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>
<h4 id="id"><a name="attr-id">id</a></h4>
<p>Cet attribut définit un identifiant unique (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément lors du link (en utilisant un identifiant de fragment), scripting, ou de style style (avec CSS).</p>
<div class="note">
  <p><strong>Note sur l'utilisation:</strong></p>
  <ul>
    <li>Cet attribut de valeur est une chaîne opaque: cela signifie que l'auteur Web ne doit pas l'utiliser pour transmettre toute information. Signification particulière pour l'exemple de sens sémantique: l'attribut ne doit pas être dérivée de la chaîne.</li>
    <li>Cet attribut de valeur ne doit pas contenir d'espaces blancs. Les navigateurs traitent les ID non conformes qui contient des espaces blancs comme si l'espace blanc fesait partie de l'ID. Contrairement à l'attribut de classe, qui autorise les valeurs séparées par des espaces, des éléments ne peut avoir qu'un seul ID définis par l'attribut id.Notez qu'un élément peut avoir plusieurs IDs, mais les autres devraient être fixés par un autre moyen, comme par exemple via un scriptd'interface avec l'interface DOM de l'élément.</li>
    <li>L'utilisation d'autre caractères que les lettres et chiffres ASCII, "_", "-" et "." peut causer des problèmes de compatibilité, car ils n'ont pas été autorisés dans le HTML 4. Bien que cette restriction a été levée dans HTML 5, un ID doit commencer par une lettre pour être compatible.</li>
  </ul>
</div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Document</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">normatif</span></span></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>
<h4 id="itemid"><a name="attr-itemid">itemid</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}</p>
<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet attribut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est lié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à</span></span> <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>.</p>
<h4 id="itemprop"><a name="attr-itemprop">itemprop</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}</p>
<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet attribut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est lié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à</span></span> <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>.</p>
<h4 id="itemref"><a name="attr-itemref">itemref</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}</p>
<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet attribut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est lié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à</span></span> <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>.</p>
<h4 id="itemscope"><a name="attr-itemscope">itemscope</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}</p>
<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet attribut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est lié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à</span></span> <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>.</p>
<h4 id="itemtype"><a name="attr-itemtype">itemtype</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}</p>
<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet attribut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est lié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à </span></span><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>.</p>
<h4 id="Lang"><a name="attr-lang">Lang</a></h4>
<p>Cet attribut participe à la définition de la langue de l'élément, la langue dans laquelle les éléments non modifiables sont écrits ou dans laquelle les éléments modifiables doivent être rédigés. Le tag contient une valeur d'entrée unique dans le format définit dans le document</p>
<p>(en anglais). Si le contenu de la balise est la chaîne vide (<em>empty string</em>) la langue est définie inconnue (<em>unknown</em>), si le contenu de la balise n'est pas valide, en ce qui concerne à BCP47, il définit non valide (<em>invalid</em>).</p>
<h4 id="Spellcheck"><a name="attr-spellcheck">Spellcheck</a></h4>
<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.8.1") }}</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Cet énumérateur d'attributs définit si l'élément peut être vérifié pour les fautes d'orthographe. Il peut avoir les valeurs suivantes:</p>
<p>Si cet attribut n'est pas défini, sa valeur par défaut est l'élement-type défini par le navigateur. Cette valeur par défaut peut également être héréditaire (<code>inherited</code>), ce qui signifie que le contenu de l'élément sera vérifié pour les fautes d'orthographe que si son ancien <em>spellcheck</em> le plus proche est un spellcheck "<span style="font-family: Times New Roman;"><code>true</code></span>".<br />
  <br />
  Vous pouvez consulter<a href="/fr/Controlling_spell_checking_in_HTML_forms" title="fr/Controlling spell checking in HTML forms"> cet article</a> pour voir un exemple complet de l'utilisation de cet attribut.</p>
<p>&nbsp;</p>
<div class="note">
  <p><strong>Note d'utilisation:</strong></p>
  <ul>
    <li>Cet attribut est une une énumération et non pas un booléen. Cela signifie que l'usage explicite de l'une des valeurs true ou false est obligatoire et que le raccourci <code>&lt;label spellcheck&gt; Exemple d'étiquette &lt;/label&gt;</code> n'est pas autorisé. L'utilisation correcte est <code>&lt;label spellcheck="true"&gt; Exemple d'étiquette &lt;/label&gt;</code>.</li>
    <li>Cet attribut est simplement une indication pour le navigateur: les navigateurs ne sont pas tenus d'être en mesure de vérifier les fautes d'orthographe. Typiquement les éléments non modifiables ne sont pas vérifiés pour les fautes d'orthographe, même si l'attribut <em>spellcheck</em> à la valeur true et le navigateur prend en charge la correction orthographique.</li>
    <li>La valeur par défaut de cet attribut est le navigateur et l'<code>element-dependant</code>:</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>Quand <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Quand</strong><strong> <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Quand <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Quand <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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><span id="1296339593051S" style="display: none;">&nbsp;</span><strong>Quand <span id="1296339592525E" style="display: none;">&nbsp;</span><span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Quand <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Quand <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Quand <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Quand</strong><strong> <span style="font-family: Courier New;">layout.spellcheckDefault</span> = <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>Document normatif</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>
<h4 id="Style"><a name="attr-style">Style</a></h4>
<p>Cet attribut contient des déclarations de style <a href="/fr/CSS" title="https://developer.mozilla.org/fr/CSS">CSS</a> à appliquer à l'élément. Notez qu'il est recommandé pour les styles d'être définis dans un fichier séparés ou fichiers distincts. Cet attribut et l'élément {{ HTMLElement ("style") }} ont principalement pour but de permettre un style rapide, par exemple pour des fins de test.</p>
<p>&nbsp;</p>
<div class="note">
  <p><strong>Note d'utilisation</strong>: Cet attribut ne doit pas être utilisé pour transmettre de l'information sémantique. Même si tous les styles sont enlevé, une page doit rester sémantiquement correcte. En général, il ne devrait pas être utilisé pour masquer les informations non pertinentes, ce qui devrait être fait en utilisant l'attribut <a href="/#attr-hidden" title="https://developer.mozilla.org/#attr-hidden">hidden</a>.</p>
</div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Document</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">normatif</span></span></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>
<h4 id="Tabindex"><a name="attr-tabindex">Tabindex</a></h4>
<p>Cet attribut intégré indique si l'élément peut prendre le focus d'entrée (est <em>focalisable</em>), si il doit participer à la navigation séquentielle du clavier , et si oui, à quelle position. Il peut prendre plusieurs valeurs:</p>
<p>Un élément avec une valeur 0, une valeur non valide, ou <em>pas de valeur tabindex</em> doit être placé après les éléments avec un tabindex positif dans l'ordre séquentiel de navigation du clavier.</p>
<p>Vous pouvez consulter <a href="/fr/Focus_management_in_HTML" title="fr/Focus management in HTML">cet article</a> pour voir une explication complète de la gestion du focus.</p>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Document</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">normatif</span></span></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>
<h4 id="Title"><a name="attr-title"><strong>Title</strong></a></h4>
<p><a name="attr-title"> </a></p>
<p><a name="attr-title">Cet attribut contient un texte qui représentent aussi les informations et les conseils liés à l'élément auquel il appartient . Ces informations peuvent généralement, mais pas nécessairement, être présenté à l'utilisateur comme une info-bulles. Voici quelques utilisations typiques de cet attribut:</a></p>
<p style="margin-left: 40px;"><a name="attr-title">Des sémantiques supplémentaires sont attachés aux <strong>atributs de titres</strong> : {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }} et {{ HTMLElement("input") }}.</a></p>
<div class="note">
  <p><a name="attr-title"><strong>Note d'utilisation</strong>: L'attribut title peut contient plusieurs lignes. Chaque U+000A LINE FEED (LF) inséré représente un saut de ligne. Certaines précautions doivent être prises si, comme cela:</a></p>
  <pre class="brush: html">
<a name="attr-title">&lt;p&gt;Les saut de lignes en titre doivent être prises, comme cela &lt;abbr title="c'est un titre multiligne"&gt;exemple&lt;/abbr&gt;.&lt;/p&gt; 
</a></pre>
  <a name="attr-title">defines a two-line title.</a></div>
<table class="fullwidth-table">
  <tbody>
    <tr>
      <td><a name="attr-title"><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Document</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">normatif</span></span></a></td>
      <td><a name="attr-title"></a><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>
<p><a name="attr-title"> </a></p>
<dl>
  <dd>
    <a name="attr-title">Cet attribut permet de définir un raccourci clavier pour l'élément. &nbsp; Le contenu de l'attribut consiste en une liste de touche séparés par un espace (d'un point de vue unicode). Le navigateur utilisera le premier raccourci valide dispoble.<br />
    {{ HTMLVersionInline(4) }} Dans les version précédante de HTML, seulement un seul raccourci était accepté. Auparavant, il n'était pas global et ne s'appliquait qu'au éléments suivent&nbsp; {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} et {{ HTMLElement("textarea") }}. Il est bel et bien global maintenant et s'applique a tous les éléments.<br />
    &nbsp; </a>
    <table border="1" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
      <tbody>
        <tr>
          <td><a name="attr-title">Document normatif</a></td>
          <td><a name="attr-title"></a><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>
  <dd>
    <a name="attr-title">&nbsp; Cet attribut est la liste des classes CSS utilisée par un élément, séparé par un espace. Les classes permettent a CSS et à javascript d'accéder et/ou de modifier un élément vie le selecteur de classe&nbsp; </a><a href="/fr/CSS/Class_selectors" title="fr/CSS/Class selectors">selecteur de classe</a> ou des fonctions tel que les méthodes DOM <code title="dom-document-getElementsByClassName"><a href="/fr/DOM/document.getElementsByClassName" title="fr/DOM/document.getElementsByClassName">document.getElementsByClassName()</a></code>.
    <div class="note">
      <p><strong>Note: </strong>Alors que les spécifications de précisent pas quel type de nom de classe utiliser, il est conseillé d'utiliser des noms de classes ayant un sens sémantique plutôt que des nom ayant un sens esthétique. (e.g., utilisé un nom de classe comme <em>texte_important</em> plutôt que <em>texte_gras</em> ). Un nom sémantique conserve sa logique même la présentation del a page change.</p>
    </div>
    <table class="fullwidth-table">
      <tbody>
        <tr>
          <td>Document normatif</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>
  <dd>
    Cet attribut demande au navigateur de rendre l'élément editablepar l'utilisateur,il peut prendre une de ces 3 valeurs:
    <ul>
      <li><span style="font-family: Courier New;">"true"</span> ou une <em>châine vide</em>indique que l'élément est modifiable;</li>
      <li><span style="font-family: Courier New;">"false"</span>indiquant que l'élément n'est pas modifiable.</li>
      <li><code>"inherited"</code> indique que l'élément herite de l'attribut contenteditablede ses parent (comportement par défaut).</li>
    </ul>
    <table class="fullwidth-table">
      <tbody>
        <tr>
          <td>Document normatif</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>
  <dd>
    {{ HTMLVersionInline(5) }} {{ unimplemented_inline() }}</dd>
  <dd>
    Cet attribut est en rapport avec <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">commandes interactives HTML5</a> (anglais).</dd>
  <dd>
    Cet attribut indique le sens du texte. Dans certain pays le texte va de droite à gauche au lieu de gauche a droite. Il peut avoir deux valeurs:
    <ul>
      <li><span style="font-family: Courier New;">"ltr"</span>, qui veux dire <em>left to right </em>et indique un texte allant de gauche a droite (comme le français);</li>
      <li><span style="font-family: Courier New;">"rtl"</span>, qui veux dire <em>right to left</em> et indique un texte allant de droite a gauche (comme l'arabe).</li>
    </ul>
    <div class="note">
      <p><strong>Notes: </strong></p>
      <ul>
        <li>Cet attribut peut etre écrasé par les propriété CSS&nbsp; {{ cssxref("direction") }} et {{ cssxref("unicode-bidi") }},si une page CSS est active et si l'élément supporte ces propriété.</li>
        <li>Puisque l'orientation du texte est rattachée au contenu, il est recommendé au developeur web d'utilisé cet attribut plutôt que leur equivalent CSS, si cela est possible. De cette façon le texte sera correctement présenté si le navigateur ne supporte pas le CSS (ou qu'il est désactivé).</li>
        <li>Cet attribut est indispensable pour l'élément HTML {{ HTMLElement("bdo") }}.</li>
      </ul>
    </div>
    <table class="fullwidth-table">
      <tbody>
        <tr>
          <td>Document normatif</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>
    <ul>
      <li><span style="font-family: Courier New;">"true"</span>, indique que l'élément peut être glissé.</li>
      <li><span style="font-family: Courier New;">"false</span>", indique que l'élément de peut pas être glissé.</li>
      <li><span style="font-family: Courier New;">"auto</span>", indique que l'éklément se comporte selon les regle du navigateur (défaut).</li>
    </ul>
  </dd>
  <dd>
    <div class="note">
      <p><strong>Note d'utilisation:</strong></p>
      <ul>
        <li>Même si l'attribut <strong>lang</strong> est défini, il peut ne pas être pris en compte, comme l'attribut <strong>xml: lang</strong> est prioritaire. Lisez <a href="/fr/Determining_the_language_of_element" title="https://developer.mozilla.org/fr/Determining_the_language_of_element">l'algorithme de détermination de la langue</a> du contenu d'un élément pour voir comment la langue est déterminée dans tous les cas.</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><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Document</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">normatif</span></span></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>
    <ul>
      <li><span style="font-family: Courier New;">True</span>, ce qui indique que l'élément doit être, si possible, vérifier les fautes d'orthographe;</li>
      <li><span style="font-family: Courier New;">false</span>, ce qui indique que l'élément ne doit pas être vérifiée pour les fautes d'orthographe..</li>
    </ul>
    <ul>
      <li>- Une <em>valeur négative</em> signifie que l'élément doit être focalisable, mais ne devrait pas être accessible via la navigation séquentielle du clavier ;</li>
      <li><em>- 0</em> signifie que l'élément doit être focusable et accessible via la navigation séquentielle du clavier , mais son ordre relatif est défini par la convention de la plate-forme;</li>
      <li>- Une valeur <em>positive</em> qui signifirait que l'attribut devrait être focusable et accessible via la navigation séquentielle du clavier ; son ordonnance relative est définie par la valeur de l'attribut: le suivi séquentiel du nombre croissant des <strong>tabindex</strong>. Si plusieurs éléments partagent la même tabindex, leur ordre relatif suit leur position relative dans le document).</li>
    </ul>
    <ul>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lien: le titre ou une description du document lié</li>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Eléments médias comme une image: une description ou des crédits associés</li>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Le paragraphe: une note ou un commentaire à ce sujet</li>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Citation: quelques informations sur l'auteur, et ainsi de suite.<br />
        <br />
        Si cet attribut est omis, cela signifie que lancien titre le plus proche de cet élément est toujours d'actualité pour lui (et peut légitimement être utilisé comme l'info-bulle pour cet élément). Si cet attribut est défini pour une chaine vide (empty string), cela signifie explicitement que l'ancien titre le plus proche n'est pas pertinent pour cet élément (et ne doit pas être utilisé dans l'encadré d'aide de cet élément).</li>
    </ul>
  </dd>
</dl>
<p>&nbsp;</p>
<p>&nbsp;</p>
<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" } ) }}</span></p>
Revenir à cette révision