En-têtes et sections

Dans la section précédente, vous avez appris que même si vous ne comprenez pas le sens des mots sur une page, d'autres personnes (le moteur de recherche, les technologies d'assistance, un futur responsable de la maintenance, un nouveau membre de l'équipe) comprendront la structure du document lorsque les éléments sémantiques lui fournissent une structure pertinente.

Dans cette section, vous allez découvrir la structure des documents, récapituler les éléments de sectionnement de la section précédente et baliser le plan de votre application.

Choisir les bons éléments pour le travail au fur et à mesure du codage signifie que vous n'aurez pas à refactoriser ni à 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 vous ne le faites pas, vous ne le ferez probablement pas.

Maintenant que vous comprenez la sémantique du balisage et que vous savez pourquoi il est important de choisir le bon élément, vous pourrez généralement sélectionner le bon élément sans effort supplémentaire, voire sans effort du tout, une fois que vous aurez découvert tous les différents éléments.

Site <header>

Vous devez d'abord créer un en-tête de site. Commencez par un balisage non sémantique et progressez vers une bonne solution pour découvrir les avantages des éléments de section et d'en-tête HTML.

Si vous ne réfléchissez pas à la sémantique de notre en-tête, vous pouvez utiliser un code comme celui-ci :

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Le CSS peut rendre (presque) n'importe quel balisage correct. Toutefois, utiliser le <div> non sémantique pour tout crée du travail supplémentaire. Pour cibler plusieurs <div> avec CSS, vous devez utiliser des ID ou des classes pour identifier le contenu. Le code inclut également un commentaire pour chaque </div> de fermeture afin d'indiquer le tag d'ouverture correspondant.</div>

Bien que les attributs id et class fournissent des hooks pour le style et JavaScript, ils n'ajoutent aucune valeur sémantique pour le lecteur d'écran et (pour la plupart) les moteurs de recherche.

Vous pouvez inclure des attributs role pour fournir une sémantique permettant de créer un bon modèle d'objet d'accessibilité (AOM) pour les lecteurs d'écran :

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Cela fournit au moins une sémantique et permet d'utiliser des sélecteurs d'attributs dans le CSS, mais ajoute toujours des commentaires pour identifier le <div> que chaque </div> ferme.

Si vous connaissez le langage HTML, il vous suffit de réfléchir à l'objectif du contenu. Vous pouvez ensuite écrire ce code de manière sémantique sans utiliser role et sans avoir besoin de commenter les balises de fermeture :

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

Ce code utilise deux repères sémantiques : <header> et <nav>.

Il s'agit de l'en-tête principal. L'élément <header> n'est pas toujours un repère. Sa sémantique varie en fonction de son emplacement. Lorsque <header> est de premier niveau, il s'agit du site banner, un rôle de repère que vous avez peut-être remarqué dans le bloc de code role. Lorsqu'un <header> est imbriqué dans <main>, <article> ou <section>, il est simplement identifié comme l'en-tête de cette section et n'est pas un repère.

L'élément <nav> identifie le contenu comme étant de la navigation. Comme ce <nav> est imbriqué dans l'en-tête du site, il s'agit de la navigation principale du site. S'il était imbriqué dans un <article> ou un <section>, il s'agirait d'une navigation interne pour cette section uniquement. En utilisant des éléments sémantiques, vous avez créé un modèle d'objet d'accessibilité (AOM, Accessibility Object Model) pertinent. L'AOM permet au lecteur d'écran d'informer l'utilisateur que cette section se compose d'un bloc de navigation principal qu'il peut parcourir ou ignorer.

L'utilisation des balises de fermeture </nav> et </header> permet d'éviter d'avoir à ajouter des commentaires pour identifier l'élément fermé par chaque balise de fin. De plus, l'utilisation de balises différentes pour différents éléments élimine le besoin de crochets id et class. Les sélecteurs CSS peuvent avoir une spécificité faible. Vous pouvez probablement cibler les liens avec header nav a sans vous soucier des conflits.

Vous avez écrit un en-tête avec très peu de code HTML, sans classes ni ID. Lorsque vous utilisez le HTML sémantique, vous n'avez pas besoin de le faire.

Site <footer>

