Attributs globaux HTML

Les attributs globaux sont des attributs que vous pouvez ajouter à n'importe quel élément HTML. Contrairement aux attributs spécifiques à un élément — comme href (uniquement sur <a>), src (uniquement sur <img>), ou colspan (uniquement sur les cellules de tableau) — les attributs globaux font partie du vocabulaire partagé que chaque balise comprend.

C'est ce qui les rend si importants : au lieu d'apprendre un attribut différent pour chaque élément, vous apprenez un seul ensemble d'attributs globaux et vous les réutilisez partout. Vous utiliserez class et id pour connecter les éléments au CSS et à JavaScript, data-* pour joindre vos propres données personnalisées, tabindex pour contrôler le focus au clavier, lang et dir pour rendre le contenu accessible dans n'importe quelle langue, et hidden, title, ou contenteditable pour les comportements d'interface courants.

Qu'un attribut global soit valide sur un élément ne signifie pas qu'il a toujours un effet visible. Par exemple, spellcheck ne modifiera pas le comportement ou la sémantique d'un paragraphe, et lang n'a aucun effet sur un élément sans contenu textuel. C'est normal — ils sont autorisés partout ; ils ne font simplement rien là où il n'y a rien sur quoi agir.

Vous trouverez tous les attributs globaux et leurs explications dans le tableau de référence ci-dessous, suivi d'une présentation détaillée des plus utilisés.

L'attribut id

id donne à un élément un nom unique sur la page. C'est l'ancre qui relie HTML au reste de la plateforme : CSS peut le cibler avec #name, JavaScript peut le récupérer avec document.getElementById(), un label peut pointer un contrôle de formulaire dessus avec for, et un lien peut y accéder directement.

<h2 id="install">Installation</h2>

<!-- Clicking this link scrolls to the heading above -->
<a href="#install">Jump to Installation</a>

La valeur doit être unique dans le document et ne contenir aucun espace. Les id en double sont invalides et font que getElementById() renvoie uniquement la première correspondance. En savoir plus dans le chapitre attribut id et voir les liens d'ancre dans Liens HTML.

L'attribut class

Là où id est pour un seul élément, class est pour des groupes d'éléments qui partagent un style ou un comportement. Un élément peut contenir plusieurs classes séparées par des espaces, et la même classe peut être réutilisée sur autant d'éléments que vous le souhaitez.

<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>

Les deux boutons partagent la classe btn (styles communs) et ajoutent une classe supplémentaire pour leur variante. C'est le fondement de l'application du CSS — voir Sélecteurs CSS et CSS id et class.

Les attributs personnalisés data-*

data-* vous permet d'attacher vos propres données privées à un élément sans inventer des attributs non standard. Tout attribut dont le nom commence par data- est valide et est ignoré par le rendu du navigateur — il existe uniquement pour vos scripts.

<button id="cart" data-product-id="42" data-price="19.99">
  Add to cart
</button>

<script>
  const btn = document.getElementById("cart");

  // A "data-foo-bar" attribute is read as element.dataset.fooBar
  console.log(btn.dataset.productId); // "42"
  console.log(btn.dataset.price);     // "19.99"
</script>

Notez la règle de nommage : l'attribut data-product-id devient dataset.productId en JavaScript — le préfixe data- est supprimé et chaque segment avec un tiret devient camelCase. Les valeurs sont toujours des string, alors convertissez-les (Number(btn.dataset.price)) lorsque vous avez besoin d'un nombre.

L'attribut tabindex

tabindex contrôle si un élément peut recevoir le focus clavier et dans quel ordre la touche Tab l'atteint. Il y a trois cas significatifs :

