Comment diviser sémantiquement le contenu d'une page?

La séparation sémantique du contenu est réalisée en utilisant les balises HTML5 appropriées.

Principales balises sémantiques :

• <header> : Introduction ou groupe d'éléments de navigation ou d'introduction. Contient souvent le titre du site, la navigation, le logo.
• <nav> : Bloc de liens de navigation.
• <main> : Contenu principal du document. Doit être unique sur la page (ne pas dupliquer dans le pied de page, l'en-tête, la barre latérale).
• <article> : Fragment de contenu autonome et indépendant (article, publication de blog, commentaire).
• <section> : Section séparée du document (chapitre, paragraphe, bloc de contenu sur la page d'accueil). Doit avoir un titre (<h1>-<h6>).
• <aside> : Partie du contenu indirectement liée au contenu principal (barre latérale, insertion avec citation, publicité).
• <footer> : Pied de page de la section ou du document. Contient généralement des informations sur l'auteur, les droits d'auteur, des liens vers des documents liés.
• <figure> : Contenu autonome (image, diagramme, tableau) pouvant être déplacé hors du flux principal du document sans perdre son sens. Souvent utilisé avec <figcaption>.
• <figcaption> : Légende pour l'élément <figure>.
• <mark> : Met en évidence (marque) le texte ayant une signification ou un intérêt particulier dans le contexte du texte environnant.
• <time> : Représente un moment ou une période de temps spécifique.

L'utilisation de balises sémantiques améliore l'accessibilité, le SEO et la maintenabilité du code. Les moteurs de recherche et les technologies d'assistance (lecteurs d'écran) comprennent mieux la structure de la page.