HTML sémantique

Avec plus de 100 éléments HTML et la possibilité de créer des éléments personnalisés, il existe une infinité de façons de baliser votre contenu. Certaines méthodes, notamment sémantiquement, sont plus efficaces que d'autres.

Sémantique signifie "lié au sens". Écrire du code HTML sémantique signifie utiliser des éléments HTML pour structurer votre contenu en fonction de la signification de chaque élément, et non de son apparence.

Cette série n'a pas encore abordé beaucoup d'éléments HTML, mais même sans connaître le langage HTML, les deux extraits de code suivants montrent comment le balisage sémantique peut donner du contexte au contenu. Les deux utilisent un nombre de mots au lieu de ipsum lorem pour vous éviter de faire défiler "trente mots" en 30 mots:

Le premier extrait de code utilise <div> et <span>, deux éléments sans valeur sémantique.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Avez-vous une idée de ce à quoi ces mots peuvent s'appliquer ? Pas vraiment.

Réécrivons ce code avec des éléments sémantiques:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Quel bloc de code exprime un sens ? En utilisant uniquement les éléments non sémantiques de <div> et <span>, vous ne pouvez vraiment pas dire ce que représente le contenu du premier bloc de code. Le deuxième exemple de code, avec des éléments sémantiques, fournit suffisamment de contexte pour qu'un non-codeur puisse déchiffrer le but et la signification sans avoir jamais rencontré de balise HTML. Cela fournit suffisamment de contexte pour que le développeur puisse comprendre le plan de la page, même s'il ne comprend pas le contenu, par exemple un contenu rédigé dans une langue étrangère.

Dans le deuxième bloc de code, nous pouvons comprendre l'architecture même sans comprendre le contenu, car les éléments sémantiques fournissent un sens et une structure. Comme vous pouvez le voir, le premier en-tête est la bannière du site, <h1> étant probablement le nom du site. Le pied de page est le pied de page du site: les cinq mots peuvent correspondre à une déclaration de droits d'auteur ou à une adresse commerciale.

Le balisage sémantique ne vise pas seulement à rendre le balisage plus facile à lire pour les développeurs. Il s'agit principalement de rendre le balisage facile à déchiffrer par les outils automatisés. Les outils pour les développeurs montrent également comment les éléments sémantiques fournissent une structure exploitable par un ordinateur.

Accessibility Object Model (AOM)

Lorsque le navigateur analyse le contenu reçu, il crée les modèles DOM (Document Object Model) et CSSOM (CSS Object Model) et CSS. Il crée ensuite une arborescence d'accessibilité. Les appareils d'assistance, tels que les lecteurs d'écran, utilisent l'AOM pour analyser et interpréter le contenu. Le DOM est une arborescence de tous les nœuds du document. L'AOM est en quelque sorte une version sémantique du DOM.

Comparons le rendu de ces deux structures de document dans le panneau d'accessibilité de Firefox:

Dans la deuxième capture d'écran, le deuxième bloc de code comporte quatre rôles clés. Il utilise des points de repère sémantiques, pratiques nommés <header>, <main>, <footer> et <nav> pour "navigation". Les points de repère fournissent une structure au contenu Web et permettent aux utilisateurs de lecteurs d'écran de naviguer facilement au clavier dans les sections importantes du contenu.

Notez que <header> et <footer> sont des points de repère, ayant respectivement les rôles banner et contentinfo, lorsqu'ils ne sont pas imbriqués dans d'autres points de repère. L'AOM de Chrome affiche les informations suivantes:

En examinant les outils pour les développeurs Chrome, vous remarquerez une différence significative entre le modèle d'objets d'accessibilité lorsqu'il utilise des éléments sémantiques et lorsqu'il ne l'utilise pas.

Il est assez clair que l'utilisation d'éléments sémantiques favorise l'accessibilité, tandis que l'utilisation d'éléments non sémantiques réduit l'accessibilité. Le langage HTML est généralement accessible par défaut. Notre travail en tant que développeurs consiste à protéger la nature accessible par défaut du code HTML et à veiller à ce que nous optimisions au maximum l'accessibilité. Vous pouvez inspecter l'AOM dans les outils pour les développeurs.

Attribut role

L'attribut role décrit le rôle d'un élément dans le contexte du document. L'attribut role est un attribut global, ce qui signifie qu'il est valide pour tous les éléments. Il est défini par la spécification ARIA plutôt que par la spécification HTML WHATWG, où presque tous les autres éléments de la série sont définis.