• tabindex="0" — ajoute l'élément à l'ordre de tabulation naturel, à la position déterminée par sa place dans le document. Utilisez ceci pour rendre un élément normalement non focalisable (comme un <div> que vous avez transformé en widget personnalisé) accessible au clavier.
• tabindex="-1" — retire l'élément de l'ordre de tabulation, mais vous permet quand même de le focaliser avec JavaScript via element.focus(). Utile pour déplacer le focus vers une région (par exemple, une boîte de dialogue ou un résumé d'erreur) sans le mettre dans la séquence Tab.
• Une valeur positive (tabindex="1" et plus) — force l'élément en tête de l'ordre de tabulation, avant tout ce qui a tabindex="0" ou pas de tabindex. C'est un anti-modèle : cela remplace l'ordre de lecture naturel et déroute presque toujours les utilisateurs au clavier. À éviter.

<!-- Reachable by keyboard, in normal order -->
<div tabindex="0" role="button">Custom button</div>

<!-- Focusable by script only, skipped by Tab -->
<div id="dialog" tabindex="-1">Dialog content</div>

La règle d'accessibilité à retenir : laissez l'ordre du DOM dicter l'ordre de tabulation. Utilisez 0 et -1 délibérément, et réservez les valeurs positives pour ne jamais les utiliser.

L'attribut contenteditable

contenteditable="true" rend le contenu d'un élément directement modifiable par l'utilisateur, transformant un simple <div> en une surface de texte enrichi basique. contenteditable="false" (valeur par défaut) le maintient en lecture seule.

<div contenteditable="true">
  Click here and start typing — this text is editable.
</div>

C'est le bloc de construction derrière les éditeurs en page et les champs de notes en ligne. Étant donné que l'utilisateur peut modifier le DOM, lisez le texte courant en JavaScript avec textContent ou innerHTML de l'élément lorsque vous devez le sauvegarder.

Les attributs lang et dir (internationalisation)

lang déclare la langue du contenu d'un élément en utilisant un code de langue tel que en, fr, ou ar. Définir lang sur l'élément <html> est essentiel pour l'accessibilité : les lecteurs d'écran l'utilisent pour choisir la prononciation et la voix correctes, et les moteurs de recherche et les outils de traduction l'utilisent pour identifier la langue.

dir définit la direction de base du texte — ltr (de gauche à droite, par défaut), rtl (de droite à gauche, pour les langues comme l'arabe et l'hébreu), ou auto (laissez le navigateur l'inférer à partir du contenu).

<html lang="en">
  <body>
    <p>This paragraph reads left to right.</p>

    <!-- An Arabic phrase that reads right to left -->
    <p lang="ar" dir="rtl">مرحبا بكم في عالم البرمجة</p>
  </body>
</html>

Pour les détails de mise en page de droite à gauche, consultez la propriété CSS direction. Définissez toujours lang sur <html>, et ajoutez-le à nouveau sur tout contenu en ligne qui change de langue — bien les configurer est l'une des améliorations d'accessibilité les plus simples et les plus efficaces sur une page.

Notes d'accessibilité

Quelques attributs globaux ont un effet direct sur les technologies d'assistance, alors utilisez-les avec soin :

• lang — requis pour que les lecteurs d'écran lisent le contenu dans la bonne langue et avec le bon accent. Définissez-le sur <html> et sur tout élément dont la langue diffère de celle de la page.
• dir — garantit que les langues de droite à gauche s'affichent et sont naviguées correctement. Associez-le à lang pour le contenu RTL.
• tabindex — les valeurs positives brisent l'ordre de focus attendu pour les utilisateurs au clavier et les lecteurs d'écran ; restez à 0 et -1.
• accesskey — ses raccourcis clavier entrent fréquemment en conflit avec les raccourcis des navigateurs et des technologies d'assistance, de sorte que la touche choisie peut ne pas fonctionner pour tout le monde. Traitez-le comme une commodité, jamais comme le seul moyen d'accéder à une fonctionnalité.

Résumé

Une poignée d'attributs globaux méritent d'être connus en profondeur car vous les utiliserez constamment : id, class, data-*, tabindex, et la paire i18n lang / dir. Les autres — title, hidden, contenteditable, draggable, spellcheck, translate, style, accesskey — sont utiles à reconnaître et à consulter dans le tableau ci-dessus lorsqu'une situation le demande. Et évitez complètement les attributs supprimés (contextmenu, dropzone) ; ils ne font plus partie de HTML.

Pratique