Coder le pied de page du site.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Comme pour <header>, le fait que le pied de page soit un repère dépend de son emplacement. Lorsqu'il s'agit du pied de page du site, il s'agit d'un repère. Il doit contenir les informations que vous souhaitez afficher sur chaque page, comme une mention de copyright, des coordonnées et des liens vers vos règles de confidentialité et sur les cookies. Le role implicite pour le pied de page du site est contentinfo. Sinon, le pied de page n'a aucun rôle implicite et n'est pas un repère, comme le montre la capture d'écran suivante de l'AOM dans Chrome (qui comporte un <article> avec un <header> et un <footer> entre le <header> et le <footer>).

Dans cette capture d'écran, il existe deux pieds de page : l'un dans un <article> et l'autre au niveau supérieur. Le pied de page de premier niveau est un repère avec le rôle implicite contentinfo. L'autre pied de page n'est pas un repère. Chrome l'affiche sous la forme FooterAsNonLandmark, tandis que Firefox l'affiche sous la forme section.

Cela ne signifie pas que vous ne devez pas utiliser <footer>. Par exemple, si vous avez un blog, vous pouvez avoir un pied de page avec un rôle contentinfo implicite. Chaque article de blog peut également comporter un <footer>. Sur la page de destination principale de votre blog, le navigateur, le moteur de recherche et le lecteur d'écran savent que le pied de page principal est le pied de page de premier niveau et que tous les autres pieds de page sont liés aux posts dans lesquels ils sont imbriqués.

Lorsqu'un <footer> est un descendant d'un <article>, <aside>, <main>, <nav> ou <section>, il ne s'agit pas d'un repère. Si le post s'affiche seul, en fonction du balisage, ce pied de page peut être mis en avant.

Les coordonnées sont souvent placées dans le pied de page, entre les balises <address> de l'élément d'adresse de contact. Cet élément est mal nommé, car il sert à inclure les coordonnées des personnes ou des organisations, et non les adresses postales physiques.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/https/web.dev/hal.html">Hal</a> and <a href="/https/web.dev/eve.html">Eve</a></address>
</footer>

Structure du document

Ce module commence par <header> et <footer>, car ils ne sont parfois que des éléments de repère (ou de "sectionnement"). Il existe plusieurs éléments de sectionnement plus fréquents.

Une mise en page avec un en-tête, deux barres latérales et un pied de page est appelée mise en page Holy Grail. Il existe de nombreuses façons de baliser ce contenu, y compris :

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Si vous créez un blog, vous pouvez avoir une série d'articles dans <main> :

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Lorsque vous utilisez des éléments sémantiques, les navigateurs peuvent créer des arbres d'accessibilité pertinents. Cela permet d'améliorer la navigation des lecteurs d'écran. Ici, un banner et un contentinfo sont fournis via un <header> et un <footer> de site. Les nouveaux éléments ajoutés ici incluent <main>, <aside> et <article>, ainsi que <h1> et <nav> que vous avez utilisés précédemment, et <section>, que vous n'avez pas encore utilisé.

<main>

Il existe un seul élément de repère <main>. L'élément <main> identifie le contenu principal du document. Il ne doit y avoir qu'un seul <main> par page.

<aside>

<aside> concerne le contenu indirectement ou tangentiellement lié au contenu principal du document. Par exemple, ce document porte sur le HTML. Pour une section sur la spécificité du sélecteur CSS pour les trois exemples d'en-tête de site (div, rôle et sémantique), l'encart tangentiel peut être contenu dans un <aside>. Comme la plupart des <aside>, il sera probablement présenté dans une barre latérale ou une zone d'appel. <aside> est également un repère, avec le rôle implicite de complementary.

<article>

Nous avons ajouté deux éléments <article> imbriqués dans <main>. Ce n'était pas nécessaire dans le premier exemple lorsque le contenu principal n'était qu'un mot ou, dans le monde réel, une seule section de contenu. Toutefois, si vous écrivez un blog, comme dans notre deuxième exemple, chaque article doit se trouver dans un <article> imbriqué dans <main>.