Les éléments sémantiques ont chacun un rôle implicite, certains en fonction du contexte. Comme nous l'avons vu dans la capture d'écran des outils de développement d'accessibilité de Firefox, les <header>, <main>, <footer> et <nav> de premier niveau étaient tous des points de repère, tandis que <header> imbriqué dans <main> était une section. La capture d'écran Chrome présente les rôles ARIA de ces éléments: <main> est main, <nav> est navigation et <footer>, comme il s'agissait du pied de page du document, est contentinfo. Lorsque <header> est l'en-tête du document, le rôle par défaut est banner, ce qui définit la section comme en-tête global du site. Lorsqu'un élément <header> ou <footer> est imbriqué dans un élément de section, il ne s'agit pas d'un rôle de repère. Les captures d'écran des deux outils de développement le montrent.

Les noms de rôle des éléments sont importants lors de la création de l'AOM. La sémantique d'un élément, ou "rôle", est importante pour les technologies d'assistance et, dans certains cas, pour les moteurs de recherche. Les utilisateurs des technologies d'assistance s'appuient sur la sémantique pour parcourir le contenu et en comprendre le sens. Le rôle de l'élément permet à l'utilisateur d'accéder rapidement au contenu qu'il recherche et, surtout, indique au lecteur d'écran comment interagir avec un élément interactif une fois qu'il est sélectionné.

Les éléments interactifs tels que les boutons, les liens, les plages et les cases à cocher disposent tous d'un rôle implicite. Ils sont tous automatiquement ajoutés à la séquence d'onglets du clavier et sont tous compatibles avec les actions utilisateur attendues par défaut. Le rôle implicite, ou la valeur role explicite, indique à l'utilisateur qu'il doit s'attendre à des interactions utilisateur par défaut spécifiques à un élément.

À l'aide de l'attribut role, vous pouvez attribuer un rôle à n'importe quel élément, y compris un rôle différent de celui indiqué par la balise. Par exemple, <button> a le rôle implicite button. Avec role="button", vous pouvez transformer n'importe quel élément en bouton d'un point de vue sémantique: <p role="button">Click Me</p>.

Bien que l'ajout de role="button" à un élément informe les lecteurs d'écran qu'il s'agit d'un bouton, cela ne modifie pas l'apparence ni la fonctionnalité de l'élément. L'élément button offre de nombreuses fonctionnalités sans que vous ayez à faire quoi que ce soit. L'élément button est automatiquement ajouté à l'ordre de tabulation du document, ce qui signifie qu'il est par défaut sélectionnable avec le clavier. Les touches Entrée et Espace activent toutes deux le bouton. Les boutons comportent également toutes les méthodes et propriétés qui leur sont fournies par l'interface HTMLButtonElement. Si vous n'utilisez pas le bouton sémantique de votre bouton, vous devrez programmer à nouveau toutes ces caractéristiques. Il est tellement plus facile d'utiliser <button>.

Revenez à la capture d'écran de l'AOM pour le bloc de code non sémantique. Notez que les éléments non sémantiques n'ont pas de rôles implicites. Nous pouvons rendre la version non sémantique sémantique en attribuant un rôle à chaque élément:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

Bien que l'attribut role puisse être utilisé pour ajouter une sémantique à n'importe quel élément, utilisez plutôt des éléments avec le rôle implicite dont vous avez besoin.

Éléments sémantiques

Vous demander : « Quel élément représente le mieux la fonction de cette section du balisage ? » vous incitera généralement à choisir le meilleur élément pour le travail. L'élément que vous choisissez (et donc les balises que vous utilisez) doivent être adaptés au contenu que vous affichez, car les tags ont une signification sémantique.

Le code HTML doit être utilisé pour structurer le contenu, et non pour définir son apparence. L'apparence fait partie du domaine CSS. Bien que certains éléments soient définis pour s'afficher d'une certaine manière, n'utilisez pas un élément basé sur la façon dont la feuille de style user-agent l'affiche par défaut. Sélectionnez plutôt chaque élément en fonction de sa signification sémantique et de sa fonctionnalité. Coder le code HTML de manière logique, sémantique et pertinente permet de s'assurer que le CSS est appliqué comme prévu.

Choisir les bons éléments pour le travail de code signifie que vous n'aurez pas à refactoriser ou à commenter votre code HTML. Si vous pensez à utiliser le bon élément pour le travail, vous choisirez le plus souvent le bon élément pour le travail. Si ce n'est pas le cas, vous ne l'aurez probablement pas. Lorsque vous comprenez la sémantique de chaque élément et que vous comprenez pourquoi le choix du bon élément est important, vous serez généralement en mesure de faire le bon choix sans beaucoup d'efforts supplémentaires.

Dans la section suivante, vous allez utiliser les éléments sémantiques pour créer la structure de votre document.

Testez vos connaissances

Testez vos connaissances sur le langage HTML sémantique.