Les attributs globaux

HTML définit quelques attributs communs à tous 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ée. Cependant l'utilisation même de ces éléments fera que la page ne sera plus considérée comme étant du 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 utiliser le premier caractère existant sur le clavier de l'utilisateur. 

HTML 4 Dans les versions précédentes de HTML, seul un caractère pouvait être spécifié. De plus ce n'était pas un attribut global et il ne pouvait être appliqué qu'à <a>, <area>, <button>, <input>, <label>, <legend> et <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, vous pouvez ensuite choisir un élément grâce à sa clé.

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

Document normatif WHATWG HTML Living Standard (HTML 4: HTML 4.01 Specification)

class

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

Note d'utilisation : Bien que la spécification ne fournisse 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 ayant une portée sémantique restera logique même dans le cas où la présentation de la page change.

Document normatif WHATWG HTML Living Standard (HTML 4: HTML 4.01 Specification)

contenteditable

HTML5

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 suivantes :

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 qu'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 WHATWG HTML Living Standard

contextmenu

HTML5

Cet attribut est lié aux nouvelles commandes HTML5 WHATWG HTML Living Standard. Un menu contextuel est un menu qui apparaît 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 :

data-*

HTML5

Cette catégorie d'attributs, appelés attributs de données personnalisés, permet d'échanger des informations particulières entre le HTML et sa représentation DOM pouvant être utilisée par des scripts. Toutes ces données sont accessibles via l'interface HTMLElement de l'élément où l'attribut est positionné. La propriété element.dataset y donne accès.

Le caractère * peut être remplacé par n'importe quel nom suivant les règles de créations de noms xml en suivant les restrictions suivantes :

  • le nom ne doit pas commencer par xml, miniscule ou majuscule ou mixte.
  • Le nom ne doit pas contenir de deux points (U+003A);
  • Le nom ne doit pas contenir de lettres capitales

Il faut noter que l'attribut element.dataset est une StringMap et que le nom de l'attribut de données personalisé data-test-value sera accessible via element.dataset.testvalue car tous les tirets (U+002D) sont remplacés par la capitalisation de la lettre suivante (camelcase).

Document normatif WHATWG HTML Living Standard

dir

draggable

HTML5

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

Note : Par défaut, seul le texte selectionné, les images et les liens peuvent être glissés.Pour tous 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 le montre cet exemple (anglais) comprehensive example.

Document normatif HTML5, section 3.9.5

hidden

HTML5

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

Notes d'utilisation :

  • Cet attribut ne doit pas être utilisé pour masquer le contenu qui pourrait être montré légitimement. Par exemple, il ne devrait pas être utilisé pour masquer les onglets d'une interface à onglets, car cela représente une décision de mise en forme et un autre style conduirait à une page tout à fait correcte.
  • Les éléments hidden ne doivent pas être liés à 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 toujours exécuter les éventuels controles. La forme de ces éléments sera toujours 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 (en utilisant un identifiant de fragment) lorsqu'il y est fait référence, que ce soit dans les scripts ou les feuilles de  styles CSS.

Notes d'utilisation :

  • Cet attribut de valeur est une chaîne opaque : cela signifie que l'auteur Web ne doit pas l'utiliser pour transmettre de l'information. La signification de l'élément ne doit pas être déduite de la valeur de cet attribut (il ne peut apporter aucune valeur sémantique).
  • La valeur de cet attribut ne doit pas contenir de blancs. Les navigateurs traitent les ID non conformes, contenant des blancs, comme si le blanc appartenait à l'identifiant. Contrairement à l'attribut de classe, qui autorise les valeurs séparées par des espaces, les éléments ne peuvent avoir qu'un seul ID défini par l'attribut id. Il faut noter qu'un élément peut avoir plusieurs identifiants, ceux-ci devant être fixés par une autre méthode, par exemple avec un script manipulant l'interface DOM de l'élément.
  • L'utilisation d'autres caractères que les lettres et chiffres ASCII, "_", "-" et "." peut entraîner des problèmes de compatibilité, car ils n'ont pas été autorisés dans le HTML 4. Bien que cette restriction ait été levée dans HTML 5, un ID doit commencer par une lettre afin d'être compatible.
Document normatif HTML5, section 3.2.3.1 (HTML 4: HTML4.01, section 7.5.2)

itemid

HTML5 Non implémenté

Cet attribut est lié à HTML5 Microdata feature.

itemprop

HTML5 Non implémenté

Cet attribut est lié à HTML5 Microdata feature.

itemref

HTML5 Non implémenté

Cet attribut est lié à HTML5 Microdata feature.

itemscope

HTML5 Non implémenté

Cet attribut est lié à HTML5 Microdata feature.

itemtype

HTML5 Non implémenté