Un <article> représente une section de contenu complète ou autonome, réutilisable de manière indépendante. Pensez à un article d'actualité comme vous le feriez pour un article de journal. Sur papier, un article d'actualité sur Jacinda Ardern, Première ministre de Nouvelle-Zélande, ne peut apparaître que dans une seule section, par exemple les actualités internationales. Sur le site Web du journal, le même article d'actualité peut apparaître sur la page d'accueil, dans la section "Politique", dans la section "Océanie" ou "Asie-Pacifique", et peut-être dans les sections "Sports", "Style de vie" ou "Technologie", selon le sujet de l'article d'actualité. L'article d'actualité peut également apparaître sur d'autres sites, comme Pocket ou Yahoo Actualités.

<section>

L'élément <section> permet d'englober les sections autonomes génériques d'un document lorsqu'aucun élément sémantique plus spécifique ne peut être utilisé. Les sections doivent comporter un titre, à quelques exceptions près.

Pour reprendre l'exemple de Jacinda Ardern, sur la page d'accueil du journal, la bannière inclurait le nom du journal, suivi d'un seul <main>, divisé en plusieurs <section>, chacun avec un en-tête, tel que "Actualités du monde" et "Politique". Dans chaque section, vous trouverez une série de <article>. Dans chaque <article>, vous pouvez également trouver un ou plusieurs éléments <section>. Sur cette page, la partie "En-têtes et sections" correspond à <article>. Ce <article> est ensuite divisé en plusieurs <section>, y compris site header, site footer et la structure du document. L'article lui-même comporte un en-tête, tout comme chacune des sections.

Un <section> n'est pas un repère, sauf s'il possède un nom accessible. S'il possède un nom accessible, le rôle implicite est region. Les rôles de repère doivent être utilisés avec parcimonie pour identifier les sections globales plus importantes du document. Si vous utilisez trop de rôles de repère, vous risquez de créer du "bruit" dans les lecteurs d'écran, ce qui rend difficile la compréhension de la mise en page globale. Si votre <main> contient deux ou trois sous-sections importantes, il peut être utile d'inclure un nom accessible pour chacune d'elles.<section>

Titres : <h1>-<h6>

Il existe six éléments d'en-tête de section : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Chacun représente l'un des six niveaux de titres de section, <h1> étant le niveau de section le plus élevé ou le plus important, et <h6> le plus bas.

Lorsqu'un titre est imbriqué dans une bannière de document <header>, il s'agit du titre de l'application ou du site. Lorsqu'il est imbriqué dans <main>, qu'il soit imbriqué ou non dans un <header> dans <main>, il s'agit de l'en-tête de cette page, et non de l'ensemble du site. Lorsqu'il est imbriqué dans un <article> ou un <section>, il s'agit de l'en-tête de cette sous-section de la page.

Il est recommandé d'utiliser les niveaux de titre de la même manière que dans un éditeur de texte : en commençant par un <h1> comme titre principal, avec <h2> comme titres pour les sous-sections et <h3> si ces sous-sections ont des sections. Évitez de sauter des niveaux de titre. Vous trouverez un article intéressant sur les titres de section ici.

Certains utilisateurs de lecteurs d'écran accèdent aux titres pour comprendre le contenu d'une page. À l'origine, les titres étaient censés structurer un document, tout comme MS Word ou Google Docs peuvent générer un plan basé sur les titres. Toutefois, les navigateurs n'ont jamais implémenté cette structure. Bien que les navigateurs affichent les titres imbriqués avec des tailles de police de plus en plus petites, comme le montre l'exemple suivant, ils ne prennent pas réellement en charge les plans.

Vous avez maintenant suffisamment de connaissances pour décrire MachineLearningWorkshop.com :

Présentation de <body> sur MLW.com

Voici le plan du contenu visible du site de l'atelier de machine learning :

Comme aucun contenu n'est autonome ni complet, <section> est plus approprié que <article>. Bien que chaque section ait un titre, aucune ne mérite un <footer>.

Cela devrait aller de soi à ce stade, mais n'utilisez pas les titres pour mettre du texte en gras ou en grand. Utilisez plutôt le CSS. Si vous souhaitez mettre en avant du texte, il existe également des éléments sémantiques pour le faire. Nous aborderons ce point et remplirons la majeure partie du contenu de la page lorsque nous parlerons des bases du texte, après avoir examiné les attributs plus en détail.

Vérifiez vos connaissances

Testez vos connaissances sur les titres et les sections.