Balises sémantiques
Un sens à la structure
Une balise sémantique est une balise qui ne fait, à proprement parler, rien de spécial. Ces balises ont toutefois un sens. Elles indiquent une certaine organisation. En général, ces balises indiquent par leur nom ce qu'elles contiennent. À première vu, ces balises ne semblent pas être utile, mais vous les utiliserez souvent. En effet, elles sont très pratique pour les lecteurs de site Web, pour les personnes ayant des handicaps de la vue ou encore pour l'analyse des sites Web par d'autres programmes. Dans cette page, nous verrons quelques balises sémantiques que vous devrez utiliser dans vos site Web.
Entête
La balise <header> contient l'entête d'une page Web ou parfois d'une section d'une page Web. Il ne faut pas confondre cette balise avec la balise <head>. Elle contient donc généralement le logo du site Web et son menu. Si vous inspectez ce site Web, vous remarquerez que la barre avec le logo et le menu sont contenu dans une balise <header>.
Pied de page
La balise <footer> contient le pied d'une page Web ou parfois d'une section d'une page Web. Elle contient donc généralement l'auteur du site Web, les informations de contact, des liens vers des documents connexes et souvent le ©copyright. Si vous inspectez ce site Web, vous remarquerez que la barre en bas du site Web avec le copyright et l'auteur du site Web est contenu dans une balise <footer>.
Contenu principal
La balise <main> contient le contenu principal d'une page Web. Cette balise ne devrait pas contenir de contenus qui se répète sur plusieurs pages, comme les barres de navigation, les entêtes ou les pieds de page. Cette balise contient le contenu principal de la page, peu importe son contenu. Si vous inspectez ce site Web, vous remarquerez que ce texte se retrouve éventuellement dans une balise <main>.
Menu de navigation
La balise <nav> contient généralement un menu de navigation d'un site Web. Cette balise contient généralement une liste <ul> de liens vers différentes pages de votre site Web et se retrouve souvent dans une balise <header>, <footer> ou ailleur où vous auriez pourriez avoir un menu de navigation. Si vous inspectez ce site Web, vous remarquerez que le menu dans l'entête et le menu dans la partie sur le côté du site Web sont tous 2 dans une balise <nav>.
Sections
La balise <section> contient une section du contenu de votre site Web. On retrouve souvent cette balise à l'intérieur de la balise <main> et elle doit contenir une balise <h?> au début de son contenu pour indiquer son titre. Si vous inspectez ce site Web, vous remarquerez que chaque titre, suivi d'un paragraphe d'explication se retrouve en fait dans une balise <section>.
Autres balises sémantiques
Il existe de nombreuses autres balises sémantiques, comme:
- <article>: Représente un article de magazine ou journal.
- <aside>: Représente un contenu d'à côté, tel qu'un menu sur le côté de votre page.
- <figure>: Représente un schémas ou une image avec du texte descriptif.
- <details>: Représente un terme ou du texte accompagné d'une description plus complexe.
- <time>: Représente un point dans le temps, tel qu'une date et heure.
- <kbd>: Représente une touche de votre clavier.
Nous n'entrerons pas dans les détails de ces balises sur cette page puisqu'elles sont un peu moins souvent utilisé. Je vous suggère donc fortement d'aller lire sur ces balises sémantiques sur le site web MDN pour avoir une idée des autres balises sémantiques qui existe ainsi que leur utilité.