Cet attribut est lié à HTML5 Microdata feature.

lang

Cet attribut permet de définir la langue utilisée pour l'élément, la langue dans laquelle les éléments non-éditables sont rédigés ou la langue dans laquelle les éléments éditables devraient être écrits. Cet attribut contient une seul valeur. Cette valeur est un format défini par le document Tags for Identifying Languages (BCP47) de l'IETF. Si le contenu est une chaîne de caractères vide, la langue est unknown (inconnue), si le contenu n'est pas valide selon le document ci-avant, il est invalid (invalide).

Notes d'utilisation :

  • Même si l'attribut lang est renseigné, il peut arriver qu'il ne soit pas pris en compte. En effet l'attribut xml:lang possède une priorité plus élevée que l'attribut lang.
  • Pour la pseudo-classe CSS :lang, deux noms de langues sont différents si leurs noms sont différents.
Document normatif HTML5, section 3.2.3.3(HTML 4: HTML4.01, section 8.1)

spellcheck

HTML5

Cet attribut à valeur multiple permet de savoir si l'orthographe de l'élément doit être vérifiée. Il peut prendre 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 l'orthographe du contenu de l'élément sera vérifiée seulement si le parent le plus proche possédant l'attribut spellcheck le possède avec la valeur "true".

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

 

Notes d'utilisation :

  • Cet attribut est un attribut à valeur multiple et non un booléen. Il faut donc obligatoirement utiliser l'une des valeurs true ou false. Le raccourci <label spellcheck> Exemple d'étiquette </label> n'est pas autorisé. L'utilisation correcte sera <label spellcheck="true"> Exemple d'étiquette </label>.
  • Cet attribut représente seulement une indication pour le navigateur : les navigateurs ne sont pas tenus d'être en mesure de vérifier les fautes d'orthographe. Généralement, l'orthographe des éléments non modifiables n'est pas vérifiée, même si l'attribut spellcheck prend la valeur true et que le navigateur prend en charge la vérification orthographique.
  • La valeur par défaut de cet attribut dépend à la fois du navigateur et de l'élément :
Browser <html> <textarea> <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. Il est par ailleurs conseillé que les styles soit définis dans un fichier séparé ou des fichiers distincts. Cet attribut et l'élément <style> ont principalement pour but de permettre une mise en forme rapide (pour des tests par exemple).

Note d'utilisation : Cet attribut ne doit pas être utilisé pour transmettre de l'information sémantique. Dans l'éventualité où tous les styles seraient retirés, la page doit rester correcte sur le plan sémantique. En général, il ne devrait pas être utilisé pour masquer les informations non pertinentes. Cela devrait être fait en utilisant l'attribut hidden.

Document normatif HTML5, section 3.2.3.7(HTML 4: HTML4.01, section 14.2.2)

tabindex

Cet attribut à valeur entière indique si l'élément peut prendre le focus d'entrée (est focalisable), s'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 ayant un tabindex positif dans l'ordre séquentiel de navigation au clavier.

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

Document normatif HTML5, section 8.4.1(HTML 4: HTML4.01, section 17.11.1)

title

Cet attribut contient un texte contenant des informations sur le contenu de l'élément auquel il appartient. Cette information peut parfois être représentée, mais pas nécessairement, sous la forme d'un texte bulle. Voici quelques exemples concernant cet attribut :

  • Un lien : le titre ou la description du document lié
  • Un media (comme les images par exemple) : une description ou les noms des auteurs, photographes...
  • Un paragraphe : une note de bas de page ou un commentaire sur ce paragraphe
  • Une citation: des informations concernant l'auteur de la citation...

Si cet attribut est manquant, cela signifie que la valeur de l'attribut title de l'élément parent le plus proche est toujours pertinente pour l'élément courant. Si la valeur de l'attribut title est la chaîne de caractères vide, cela signifie que la valeur de l'attribut title de l'ancêtre le plus proche n'est plus pertinente (et ne devrait donc pas être utilisée comme texte bulle).

L'attribut title possède une signification plus riche pour les éléments <link>, <abbr> et <input>.

Note d'utilisation : L'attribut title peut contenir plusieurs lignes. Chaque caractère U+000A LINE FEED (LF) représente alors une nouvelle ligne. Il faut faire alors attention au cas suivant :

<p>Les lignes d'un titre doivent être prises en compte :  <abbr title="Ceci est un titre
sur plusieurs lignes">exemple</abbr>.</p>

Le support pour de tels titres sur plusieurs lignes a été ajouté à Gecko à partir de Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9).

Document normatif HTML5, section 3.2.3.3 (HTML 4: HTML4.01, section 7.4.3

 

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : Shz, xaky, tregagnon, SphinxKnight, mistyrouge
Dernière mise à jour par : tregagnon,