HTML5 : Les 9 éléments sémantiques essentiels à maîtriser

HTML5 représente la version la plus avancée et la plus utilisée du langage de balisage web. Par rapport aux versions précédentes, elle introduit des changements majeurs qui enrichissent le développement web. Si vous ne les adoptez pas encore, vous passez à côté d'opportunités fascinantes pour structurer votre contenu de manière plus intelligente.

Nous ne pouvons couvrir ici tous les nouveaux éléments et API de HTML5, mais ces neuf sont parmi les plus impactants. Pour une référence complète, consultez W3Schools.

Une introduction aux éléments sémantiques

HTML5 met l'accent sur la sémantique, comme une grande partie du web moderne. Les balises ne servent plus seulement à la mise en forme : elles indiquent aux navigateurs et moteurs de recherche la signification précise du contenu qu'elles enveloppent.

Par exemple, la balise <p> signale un paragraphe, tandis que <article> désigne le contenu principal autonome d'une page.

Le web sémantique est en pleine évolution. HTML5 accélère son adoption, favorisant un meilleur traitement des données pour l'avenir du web.

1. <article>

La balise <article> définit un contenu indépendant et autonome, comme un article de blog, un message de forum ou une recette isolée.

<article>
  Tout le texte de votre section autonome.
</article>

Utilisez-la pour le contenu principal, mais aussi de façon créative, comme pour des histoires personnelles dans un billet de cuisine.

2. <section>

Proche de <article>, <section> regroupe thématiquement du contenu, souvent avec un titre. Elle s'insère typiquement dans un <article>, mais pas toujours, comme sur une page d'accueil d'actualités.

<article>
  <section>
    <h2>Pourquoi avez-vous besoin d'un DAC</h2>
    <p>Tout sonne mieux.</p>
  </section>
  <section>
    <h2>Comment configurer un DAC</h2>
    <p>Voici ce que vous devez faire...</p>
  </section>
</article>

Les sections peuvent être imbriquées si la structure de votre page l'exige.

3. <header>

Le <header> contient le contenu introductif, comme un titre et un paragraphe d'accroche. Utilisable plusieurs fois par page, y compris par section.

<article>
  <header>
    <h1>Tout ce que vous devez savoir sur les DAC</h1>
    <p>Voici une introduction utile aux DAC...</p>
  </header>
  Le reste de votre article va ici.
</article>

Il inclut généralement une balise de titre (H1, H2, etc.).

4. <footer>

Le <footer> regroupe les infos comme l'auteur, le copyright, les liens légaux ou contacts. Plusieurs par page sont possibles, mais centralisez-les idéalement.

<footer>
  Droits d'auteur : MakeUseOf, 2017.
  <a href="https://www.makeuseof.com/contact/">Contactez-nous</a>
</footer>

5. <nav>

La balise <nav> encadre les liens de navigation principaux (barres de menu), pas tous les liens de la page.

<nav>
  <a href="https://www.makeuseof.com/">Accueil</a>
  <a href="https://www.makeuseof.com/about">À propos</a>
</nav>

6. <aside>

<aside> désigne un contenu périphérique lié au principal, comme une barre latérale ou des infos complémentaires non essentielles.

<article>
  L'article principal va ici.
  <aside>MakeUseOf se concentre sur l'établissement de liens entre les utilisateurs, ordinateurs, appareils et Internet par l'éducation.</aside>
  L'article continue ici.
</article>

En dehors d'un <article>, il sert pour des infos site-wide.

7. <details>

<details> masque des infos détaillées, révélées par clic, idéal pour copyright ou petits caractères.

<details>
  <summary>Cliquez ici pour voir les informations.</summary>
  Voici des informations plus détaillées dont vous n'avez pas besoin tout de suite.
</details>

Combinez avec d'autres balises à l'intérieur.

8-9. <figure> et <figcaption>

<figure> encadre une image, diagramme ou code autonome, sans perturber le flux si supprimé. <figcaption> ajoute une légende.

<figure>
  <img src="makeuseoflogo.png" width="800px">
  <figcaption>Voici notre logo !</figcaption>
</figure>

Exploitez pleinement la puissance de HTML5

Ces éléments sémantiques boostent la structure de vos pages. D'autres existent pour le formatage, les jauges, etc. Consultez W3Schools pour tout explorer.

Maîtrisez ces neuf et passez au niveau supérieur. Débutants en HTML ? Découvrez nos exemples de code !

Avez-vous adopté HTML5 ? Quels éléments utilisez-vous le plus ? Dites-le-nous en commentaires !