Les balises sémantiques en HTML5
- Episode N° 12
- Difficulté intermédiaire
- Publié le 05/05/2020 par Ronan HELLO
- Dernière mise à jour le 21/12/2023
Dans cet épisode nous allons parler de balises sémantiques, de structure de page, de structure de contenu dans le but d’organiser au mieux votre code pour concevoir de pages web optimisées, le tout en respectant les dernières normes HTML 5 en vigueur.
Qu’est-ce qu’une balise sémantique ?
Une balise sémantique est une balise qui donne une indication sur le contenu qu’elle entoure. Comprenez que les balises <div> ou <span> ne peuvent donner aucune indication sur les éléments qu’elles contiennent du fait que la documentation HTML ne donne pratiquement aucune limite au type de contenu possible entre ces balises, ce ne sont donc pas des balises sémantiques.
Certaines balises plus récente comme les balises <header>, <footer> ou encore <article> ont alors été ajouté à HTML pour permettre un découpage plus précis de votre page web en délimitant des zones spécifiques. Le fait de baliser votre document HTML va permettre aux robots d’indexations de mieux interpréter votre page web, et donc de cibler le réel contenu que vous souhaitez mettre en avant. L’un des autres atouts de ce nouveau type de balisage, est le fait qu’il permette une meilleure accessibilité des contenus pour les personnes nécessitant des logiciels de lecture de site pour consulter le web.
Pour vous qui allez devoir incorporer ces balises dans vos pages, comprenez qu’elles permettent de mieux structurer votre code et donc qu’il sera plus pratique de s'y retrouver, quelques mois ou semaines plus tard.
La sémantique a donné un rôle précis à certaines nouvelles balises. Ce sont ces nouveaux éléments qu’il vous faut apprendre afin de correctement construire des sites web. C’est donc la fin des pages HTML intégralement codé à l’aide de la balise <div>, et le début des pages sémantiques (on en rit aujourd’hui en qualifiant les développeurs qui ne codent qu’avec des balises <div> d’atteint de “divite” ou pire, de “divite aiguë” pour les plus téméraires).
Les balises de structure de page
Pour y voir plus clair dans la foule des balises sémantiques, j’ai décidé de regrouper ces contenus en deux parties, premièrement les balises de délimitations de zone dans une page, que nous allons aborder ici, et ensuite les balises sémantiques de contenu, que nous allons voir dans un second temps.
Il faut savoir que lorsque l’on entend parler de sémantique, on pense généralement uniquement aux balises de structure et non de contenu, mais l’ensemble des balises listées dans cet épisode permettent de donner un sens aux éléments qu’elles contiennent, et donc aux pages web.
Nous allons voir dans un premier temps, les sept balises sémantiques ajoutée à HTML5 permettant un meilleur balisage de la structure d’une page.
L'entête du site avec <header>
Sur un site internet, on peut observer la partie haute, appelée ‘entête’ ou ‘header’ en anglais, que l’on retrouve sur l’ensemble des pages du site. Cette zone peut alors être définie à l’aide de la balise <header>. De manière générale, on retrouvera dans cette zone le logo, et au minimum, la navigation principale du site.
La balise <header> peut apparaître plusieurs fois sur la page, elle peut également être utilisée pour délimiter l’entête d’un article de blog ou d’une section par exemple. Je vous conseille cependant de conserver une structure simple pour débuter et de n’utiliser la balise <header> que pour délimiter l’entête générale du site web. Une balise <header> ne peut pas être contenue dans une autre balise <header>.
Les menu de navigation avec <nav>
Dans la balise <header> vu précédemment, nous pouvons ajouter une zone servant à délimiter la navigation principale du site web. Cette zone peut être définie à l’aide de la balise sémantique <nav>. Il faut tout de même savoir que la balise <nav> n’est pas forcément placée dans le header d’un site, on peut la retrouver n’importe où et à plusieurs endroits de la page comme par exemple dans le footer ou dans une barre latérale de contenu (sidebar).
Le contenu principal avec <main>
Maintenant que nous avons vu les deux balises permettant de structurer la partie haute du site, nous allons nous intéresser au contenu principal de la page. La balise <main> sert à définir la zone (souvent grande) de votre page qui possède le contenu utile de la page. Dans l'idéal, le contenu de la balise <main> devrait être unique à la page. C’est dans cette balise que vous allez coder la majorité du contenu de votre site web. De manière générale, on conseille d’utiliser une seule balise <main> par page, mais il est possible d’en avoir plusieurs en parallèle, à condition de n’en afficher qu’une seule à la fois (à l’aide de l’attribut hidden).
Les contenu indépendants avec <article>
Le contenu éditorial de votre site peut être balisé à l’aide de la balise <article>. Cette balise va permettre de signaler aux robots d’indexation quel éléments sont en lien avec le sujet de la page. Vous pouvez glisser dans la balise <article>, le titre, les informations sur l’auteur ou la date de publication, la catégorie, le corps de l’article, et les articles annexes d’une même thématique. La bonne tenu de la balise article va également dépendre de l’objectif de votre site web. Cette balise a d’autant plus d’importance sur un site e-commerce, un site d’actualité ou un blog. Si vous souhaitez un exemple réel, vous pouvez regarder comment est conçu la structure de cette page.
Créer un découpage plus précis avec <section>
Le contenu de notre site présent dans une des balises <main> ou <article> peut être plus ou moins complexe, c’est pour cela qu’il est important de correctement structurer le contenu principal de la page en plusieurs zones. Pour cela, il existe la balise <section> permettant un découpage plus thématique que les balises <main> et <article> vues précédemment.
Chaque nouvelle balise <section> indique aux robots d’indexations une variétés de contenu différents pour une même page. Là encore n’hésitez pas à inspecter des sites web à l’aide des outils pour développeurs de votre navigateurs, afin de bien comprendre la structure des pages. Il est possible d’avoir un découpage encore plus précis en utilisant cette fois la balise générique <div> (pour division) et <span> (pour ‘espace’ / ’zone’) à l’intérieur des sections. Ce n’est pas parce qu’il existe maintenant beaucoup plus de balises de structure qu’il ne faut plus utiliser la balise <div>, cette dernière reste toujours extrêmement utile et constitue souvent la majorité de la structure d’une page.
Le contenu annexe avec <aside>
Pour certaines pages, il est possible de proposer un encart de contenu non relié directement au contenu principal de la page, vous pourrez alors encadrer ce contenu à l’aide de la balise <aside> tout simplement. La balise <aside> est souvent utilisée pour délimiter des sidebars (les barres latérales de contenu annexes que l'on retrouve souvent sur des blogs), ou des éléments complémentaire au contenu principal de la page. Il n'y a pas de règle quant à l’endroit ou utilise cette balise, libre à vous de choisir en fonction de votre site web.
Le pied de page avec <footer>
La septième et dernière balise sémantique de structure de page est <footer>, cette balise sert principalement à délimiter la pied de page. On retrouvera alors souvent cette balise à côté de la balise <main>. Dans le footer on insère en général des liens de navigation, le logo du site et le lien vers les mentions légales. On peut également placer des balises <nav> dans le footer afin de délimiter des zones de navigation secondaire.
On peut également utiliser la balise footer pour baliser une fin d’article ou de section, de la même manière que le fait le header. On pourra alors y placer les crédits et les informations annexes ayant une importance moindre que le contenu principal.
Les balises de structure de contenu
Tout comme pour la structure plus générale d’une page vu précédemment, il existe un balisage HTML sémantique plus précis pour baliser le contenu textuel. Il faudra alors correctement choisir chaque balise lorsque vous aurez l’occasion de pouvoir en placer. Un bon balisage sémantique améliore la compréhension de votre contenu par les robots d’indexations des moteurs de recherche, vous devez donc essayer d’avoir le balisage le plus détaillé possible. Pour cela, nous allons voir une liste de balises qu’il peut être intéressant d’utiliser dans vos pages pour consolider sa structure.
Je ne citerai pas ici les balises standards comme les balises <p>, <a>, <ul>, <strong> etc… mais bien entendu, elles font également partie de la sémantique de votre page. Ici nous allons lister les balises qui semblent moins évidente à mettre en place et que nous n’avons pas déja vues.
Les titres avec le balisage <h1> à <h6>
On reparle ici des balises de titre car oui, elles jouent un rôle dans la compréhension de votre page par les robots et votre navigateur. La balise <h1> indique un titre de très grande importance, on utilisera souvent cette balise pour placer le titre de la page. On peut ensuite utiliser les balise <h2> afin de donner une structure par thématique, plus grossière, dans la page, puis des balises <h3> et <h4> pour détailler chaque thématique. On utilise assez peu les balises <h5> et <h6> du fait qu’on ait rarement besoin d’autant de détailler un contenu.
Les listes de descriptions <dl> <dt> et <dd>
On peut créer des listes comme nous avons déjà vu à l’aide des balises <ul> et <li>, mais ici nous parlons de liste descriptions définies à l’aide des balises <dl> pour ‘description list’, qui contiennent des éléments balisé avec <dt> pour ‘description title’ et <dd> pour ‘description définition’ en anglais.
Cet ensemble de balises permet de structurer une liste de description, souvent utile pour détailler des mots complexes ou créer un glossaire sur un site web. Voici un exemple d’une liste de description :
Les citations avec <blockquote> et <cite>
Lorsque vous souhaitez afficher une citation d’une célébrité ou d’un ouvrage, vous pouvez utiliser la balise <blockquote> qui servira à encadrer la citation. On balisera le nom et la source à l’aide de la balise <cite> à l’intérieur même de la balise <blockquote> comme dans l’exemple ci-dessous :
Baliser une adresse avec <address>
Dans votre footer ou votre page de contact, il peut être intéressant d’afficher l’adresse locale de votre entreprise. Pour baliser au mieux votre adresse dans la page, il existe la balise HTML <address>, son usage est simple, il suffit d’encadrer les quelques lignes ou mots de votre adresse avec cette balise et le tour est joué !
<address>16 rue du centre-ville 44000 NANTES, France</address>
Afficher une temporalité avec <time>
Lorsque l’on souhaite afficher une temporalité, que ce soit la date de publication d’un article ou la date à venir d’un événement présent affiché sur votre site, il peut être judicieux de baliser la date ou l’heure avec la balise <time>. La balise <time> possède un attribut datetime qu’il faudra remplir avec l’heure dans un format numérique, en revanche, vous êtes libre du format à afficher à l’utilisateur entre les balise <time> et </time>. Voici un exemple d’utilisation courante :
<time datetime="15-03-2020 16:30:00">Lundi 15 Mars à 16h30</time>
Le texte affiché sera ‘Lundi 15 Mars à 16h30’, mais les robots liront 15-03-2020 16:30:00, ce qu’ils peuvent comprendre très simplement. On retrouvera un comportement similaire avec la balise suivante.
Afficher une donnée générique avec <data>
Lorsque votre page contient des données génériques à afficher, comme le nombre de client convertis par votre logiciel ou le nombre d’inscrits à votre newsletter, vous pouvez utiliser la balise <data> afin de transcrire cette donnée proprement. La balise <data> à un attribut value qu’il faudra renseigner avec la valeur souhaitée, qui devra être interprétée par les robots d’indexations. La véritable valeur sera alors détachée de l’ensemble textuel compris dans la balise.
<data value="10000">10000 inscrits à la newsletter</data>
Le texte affiché est alors ‘10000 inscrits à la newsletter’, mais les robots peuvent facilement lire 10000.
Les exposants <sup> et indices <sub>
La balise <sup> est utilisé pour afficher un caractère en exposant, et la balise <sub> pour afficher le contenu en indice. C’est simple, c’est clair, pas besoin d’en écrire des tartines.
<p>Cette bombonne de 4m<sup>3</sup> contient du CO<sub>2</sub></p>
(Oui j’ai trouvé une phrase qui fait les deux).
Formater du code avec <code> et <pre>
Des balises peu utilisées, mais dont je me sers très régulièrement du fait de mon activité, sont les balises <pre> et <code>. Ces deux balises vous permettent d’afficher du code dans une page web avec un style appliqué par le navigateur (...…. oui je sais, on parle structure et non de design en HTML, mais bon… c’est un effet appliqué relativement utile). Par exemple beaucoup des lignes de codes présentés dans cette formation sont encadrés de balise <code>.
La balise <pre> quant à elle permet de conserver les espaces créé dans le fichier HTML. En clair, un retour à la ligne dans le document HTML en provoquera également un visuellement, ce qui n’est habituellement pas le cas avec les autres balises comme <p> ou <h1> qui nécessite de placer une balise <br> pour changer de ligne.
Aller plus loin avec les microdonnées
Si vous avez correctement balisé votre page web, sachez qu’il existe un moyen d’aller encore plus loin en utilisant des microdonnées. Les microdonnées sont des données additionnelles que l’on peut ajouter à une page web pour lui donner un sens. Il en existe une multitude, comme par exemple pour détailler un article ou une vidéo, mais nous verrons ça dans une formation plus adaptée à l’usage des microdonnées, c’est un poil trop tôt pour nous ! Leur usage est souvent assimilé au référencement naturel, nous en parlerons donc en en temps voulu.
Si vous êtes curieux, vous pouvez quand même rechercher ‘microdonnées’ ou ‘Schema.org’ sur votre moteur de recherche.
Vous devez être connecté pour pouvoir commenter. Se connecter