Dans la dernière section, vous avez appris comment, même si vous ne savez pas ce que signifient les mots d'une page, lorsque des éléments sémantiques fournissent une structure significative au document, d'autres (le moteur de recherche, les technologies d'assistance, un futur responsable de la maintenance, un nouveau membre de l'équipe) comprennent le plan du document.
Dans cette section, vous découvrirez la structure du document, vous récapitulerez les éléments de la section précédente et vous baliserez le plan de votre application.
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.
Maintenant que vous comprenez la sémantique du balisage et que vous comprenez pourquoi il est important de choisir le bon élément, une fois que vous avez découvert tous les différents éléments, vous choisissez généralement le bon élément sans effort supplémentaire, voire aucun.
Site <header>
Créons un en-tête de site. Vous commencerez par utiliser le balisage non sémantique, puis vous trouverez une solution adaptée afin de découvrir les avantages de la section HTML et des éléments de titre.
Si vous accordez peu ou pas de considération à la sémantique de notre en-tête, vous pouvez utiliser du 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 faire en sorte que le balisage soit correct. Toutefois, l'utilisation du <div> non sémantique pour tout crée du travail supplémentaire. Pour cibler plusieurs <div>s avec CSS, vous finissez par utiliser des ID ou des classes pour identifier le contenu. Le code inclut également un commentaire pour chaque </div> de fermeture afin d'indiquer quelle balise d'ouverture chaque </div> a fermé.
Bien que les attributs id et class fournissent des hooks pour le style et JavaScript, ils n'ajoutent aucune valeur sémantique au lecteur d'écran et (dans la plupart des cas) aux moteurs de recherche.
Vous pouvez inclure des attributs role pour fournir la 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 cela ajoute quand même des commentaires pour identifier l'élément <div> que chaque </div> ferme.
Si vous maîtrisez le langage HTML, il vous suffit de réfléchir à l'objectif du contenu. Vous pouvez ensuite écrire ce code sémantiquement 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 points de repère 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. La sémantique diffère selon l'endroit où il est imbriqué. Lorsque <header> est de niveau supérieur, il s'agit du banner du site, un rôle de repère, que vous avez peut-être noté dans le bloc de code role. Lorsqu'un élément <header> est imbriqué dans <main>, <article> ou <section>, il l'identifie simplement comme en-tête de cette section et n'est pas un point de repère.
L'élément <nav> identifie le contenu en tant que navigation. Comme cet élément <nav> est imbriqué dans l'en-tête du site, il s'agit de la navigation principale du site. Si elle était imbriquée dans un <article> ou un <section>, il s'agirait de navigation interne pour cette section uniquement. À l'aide d'éléments sémantiques, vous avez créé un modèle d'objet d'accessibilité (AOM) pertinent. L'AOM permet au lecteur d'écran d'informer l'utilisateur que cette section consiste en un bloc de navigation majeur qu'il peut parcourir ou ignorer.
Avec les balises de fermeture </nav> et </header>, il n'est plus nécessaire d'identifier l'élément que chaque balise de fin ferme par des commentaires. De plus, l'utilisation de balises différentes pour différents éléments évite d'avoir à utiliser des hooks id et class. Les sélecteurs CSS peuvent être peu précis. 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 classe ni identifiant. Si vous utilisez du code HTML sémantique, vous n'avez pas besoin de le faire.
Site <footer>
Codez maintenant le pied de page du site.
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>
Comme pour <header>, le fait que le pied de page soit ou non un point de repère dépend de son emplacement d'imbrication. Le pied de page du site correspond à un point de repère et doit contenir les informations souhaitées sur chaque page, telles que la déclaration sur les droits d'auteur, des coordonnées, ainsi que des liens vers vos politiques de confidentialité et de cookies. La valeur 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 <header> et <footer> entre <header> et <footer>).
Cette capture d'écran comporte deux pieds de page: un dans un <article> et un de premier niveau. Le pied de page de premier niveau est un point de repère avec le rôle implicite contentinfo. L'autre pied de page n'est pas un point de repère. Chrome l'affiche sous la forme FooterAsNonLandmark et Firefox sous la forme section.
Cela ne signifie pas que vous ne devez pas utiliser <footer>. Imaginons que vous possédiez un blog. Le blog comporte un pied de page de site 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 sont liés aux articles dans lesquels ils sont imbriqués.
Lorsqu'un élément <footer> est un descendant d'un élément <article>, <aside>, <main>, <nav> ou <section>, il ne s'agit pas d'un point de repère. Si le message apparaît seul, selon le balisage, ce pied de page peut être mis en avant.
Les pieds de page vous permettent de trouver des coordonnées, encapsulées dans l'élément d'adresse de contact <address>. Il s'agit d'un élément peu nommé, qui sert à indiquer les coordonnées de personnes physiques ou d'organisations, et non des adresses postales.
<footer>
<p>©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 sont uniques dans la mesure où ils ne sont parfois que des éléments de repère ou de "section". Étudions à présent l'élément de section « temps plein » en examinant les mises en page de page les plus courantes:
Une mise en page composée d'un en-tête, de deux barres latérales et d'un pied de page est appelée mise en page du Saint Graal. Il existe de nombreuses façons de baliser ce contenu, notamment:
<body>
<header>Header</header>
<nav>Nav</nav>
<main>Content</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
Si vous créez un blog, vous trouverez peut-être 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>
Lorsqu'ils utilisent des éléments sémantiques, les navigateurs peuvent créer des arborescences d'accessibilité pertinentes, permettant ainsi aux utilisateurs de lecteurs d'écran de naviguer plus facilement. Ici, banner et contentinfo sont fournis via un site <header> et <footer>. 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>
Le <aside> désigne le contenu indirectement ou tangentiellement lié au contenu principal du document. Par exemple, cet article concerne le langage HTML. Dans la 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), le côté tangentiellement lié peut être contenu dans un <aside>. Comme dans la plupart des cas, <aside> sera probablement présenté dans une barre latérale ou une zone d'accroche. <aside> est également un point de repère, avec le rôle implicite complementary.
<article>
Nous avons ajouté deux éléments <article> au niveau de <main>. Ce n'était pas nécessaire dans le premier exemple où le contenu principal ne comportait qu'un seul 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 élément <article> imbriqué dans <main>.
Une <article> représente une section de contenu complète ou autonome qui est, en principe, réutilisable de manière indépendante. Pensez à un article comme à un article de journal. Un article de presse sur Jacinda Ardern, Première ministre de Nouvelle-Zélande, pourrait n'apparaître que dans une seule rubrique, peut-être dans le monde entier. Sur le site Web du journal, ce même article peut apparaître sur la page d'accueil, dans la section "Politique", dans la rubrique "Oceana" ou "Actualités Asie-Pacifique", et selon le thème de l'actualité, les rubriques "sports", "style de vie" ou "technologies". L'article peut également apparaître sur d'autres sites, tels que Pocket ou Yahoo News!
<section>
L'élément <section> permet d'englober les sections génériques d'un document lorsqu'il n'y a plus d'élément sémantique spécifique à utiliser. À quelques exceptions près, les sections doivent avoir un titre.
Pour reprendre l'exemple de Jacinda Ardern, sur la page d'accueil du journal, la bannière inclurait le nom du journal, suivi d'une seule <main>, divisée en plusieurs éléments <section>, chacun avec un en-tête, comme "Actualités mondiales" et "Politique". Chaque section comporte une série de <article>. Dans chaque <article>, vous pouvez également trouver un ou plusieurs éléments <section>. Si vous consultez cette page, l'intégralité 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 a un en-tête, tout comme chacune des sections.
Un <section> n'est un point de repère que si son nom est accessible. S'il possède un nom accessible, le rôle implicite est region. Les rôles de point de repère doivent être utilisés avec parcimonie, afin d'identifier des sections générales plus importantes du document. L'utilisation d'un trop grand nombre de rôles de points de repère peut générer du "bruit" dans les lecteurs d'écran. Il peut donc être difficile de comprendre la mise en page globale de la page si votre <main> contient deux ou trois sous-sections importantes, avec un nom accessible pour chaque <section>.
Titres: <h1>-<h6>
Il y a six éléments de titre de section: <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Chacun représente l'un des six niveaux de titre de section, <h1> étant le niveau de section le plus élevé ou le plus important, et <h6> le niveau le plus bas.
Lorsqu'un titre 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 imbriqué ou non dans un <header> de <main>, il s'agit de l'en-tête de cette page, et non de l'ensemble du site. Lorsqu'elle est imbriquée dans une <article> ou une <section>, elle correspond à 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: commencez par <h1> comme titre principal, avec <h2> pour les sous-sections et <h3> si ces sous-sections comportent des sections. Évitez de sauter les niveaux de titre. Vous trouverez ici 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 les grandes lignes d'un document, tout comme Microsoft Word ou Google Docs permettaient de créer un plan basé sur les titres. Toutefois, cette structure n'a jamais été mise en œuvre dans les navigateurs. Les navigateurs affichent les en-têtes imbriqués avec des tailles de police de plus en plus petites, comme illustré dans l'exemple suivant, mais ils ne prennent pas en charge les contours.
Vous disposez maintenant de suffisamment de connaissances pour décrire MachineLearningWorkshop.com:
Description des <body> de MLW.com
Voici les grandes lignes du contenu visible du site de l'atelier sur le machine learning:
Étant donné qu'aucun contenu n'est autonome et complet, <section> est plus approprié que <article>. Bien que chacun ait un titre, aucune section ne mérite une <footer>.
Cela va sans dire à ce stade, mais n'utilisez pas d'en-têtes pour mettre le texte en gras ou en gros caractères, utilisez plutôt CSS. Si vous souhaitez accentuer du texte, des éléments sémantiques permettent également de le faire. Nous aborderons ce point et compléterons la majeure partie du contenu de la page pendant que nous abordons les principes de base du texte, après avoir examiné plus en détail les attributs.
Testez vos connaissances
Testez vos connaissances sur les titres et les sections.
Quel est l'élément utilisé pour contenir la zone de votre site comprenant le logo ou le titre du site, et la navigation principale ?
<heading><header><title>Combien d'éléments <main> sont autorisés sur une page ?