Balisage sémantique HTML — guide complet pour développeurs

What Is HTML Semantic Markup?

Le HTML sémantique utilise des éléments qui décrivent le sens, pas seulement l’apparence. Un <nav> indique « navigation » aux lecteurs d’écran. Un <div class='nav'> non. Moteurs et assistive tech s’appuient sur la sémantique.

Why HTML semantic markup Matters

Google and screen readers parse semantic tags to understand page structure — directly affecting rankings and accessibility scores.

Replacing div soup with <article>, <nav>, and <main> gives crawlers explicit signals about which content is navigation versus primary editorial text.

HTML semantic markup — Key Ideas You Must Know

• <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
• Un seul <main> par page pour le contenu principal
• Hiérarchie de titres : un <h1>, h2–h6 imbriqués
• Landmarks améliorent la navigation lecteur d’écran
• HTML sémantique soutient les rich snippets Google

HTML semantic markup Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <header><nav>...</nav></header>
  <main>
    <article>
      <h1>Page Title</h1>
      <p>Content here.</p>
    </article>
  </main>
  <footer>...</footer>
</body>
</html>

Common HTML semantic markup Mistakes

• Utiliser <div> pour tout
• Sauter des niveaux de titres (h1 vers h4)
• Plusieurs éléments <main>
• Attributs alt vides sur images informatives

Practice HTML semantic markup with Free Lessons

Suivez le tutoriel HTML gratuit sur Sturdee — éléments et sémantique, puis une landing sémantique.

Balisage sémantique HTML — FAQ