-s et -s cependant, car vous n'avez pas à les abandonner complètement . Ils sont toujours le meilleur choix pour regrouper le contenu uniquement à des fins stylistiques et dans d'autres cas de dernier recours.

Sémantique du texte en HTML5

HTML5 a introduit de nombreux nouveaux éléments sémantiques qui facilitent l'organisation du contenu. Ils vous aident non seulement à organiser le contenu au niveau du document entier (voir les détails dans la section suivante), mais aussi à l'intérieur des blocs de texte, en tant que balises en ligne.

Probablement les étiquettes sémantiques au niveau du texte les plus populaires sont et , mais ils existaient aussi avant HTML5. Parmi les nouveaux éléments sémantiques inline on peut trouver par exemple le , tag pour les dates-heures lisibles par l'homme, et pour le texte en surbrillance .

Voir cette liste pour tous les éléments sémantiques au niveau du texte qui sont actuellement utilisés.

Document Outline en HTML5

Le plan du document est la structure d'un document HTML. Il montre comment les éléments sont liés les uns aux autres. L'aperçu du document a été généré uniquement en mappant les éléments, tels que les en-têtes, les titres de tableaux, les titres de formulaires et d'autres dans les versions antérieures de HTML, telles que HTML4.01 et XHTML.

En HTML5, l'algorithme de décodage a été amélioré par de nouveaux éléments de sectionnement, à savoir:

• pour les sections regroupées autour d'un thème spécifique
• pour des compositions complètes ou indépendantes telles qu'un article de blog ou un widget
• pour les blocs de navigation
• pour un contenu complémentaire tel que les barres latérales .

Il y a un cinquième élément de section en HTML5, mais ce n'est pas nouveau, c'est le marque. le

et Les balises sont également nouvelles, mais elles ne génèrent pas de nouvelles sections dans un document, elles divisent le contenu à l'intérieur des sections. Cela signifie que chaque élément de section (corps, article, section, nav et de côté) peut avoir son propre en-tête et pied de page .

Conseils pour le contenu structuré sémantiquement

Si nous voulons créer un plan de document bien structuré, nous devons prêter attention aux règles suivantes:

1. L'élément de sectionnement le plus externe est toujours le marque.

2. Les sections en HTML5 peuvent être imbriquées.

3. Chaque section a sa propre hiérarchie de titres. Chacun d'entre eux (même la section imbriquée la plus interne) peut avoir une étiquette h1 .

4. Bien que l'esquisse du document soit principalement définie par les 5 éléments de sectionnement, elle nécessite également des en-têtes appropriés pour chaque section.

5. C'est toujours le premier élément de titre (qu'il s'agisse de h1 ou d'une étiquette de titre de rang inférieur) qui définit le titre de la section donnée. Les balises de titre suivantes à l'intérieur de la même section doivent être relatives à cela. (Si le premier titre est un h3 à l'intérieur d'un élément de sectionnement, ne mettez pas un h3 après cela.)

6. Les sections définies par le

, et le Les tags n'appartiennent pas au contour principal du document HTML, ils ne sont généralement pas rendus initialement par les technologies d'assistance.

7. Chaque section (corps, section, article, de côté, nav) peut avoir leur propre

et tags, qui définit l'en-tête (tel que le logo, le nom de l'auteur, les dates, les méta-infos, etc.) et le pied de page (copyright, notes, liens, etc.) de cette section.

Exemple: un aperçu sémantique

Voyons un exemple de plan de document sémantique pour voir plus clairement comment cela fonctionne. Notre exemple de code aboutira à la structure de document suivante:

Et voici le code avec sectionnement sémantique approprié:

 Bienvenue sur notre site! 
Voici notre logo et notre slogan.
 Titre de l'article 
Sous-titre de l'article 
Première partie logique (par exemple "Théorie") 
Paragraphe 1 de la première section
Certains autres sous-titres dans la première section 
Paragraphe 2 de la première section
Deuxième partie logique (par exemple "Pratique") 
Paragraphe 1 de la deuxième section
Paragraphe 2 de la deuxième section

Si vous regardez l'extrait de code ci-dessus, vous verrez que les en-têtes et les pieds de page sont facultatifs, nous pouvons choisir librement si nous voulons les utiliser ou non, mais il est fortement recommandé d'inclure un en-tête pour chaque section . section sera "Sans titre" dans le document.

Heureusement, il existe de nombreux outils sur Internet qui nous permettent de vérifier les grandes lignes du document, cette fois nous utiliserons l'outil Outliner de html5.org.

Si nous insérons notre extrait de code dans le formulaire fourni par l'outliner, et que nous cliquons sur le bouton "Outline this!", Nous verrons le résultat suivant:

Ceci est l' aperçu du document de notre exemple de code, c'est ainsi que les moteurs de recherche le voient, et les lecteurs d'écran le lisent à leurs utilisateurs malvoyants. C'est sémantique, bien structuré, et il n'y a pas de mauvaises sections "Untitled" dedans.

Si vous voulez voir à quoi ressemble une section Untitled dans l'Outliner, supprimez simplement les balises d'en-tête dans l'exemple de code.

Autres aspects de la sémantique Web

Les balises HTML sémantiques et les contours de documents ne représentent qu'une petite partie de la sémantique Web. Le contenu d'une page Web peut être rendu encore plus significatif à l'aide du protocole d'accessibilité WAI-ARIA et de données structurées pouvant être utilisées avec le protocole RDFa, les microdonnées ou le balisage JSON-LD.