Depuis l'arrivée de l'HTML5, de nouvelles balises de sémantiques font leur apparition afin d'une fois encore, améliorer l'accessibilité et le SEO.
Nous n'aurons probablement pas l'occasion d'approfondir la notion de SEO mais sachez que le SEO, pour Search Engine Optimization, est série de règle permettant d'optimiser son site afin qu'il apparaisse au mieux sur les moteurs de recherche.
La balise <header> est utilisée pour créer une zone de contenu en-tête en HTML. Il permet de définir une zone de contenu qui contient des informations telles que le titre du document, les liens de navigation ou une image d'entête.
Voici un exemple d'utilisation de la balise <header> :
<header>
<h1>Titre de ma page</h1>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</header>
La balise <nav> est utilisée pour créer une zone de contenu de navigation en HTML. Il permet de définir une zone de contenu qui contient des liens de navigation pour différentes sections de votre site.
Voici un exemple d'utilisation de la balise <nav> :
<nav>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</nav>
Il est important de noter que la balise <nav> doit contenir des éléments tels que des liens (<a>) pour créer des liens de navigation pour les différentes sections de votre site. Il est recommandé de placer cette balise dans l'en-tête de votre site pour une meilleure accessibilité pour les utilisateurs et pour les moteurs de recherche. Il est également possible d'utiliser des éléments tels que des listes (<ul> et <li>) pour organiser les liens de navigation et pour améliorer l'accessibilité.
La balise <article> est utilisée pour définir un contenu autonome en HTML. Il permet de définir un contenu qui peut être partagé ou réutilisé indépendamment des autres éléments de la page. Les articles peuvent être des articles de blog, des articles de presse, des messages de forum, etc.
Voici un exemple d'utilisation de la balise <article> :
<article>
<h2>Titre de l'article</h2>
<p>Texte de l'article</p>
</article>
On l'utilisera alors généralement pour des articles de blog ou des "cards" dans un listing de produit.
La balise <main> est utilisée pour définir le contenu principal d'une page web en HTML5. Il permet de définir une zone de contenu qui contient les informations les plus importantes de la page, qui sont spécifiques à cette page et qui peuvent être utilisées indépendamment des autres éléments de la page.
Il est important de noter que, contrairement à la balise article, la balise <main> ne doit apparaître qu'une seule fois par page, et qu'elle doit contenir du contenu qui est spécifique à cette page et qui est pertinent pour l'utilisateur. Il est donc important de ne pas inclure des éléments tels que des menus de navigation, des informations de pied de page ou des liens de partage qui sont répétitifs sur plusieurs pages dans la balise <main>.
Voici un exemple d'utilisation de la balise <main> :