Les éléments tels que <header></header>, <footer></footer>, <section></section>/, <nav></nav> et <article></article> fonctionnent désormais davantage comme des éléments <div></div> classiques avec HTML5. Ces éléments principaux agissent comme une macrostructure sémantique HTML pour aider à maintenir les balises HTML communes supplémentaires dans un ordre et à un endroit appropriés.
<article></article> et <section></section>
Ces deux éléments peuvent souvent être utilisés pour gérer les mêmes sections et être utilisés de manière interchangeable. Cependant, il est important de garder à l’esprit que la balise <article></article> est utile parce qu’elle est réutilisable et elle est également considérée comme distribuable de manière indépendante. En revanche, une balise <section></section> est généralement utilisée pour regrouper plusieurs éléments ou sections de contenu.
L’en-tête d’un site Web se trouve généralement en haut du site. Cette section comprend souvent des métabalises, des mots clés et même des fichiers CSS importés ou des feuilles de style. L’en-tête peut également poser les bases nécessaires à la mise en page ou à la conception de votre site Web.
La balise <footer></footer> fonctionne comme la balise <header></header>, sauf que le pied de page se trouve généralement au bas de la page Web. Le bas de page d’un site Web comprend généralement des informations de contact, un plan du site et des liens supplémentaires, par exemple vers des réseaux sociaux, afin de renforcer la cohésion du site et d’améliorer le référencement.
<main></main>
Lorsque vous choisissez d’utiliser la balise <main></main>, vous indiquez le corps principal du texte ou du contenu de la mise en page d’un site Web. Utilisez uniquement la balise <main></main> pour contenir les paragraphes internes, le texte écrit, les images et le contenu interne de votre site Web. La balise <main></main> est toujours placée après la balise <header></header> et avant la balise <footer></footer> d’une page.
<nav></nav>
Le développement d’un site Web réussi nécessite une section de navigation accessible et mise à jour. Lorsque vous créez un site Web, quel qu’il soit, vous devez ajouter des liens de navigation pour aider les utilisateurs à parcourir efficacement votre site. L’utilisation de la balise <nav></nav> permet d’organiser la section particulière d’un site destinée aux liens de navigation. Les menus de navigation, les tableaux et les index sont tous possibles avec la balise sémantique HTML5 <nav></nav>.
Si vous créez du contenu et que vous souhaitez insérer des images dans du texte, vous pouvez utiliser les balises <figure></figure> et <figcaption></figcaption>. La balise <figure></figure> enveloppe les images autour de votre contenu textuel sans aucun effort supplémentaire. Si vous souhaitez ajouter une légende à l’image que vous insérez dans votre page, vous pouvez utiliser la balise <figcaption></figcaption>. Vous trouverez ci-dessous un exemple d’utilisation des balises <figure></figure> et <figcaption></figcaption> :
<figure><img src="http://www.yourimage.com"><figcaption>Ceci est ma légende d’image !</figcaption></figure>
<aside></aside>
L’utilisation d’un élément <aside></aside> permet d’incorporer du texte qui n’a pas sa place dans les sections principales de votre site Web, mais qui doit tout de même apparaître dans une zone ou une section déterminée.
<time></time>
La balise <time></time> est utile si vous souhaitez ajouter une date automatique à une section ou une zone de votre site Web.
Une liste complète de toutes les balises HTML est disponible directement sur le site Web officiel de W3 Schools.
