Les principales balises sémantiques HTML5

HTML5 a enrichi le langage en introduisant des balises qui décrivent plus précisément le rôle de leur contenu. L’utilisation de ces balises sémantiques est une bonne pratique car elle améliore l’accessibilité (notamment pour les lecteurs d’écran), le référencement (SEO) et la clarté du code.

Éléments de bloc et éléments en ligne

Avant de détailler les balises, il est important de comprendre une distinction fondamentale en HTML : la différence entre les éléments de type bloc et les éléments en ligne (inline).

• Les éléments de type bloc : Ils créent une « boîte » qui occupe toute la largeur disponible et commence toujours sur une nouvelle ligne. Ils sont utilisés pour structurer les grandes parties de votre page. Exemples : <p>, <h1>, <div>, <section>, <footer>.
• Les éléments de type en ligne : Ils s’insèrent dans le flux du texte sans créer de nouvelle ligne et n’occupent que la largeur nécessaire à leur contenu. Ils sont souvent utilisés à l’intérieur d’éléments de bloc pour marquer du texte. Exemples : <a>, <strong>, <em>, <span>.

Cette distinction est cruciale car elle influence la mise en page par défaut. La règle générale est qu’un élément en ligne ne peut pas contenir un élément de bloc.

<!-- Les éléments <p> sont de type bloc, ils se placent l'un en dessous de l'autre. -->
<p>Ceci est un premier paragraphe.</p>
<p>Ceci est un deuxième paragraphe.</p>

<!-- Les éléments <a> et <strong> sont en ligne, ils s'insèrent dans le flux du texte du paragraphe. -->
<p>Dans ce paragraphe, nous avons un <a href="#">lien</a> et du texte <strong>important</strong>.</p>

C’est la limite entre le rôle de structuration sémantique d’un document HTML et la mise en forme de ce document réalisée par les navigateurs.

Titres et Paragraphes

Ce sont les briques de base pour structurer le contenu textuel.

• <p> : Cette balise définit un paragraphe de texte.
• <h1> à <h6> : Ces balises servent à hiérarchiser les titres. <h1> est le titre principal de la page (un seul par page est recommandé pour le SEO et la clarté), tandis que <h2>, <h3>, etc., représentent des sous-niveaux.

Il faut également mentionner la balise <br> (break). C’est une balise orpheline qui force un saut de ligne. Elle est utile pour des cas où un retour à la ligne est nécessaire sans pour autant créer un nouveau paragraphe sémantique, comme pour une adresse ou un poème. Il ne faut pas l’utiliser pour créer de l’espacement entre les paragraphes, car c’est le rôle du CSS.

<h1>Titre de niveau 1</h1>
<p>Un paragraphe qui introduit le sujet.</p>

<h2>Titre de niveau 2</h2>
<p>Un autre paragraphe qui développe une idée.</p>

<!-- Exemple d'utilisation de <br> pour une adresse -->
<p>
    Mon Adresse<br>
    1 rue de la Paix<br>
    75001 Paris
</p>

Emphase et Importance

Ces balises permettent de mettre en valeur certaines parties d’un texte, en leur ajoutant un sens particulier.

• <strong> : Indique que le contenu a une forte importance. Les navigateurs l’affichent par défaut en gras. C’est un signal fort pour les moteurs de recherche et les technologies d’assistance.
• <em> (emphase) : Met l’accent sur un mot ou un groupe de mots, changeant ainsi le sens de la phrase. Les navigateurs l’affichent par défaut en italique.

Il est important de les distinguer des balises <b> (gras) et <i> (italique) qui n’ont qu’un but de présentation visuelle, sans ajouter de sens sémantique.

<p><strong>Avertissement :</strong> ce produit est très fragile.</p>
<p>Il ne faut <em>surtout pas</em> oublier cette étape.</p>

Structure de la page

HTML5 a introduit un ensemble de balises pour définir les grandes zones d’une page web, remplaçant les <div> génériques souvent utilisées auparavant (<div id="header">, <div class="nav">, etc.).

• <header> : Représente l’en-tête d’une page ou d’une section. Il contient souvent le titre principal, le logo, un slogan, ou un menu de navigation.
• <nav> : Destinée à contenir les liens de navigation principaux du site (menu, fil d’Ariane, etc.).
• <section> : Regroupe des contenus de même thématique. Une section a typiquement un titre (<h1>–<h6>).
• <article> : Représente un contenu indépendant et autonome qui pourrait être réutilisé ailleurs (un article de blog, un post de forum, un widget…).
• <aside> : Pour le contenu indirectement lié au contenu principal, comme une barre latérale (liens annexes, publicités, biographie de l’auteur).
• <footer> : Représente le pied de page d’une page ou d’une section. Il contient généralement des informations comme les droits d’auteur, les coordonnées, des liens vers les mentions légales, etc.

Exemple de mise en page

L’exemple ci-dessous montre comment ces éléments peuvent s’agencer. Notez l’utilisation de <main> qui encapsule le contenu principal de la page ; bien que non listé ci-dessus, son usage est fondamental pour délimiter le contenu central du document.

<header>
    <h1>Le titre de mon site</h1>
    <nav>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h2>Titre de l'article</h2>
        </header>
        <p>Contenu de l'article...</p>
        <footer>
            <p>Catégorie : Tutoriels</p>
        </footer>
    </article>

    <aside>
        <h3>À propos de l'auteur</h3>
        <p>Quelques mots sur l'auteur de l'article.</p>
    </aside>
</main>

<footer>
    <p>&copy; 2024 Mon Site Web. Tous droits réservés.</p>
</footer>