-le sable -s si, comme vous ne devez pas les abandonner complètement. Ils restent le meilleur choix pour grouper du contenu uniquement à des fins de style et dans d'autres cas de dernier recours..

Sémantique textuelle en HTML5

HTML5 a introduit de nombreux nouveaux éléments sémantiques permettant une organisation facile du contenu. Ils vous aident non seulement à organiser le contenu au niveau de l'ensemble du document (voir les détails dans la section suivante), mais aussi à l'intérieur de blocs de texte, comme des balises inline.

Les balises sémantiques de niveau texte les plus populaires sont probablement et , mais ils existaient aussi avant HTML5. Parmi les nouveaux éléments sémantiques en ligne, on trouve par exemple le , tag pour heures lisibles par l'homme, et pour texte surligné.

Voir cette liste pour tous les éléments sémantiques de niveau texte actuellement utilisés.

Structure du document en HTML5

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

En HTML5, l'algorithme de traçage a été amélioré par de nouveaux éléments de sectionnement, à savoir:

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

Il y a un cinquième élément de sectionnement dans HTML5, mais ce n'est pas nouveau, c'est le étiquette. 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 sectionnement (corps, article, section, navigation et aparté) peut avoir ses propres en-tête et pied de page.

Astuces pour le contenu sémantiquement structuré

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 étiquette.

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

3. Chaque section a sa propre hiérarchie de titres. Chacune d’elles (même la partie la plus intérieure imbriquée) peut avoir une h1 étiquette.

4. Bien que le contour du document soit principalement défini par les 5 éléments de sectionnement, il doit également comporter des en-têtes appropriés pour chaque section..

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

6. Les sections définies par le

, et le les balises n'appartiennent pas au contour principal du document HTML, elles ne sont généralement pas restituées initialement par les technologies d'assistance.

7. Chaque section (corps, section, article, à part, nav) peut avoir son propre

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

Exemple: un contour sémantique

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

Et voici le code avec le bon découpage sémantique:

  
 
Bienvenue sur notre site web!
 
Voici notre logo et 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
 
Quelques 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 de les utiliser ou non. fortement recommandé de toujours inclure un titre pour chaque section, sinon la section sera “Sans titre” dans le plan du document.

Heureusement, il existe de nombreux excellents outils sur Internet qui nous permettent de vérifier le plan du document. Cette fois, nous allons utiliser l'outil Outliner de html5.org..

Si nous insérons notre extrait de code dans le formulaire fourni par l’outline, puis cliquez sur le bouton “Décrivez cette!” bouton, nous verrons le résultat suivant:

C'est le aperçu du document de notre exemple de code, C'est ainsi que les moteurs de recherche le voient et que les lecteurs d'écran le lisent à leurs utilisateurs malvoyants. C'est sémantique, bien structuré, et il n'y a pas de méchant “Sans titre” sections en elle.

Si vous voulez voir à quoi ressemble une section sans titre dans l’outliner, supprimez quelques balises de titre dans le code de l’exemple..

Autres aspects de la sémantique Web

Les balises HTML sémantiques et les contours de document ne constituent 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..