Cours HTML / Structurer une page avec les éléments sémantiques

Les éléments HTML sémantiques décrivent la fonction de chaque partie d'une page. Utilisez nav pour la navigation principale, main pour le contenu principal de la page, et article pour un contenu autonome. Ces rôles restent significatifs même lorsque la disposition visuelle change.

Que signifie chaque élément de région ?

• header introduit une page ou une section. Il peut contenir un nom de site, un titre ou une navigation.
• nav regroupe les principaux liens de navigation. Un groupe n'a pas besoin de nav simplement parce qu'il contient des liens.
• main contient le contenu principal unique de la page. Un document a normalement une seule région visible main.
• article convient à un article ou une histoire autonome. section divise le contenu par sujet et devrait généralement avoir un titre qui identifie son sujet.
• aside contient des informations complémentaires indirectement liées au contenu principal. footer contient des informations de conclusion pour une page ou une section.

Ces éléments ne définissent pas à eux seuls leur disposition à l’écran. Utilisez aside parce que le contenu est supplémentaire, pas parce que vous voulez une barre latérale ; utilisez le CSS pour déterminer sa position. De même, le balisage sémantique seul ne garantit pas l'accessibilité ni de meilleurs classements dans les moteurs de recherche. Le contenu réel, les titres et l'ordre de lecture doivent correspondre aux rôles des éléments.

Créer une page complète avec des régions sémantiques

L'exemple suivant est un document HTML complet. Les liens de navigation de la page pointent vers des régions dans le même fichier, donc vous pouvez enregistrer et exécuter l'exemple sans créer une autre page. Choisissez les niveaux de titres après avoir divisé les régions en suivant Titres et Paragraphes.

<!doctype html>

<html lang="fr">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Plantes de printemps | Petit Jardin</title>

</head>

<body>

  <header>

    <p>Petit Jardin</p>

    <nav aria-label="Sur cette page">

      <a href="#article">Lire l’article</a>

      <a href="#sunlight">Besoins en lumière du soleil</a>

    </nav>

  </header>



  <main>

    <article id="article">

      <h1>Plantes à cultiver au printemps</h1>

      <section id="sunlight">

        <h2>Besoins en lumière du soleil</h2>

        <p>Les besoins en lumière varient selon les plantes.</p>

      </section>

    </article>

    <aside>

      <p>Vérifiez la date des dernières gelées dans votre région avant de planter.</p>

    </aside>

  </main>



  <footer>

    <p>Guide Petit Jardin</p>

  </footer>

</body>

</html>

Enregistrez le code sous le nom index.html et ouvrez-le dans un navigateur. Le nom du site, la navigation, l'article, la note complémentaire et le pied de page apparaissent approximativement de haut en bas. Sélectionner « Besoins en lumière du soleil » permet de passer à la section parce que href="#sunlight" correspond à id="sunlight". Si vous voulez que la note soit à côté de l'article, ajoutez une mise en page CSS plutôt que de changer le sens du HTML. Le h1 dans le code est le titre du document d'exemple, pas un autre titre dans ce tutoriel.

Quand devriez-vous utiliser section ou article ?

Un article de blog peut se suffire à lui-même et constitue un bon candidat pour article. Dans cet article, des sujets tels que « Ce dont vous avez besoin » et « Étapes » peuvent chacun former une section. Un conteneur utilisé uniquement pour une bordure ou une couleur de fond n'a pas besoin d'un rôle sémantique ; un div peut être plus approprié. Vous n'avez pas non plus besoin d'encapsuler chaque titre et paragraphe dans une section lorsque leur hiérarchie est déjà claire. Pour un conteneur qui ne sert qu'à regrouper des éléments pour le style, utilisez les critères de Quand utiliser div et span.

header et footer peuvent appartenir à un article individuel ainsi qu'à la page entière. Une liste d'articles d'actualité pouvant être compris indépendamment peut contenir un article par article. Décidez en fonction du rôle du contenu, et non du nom de l'élément ou de son apparence par défaut. Consultez la référence des éléments HTML sur MDN pour les définitions des éléments.

Choisir des éléments pour le même contenu

Lorsqu'une page comporte à la fois une navigation du site et une navigation au sein d'un article, distinguez les deux zones de navigation avec des noms significatifs. Ce fragment identifie leurs différents objectifs.

<nav aria-label="Navigation du site">
  <a href="index.html">Accueil</a>
  <a href="about.html">Présentation</a>
</nav>
<nav aria-label="Sections de cet article">
  <a href="#sunlight">Lumière</a>
  <a href="#watering">Arrosage</a>
</nav>

Faites correspondre les noms de fichiers et les identifiants de fragment aux destinations réelles. aria-label fournit un nom accessible pour la zone de navigation ; il ne crée pas automatiquement un en-tête de menu visible.

Les directives WAI du W3C sur l'étiquetage des régions expliquent comment les noms distinguent les régions ayant des rôles similaires.

Vérifiez la structure du document

Lisez les titres, le menu et le contenu principal dans l'ordre du document, même si leur position à l'écran semble correcte. Évitez plusieurs main visibles, des conteneurs section sans titre et sans sujet réel, et aside utilisés uniquement pour forcer une position latérale. Une structure significative doit toujours avoir du sens avant d'ajouter du CSS.