En-têtes et sections

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

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.

En choisissant les bons éléments pour la tâche au fur et à mesure que vous codez, vous n'aurez pas à refactoriser ou à mettre en commentaire votre code HTML. Si vous réfléchissez à l'élément adapté à la tâche, vous choisirez le plus souvent le bon élément. 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, une fois que vous aurez découvert tous les éléments, vous choisirez généralement le bon élément sans trop d'efforts, voire sans aucun effort supplémentaire.

Site <header>

Tout d'abord, vous devez créer un en-tête de site. Commencez par un balisage non sémantique, puis progressez vers une bonne solution afin de 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 l'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 donner une apparence correcte à (presque) n'importe quel balisage. Mais utiliser l'élément non sémantique <div> pour tout crée en réalité 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 balise de fermeture </div> afin d'indiquer quelle balise d'ouverture chaque balise </div> ferme.

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 quel <div> 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 à 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 point de repère. Sa sémantique varie en fonction de l'endroit où il est imbriqué. Lorsque l'élément <header> est de niveau supérieur, 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 élément <header> est imbriqué dans <main>, <article> ou <section>, il l'identifie simplement comme l'en-tête de cette section et n'est pas un point de repère.

L'élément <nav> identifie le contenu comme étant de la navigation. Comme cet élément <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 élément <article> ou <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> évite 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 hooks id et class. Les sélecteurs CSS peuvent avoir une faible spécificité. 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 et sans classes ni ID. Lorsque vous utilisez du code 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 point de repère dépend de l'endroit où il est imbriqué. Lorsqu'il s'agit du pied de page du site, il s'agit d'un point de repère qui doit contenir les informations de pied de page que vous souhaitez voir apparaître sur chaque page, telles qu'une déclaration de droits d'auteur, des coordonnées et des liens vers vos règles de confidentialité et de gestion des cookies. Le role implicite pour le pied de page du site est contentinfo. Sinon, le pied de page n'a pas de rôle implicite et n'est pas un point de 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 y a deux pieds de page : un dans un <article> et un au niveau supérieur. Le pied de page de premier niveau est un point de repère avec le rôle implicite de contentinfo. L'autre pied de page n'est pas un point de 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 de site avec un rôle contentinfo implicite. Chaque article de blog peut également avoir 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 niveau supérieur, et que tous les autres pieds de page sont liés aux articles 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 point de repère. Si le post s'affiche seul, en fonction du balisage, ce pied de page peut être mis en avant.

Les pieds de page contiennent souvent des coordonnées, encapsulées dans <address>, l'élément d'adresse de contact. Il s'agit d'un élément qui n'est pas très bien nommé ; il est utilisé pour inclure les coordonnées de personnes ou d'organisations, et non les adresses postales physiques.

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

Structure du document

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

Une mise en page avec un en-tête, deux barres latérales et un pied de page est appelée mise en page du Saint Graal. 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 du lecteur 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 n'y a qu'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>

La balise <aside> est destinée au contenu qui est indirectement ou tangentiellement lié au contenu principal du document. Par exemple, ce document porte sur le langage HTML. Pour une section sur la spécificité des sélecteurs CSS pour les trois exemples d'en-tête de site (div, role et semantic), l'aparté tangentiellement lié pourrait être contenu dans un <aside>. Comme la plupart des éléments, l'<aside> serait probablement présenté dans une barre latérale ou une zone de texte. <aside> est également un point de repère, avec le rôle implicite de complementary.

<article>

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

Un <article> représente une section de contenu complète ou autonome qui est, en principe, réutilisable indépendamment. Considérez un article comme un article de journal. Dans la presse écrite, un article d'actualité sur Jacinda Ardern, Première ministre de Nouvelle-Zélande, peut n'apparaître que dans une seule section, par exemple les actualités internationales. Sur le site Web du journal, ce même article d'actualité peut apparaître sur la page d'accueil, dans la section politique, dans la section actualités d'Océanie ou d'Asie-Pacifique, et, selon le sujet de l'actualité, dans les sections sports, style de vie ou technologie, par exemple. L'article peut également apparaître sur d'autres sites, comme Pocket ou Yahoo Actualités.

<section>

L'élément <section> permet d'englober des sections autonomes génériques d'un document lorsqu'il n'y a pas d'élément sémantique plus spécifique à utiliser. À de rares exceptions près, les sections doivent comporter un titre.

Reprenons l'exemple de Jacinda Ardern. Sur la page d'accueil du journal, la bannière inclut le nom du journal, suivi d'un seul élément <main>, divisé en plusieurs éléments <section>, chacun avec un en-tête, comme "Actualités internationales" et "Politique". Dans chaque section, vous trouverez une série d'éléments <article>. Chaque <article> peut également contenir un ou plusieurs éléments <section>. Si vous regardez cette page, l'ensemble de la partie "en-têtes et sections" correspond à l'<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 élément <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. L'utilisation d'un trop grand nombre de rôles de repère peut créer du "bruit" dans les lecteurs d'écran, ce qui complique 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 chaque <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 d'en-têtes de section, <h1> étant le niveau de section le plus élevé ou le plus important, et <h6> le plus bas.

Lorsqu'un en-tête est imbriqué dans une bannière de document <header>, il s'agit de l'en-tête de l'application ou du site. Lorsqu'il est imbriqué dans <main>, qu'il soit ou non imbriqué 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 élément <article> ou <section>, il sert d'en-tête pour 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. Voici un article intéressant sur les titres de section.

Certains utilisateurs de lecteurs d'écran accèdent aux titres pour comprendre le contenu d'une page. À l'origine, les titres étaient censés décrire un document, tout comme MS Word ou Google Docs peuvent produire un plan basé sur les titres, mais les navigateurs n'ont jamais implémenté cette structure, et l'algorithme de plan proposé a été supprimé de la spécification HTML. Historiquement, les navigateurs affichaient les éléments <h1> imbriqués dans des éléments de sectionnement avec des tailles de police plus petites. Les navigateurs modernes ont supprimé ces styles par défaut et ne sont pas compatibles avec la structure automatique des documents.

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

Présentation de la <body> de MLW.com

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

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

Cela va sans dire, mais n'utilisez pas de titres pour mettre du texte en gras ou en grand. Utilisez plutôt du code CSS. Si vous souhaitez mettre en valeur du texte, il existe également des éléments sémantiques pour cela. Nous allons aborder ce point et remplir la majeure partie du contenu de la page lorsque nous parlerons des principes de base 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.