HTML — Structure sémantique

Un document HTML peut être écrit de mille façons qui produisent le même affichage. Mais toutes ne se valent pas. Ce chapitre ouvre la partie consacrée au HTML approfondi par une notion centrale : la sémantique. L’idée directrice tient en une phrase — un bon document HTML ne se contente pas d”« afficher du contenu », il en exprime le sens.

Pourquoi la sémantique ?

Le HTML sémantique consiste à utiliser les balises pour leur signification et non pour leur apparence. Autrement dit, on choisit une balise parce qu’elle décrit correctement le rôle du contenu, pas parce qu’elle « rend bien » par défaut.

Ce choix a des conséquences très concrètes.

Bénéfice

Explication

Accessibilité

Les lecteurs d’écran comprennent mieux la structure

SEO

Les moteurs de recherche identifient les contenus importants

Maintenance

Code plus lisible et compréhensible

⚠️ À éviter : semer des <div> et des <span> partout sans signification. Ces deux balises sont neutres — elles ne veulent rien dire — et restent utiles, mais une page entièrement bâtie sur des <div> est une page qui a perdu son sens. On parle parfois de « divite » pour désigner ce travers.

Les balises structurelles HTML5

HTML5 a introduit un ensemble de balises dont le seul but est de nommer les grandes zones d’une page. Voici comment elles s’articulent typiquement :

<body>
    <header>
        
    </header>
    
    <nav>
        
    </nav>
    
    <main>
        
        
        <article>
            
        </article>
        
        <section>
            
        </section>
        
        <aside>
            
        </aside>
    </main>
    
    <footer>
        
    </footer>
</body>

Prenons-les une à une. Pour chacune, retenez d’abord à quoi elle sert : c’est cette question qui guidera votre choix au moment d’écrire.

<header> — En-tête

Rôle : contenir l’en-tête d’une page ou d’une section. Attention, il ne s’agit pas du <head> du document (les métadonnées) : <header> est bien une zone visible.

Contenu typique : logo du site, titre principal, slogan, navigation principale.

<header>
    <img src="logo.png" alt="Logo MonSite">
    <h1>Bienvenue sur MonSite</h1>
</header>

Une page peut comporter plusieurs <header> : celui du site, mais aussi l’en-tête d’un article par exemple.

<main> — Contenu principal

Rôle : contenir le contenu principal unique de la page.

Deux règles importantes encadrent son usage :

  • Il ne doit y avoir qu”un seul <main> par page.

  • Il exclut le contenu qui se répète d’une page à l’autre : en-tête, navigation, pied de page, barre latérale.

<main>
    <h1>Titre de la page</h1>
    <p>Contenu principal unique à cette page...</p>
</main>

💡 Accessibilité : parce que <main> est balisé sans ambiguïté, les lecteurs d’écran peuvent proposer de sauter directement au contenu principal, en passant le menu — un confort considérable pour qui navigue au clavier.

<article> — Contenu autonome

Rôle : contenir un contenu autonome et réutilisable : un article de blog, un commentaire, un widget, une fiche produit…

<article>
    <h2>Titre de l'article</h2>
    <p>Auteur : Jean Dupont</p>
    <p>Contenu de l'article...</p>
</article>

💡 Astuce pour décider : demandez-vous si le contenu garderait son sens sorti de la page. Si vous pourriez le publier ailleurs tel quel — dans un flux RSS, sur un autre site — c’est un <article>.

<section> — Section thématique

Rôle : regrouper un contenu thématique cohérent, généralement introduit par un titre.

<section>
    <h2>Nos services</h2>
    <p>Description des services...</p>
</section>

<section>
    <h2>Notre équipe</h2>
    <p>Présentation de l'équipe...</p>
</section>

⚠️ Différence avec <div> : <section> porte une signification thématique, là où <div> est un simple conteneur sans sens. La question à se poser : « ce bloc mériterait-il une entrée dans la table des matières ? » Si oui, c’est une <section> ; sinon, un <div> fera l’affaire.

<aside> — Contenu complémentaire

Rôle : présenter un contenu indirectement lié au contenu principal, dont on pourrait se passer sans perdre l’essentiel.

Contenu typique : barre latérale (sidebar), encadrés, citations, liens connexes.

<aside>
    <h3>Articles similaires</h3>
    <ul>
        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>
    </ul>
</aside>

<footer> — Pied de page

Rôle : contenir le pied de page d’une page ou d’une section.

Contenu typique : mentions de licence (copyright, Creative Commons…), liens légaux (mentions légales, CGU), informations de contact, liens vers les réseaux sociaux.

<footer>
    <p>&copy; 2026 MonSite. Tous droits réservés.</p>
    <nav>
        <a href="mentions-legales.html">Mentions légales</a>
        <a href="contact.html">Contact</a>
    </nav>
</footer>

Comme pour <header>, une page peut contenir plusieurs <footer> : celui du site et, par exemple, celui d’un article (date, auteur, tags).

Exemple de structure complète

Mises bout à bout, ces balises dessinent une page claire et auto-documentée. Voici un exemple ramassé mais complet, où l’on retrouve l’en-tête, la navigation, le contenu principal avec un article et un aparté, puis le pied de page :

<body>
    <header>
        <h1>Mon Blog</h1>
        <nav>
            <a href="index.html">Accueil</a>
            <a href="about.html">À propos</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Premier article</h2>
            <p>Contenu...</p>
        </article>
        
        <aside>
            <h3>À propos de l'auteur</h3>
            <p>Bio...</p>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2026</p>
    </footer>
</body>

Remarquez qu’à la simple lecture des balises, on comprend déjà l’organisation de la page sans même voir son contenu. C’est exactement l’objectif de la sémantique : un code qui se lit comme un plan.