Aller au contenu
DEV Récap

Structure HTML

La plupart des sites web suivent une structure similaire : un header (en-tête), une navigation, un contenu principal, des sections, des articles, un aside (contenu complémentaire) et un footer (pied de page).

Pourquoi utiliser des balises sémantiques ?

Section intitulée « Pourquoi utiliser des balises sémantiques ? »
  • Améliore le référencement (SEO)
  • Rend les pages accessibles aux lecteurs d’écran
  • Clarifie la structure du code
Section intitulée « <header> »

Utilisé pour l’en-tête visible d’une page, d’un article ou d’une section.

À ne pas confondre avec <head> qui contient les métadonnées techniques du document.

Exemple :

<header>
  <h1>Bienvenue sur Le Monde des Chats</h1>
  <p>Le premier site sur vos animaux favoris</p>
</header>
Section intitulée « <nav> »

Utilisé pour la navigation principale du site. Souvent placée dans le <header>.

Exemple :

<nav>
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="about.html">À propos</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<main>

Section intitulée « <main> »

Contient le contenu principal unique d’une page. Une seule balise <main> par page.

Exemple :

<main>
  <h1>Blog</h1>
  <section>
    <h2>Articles récents</h2>
  </section>
</main>

<article>

Section intitulée « <article> »

Utilisé pour un contenu autonome : article de blog, fiche produit, etc.

Exemple :

<article>
  <header>
    <h2>Qui sont les chats ?</h2>
  </header>
  <p>
    Les <strong>chats</strong> sont des <em>félins</em> domestiques très
    populaires...
  </p>
</article>

<section>

Section intitulée « <section> »

Conteneur de contenu regroupé thématiquement. Doit contenir un titre (<h2>, <h3>, etc.)

Exemple :

<section>
  <h2>Poèmes sur les chats</h2>
  <p>Voici quelques poèmes célèbres...</p>
</section>

<aside>

Section intitulée « <aside> »

Pour du contenu complémentaire ou optionnel : pub, encadré, commentaires…

Exemple :

<aside>
  <header>
    <h2>Commentaires</h2>
  </header>
  <article>
    <header><h3>Laurent</h3></header>
    <p>J'adore les chats !</p>
  </article>
</aside>
Section intitulée « <footer> »

Pied de page d’un document, d’un article ou d’une section.

Exemple global :

<footer>
  <nav>
    <ul>
      <li><a href="index.html">Accueil</a></li>
      <li><a href="about.html">À propos</a></li>
    </ul>
  </nav>
  <p>Contact : <a href="mailto:email@example.com">email@example.com</a></p>
  <p>© 2025</p>
</footer>

Autres balises utiles

Section intitulée « Autres balises utiles »

<br>

Section intitulée « <br> »

Saut de ligne à l’intérieur d’un paragraphe :

<p>Ligne 1<br />Ligne 2</p>

<hr>

Section intitulée « <hr> »

Séparateur horizontal, utile pour marquer un changement de sujet :

<hr />

<div> et <span>

Section intitulée « <div> et <span> »

Conteneurs non sémantiques :

  • <div> = block (groupe de contenu)
  • <span> = inline (court morceau de texte)

À utiliser en dernier recours si aucune autre balise sémantique ne convient.

Récapitulatif

Section intitulée « Récapitulatif »
BaliseRôle
<header>En-tête de page, section ou article
<nav>Zone de navigation
<main>Contenu principal unique
<article>Contenu autonome
<section>Partie d’un contenu liée à un thème
<aside>Contenu secondaire (commentaires, pub)
<footer>Pied de page
<br>Saut de ligne
<hr>Séparateur thématique
<div> / <span>Conteneurs neutres (à styliser avec CSS)
Tips

Bonne pratique : Commence toujours par une bonne structure HTML avant de penser au style avec le CSS.