HTML

Structure d’une page HTML5

Publié en août 2013 2 extraits de code par Rémy Montangé

Fiche écrite en 2013 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

Le squelette d’une page HTML5 avec ses balises sémantiques. Elles ne changent rien à l’affichage, mais elles disent aux moteurs de recherche et aux lecteurs d’écran ce qu’est chaque partie de la page : l’en-tête, la navigation, le contenu principal, les articles, le pied de page.

HTML

<!DOCTYPE html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mon site Web</title>
</head>

<body>

    <header>
        <nav>
            <ul>
                <li>Lien 1</li>
                <li>Lien 2</li>
                <li>Lien 3</li>
            </ul>
        </nav>
    </header>

    <section>
        <article>
            <header>
                <h2>Titre de l'article</h2>
                <p>publié le <time datetime="2009-09-04T16:31:24+02:00">4 septembre 2009</time> par <a href="#">w4u</a> - <a href="#comments">6 commentaire</a></p>
            </header>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </article>

        <article>
            <header>
                <h2>Titre de l'article</h2>
                <p>publié le <time datetime="2009-09-04T16:31:24+02:00">4 septembre 2009</time> par <a href="#">w4u</a> - <a href="#comments">6 commentaire</a></p>
            </header>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </article>

    </section>

    <aside>
        <h2>Titre de la zone secondaire</h2>
        <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </aside>

    <footer>
        <p>Copyright 2009 w4u</p>
    </footer>

</body>

</html>

HTML

<article class="article">
  <header>
    <h1 class="article-title">Titre de l'article</h1>
    <time class="updated" datetime="2010-08-07 11:11:03-0400" pubdate>08-07-2010</time>
    <p class="byline author vcard">
        By <span class="fn">W4U</span>
    </p>
  </header>

  <div class="content">
      <p>Texte de l'article</p>
      <p>Porttitor nunc enim lundium, massa velit. Proin nascetur! Penatibus augue et aenean dolor tempor enim augue porta, integer eros cras turpis purus placerat eros! Risus, sed! Odio, tincidunt cum aenean. Magna pulvinar platea auctor! Platea, sit, augue mattis! Amet, elementum porttitor sociis. Magna porta nisi, porta. Nisi, odio? A, dapibus.</p>

      <figure>
        <img src="https://www.w4u.fr/sites/default/files/logo_0_0.png" alt="Portrait of Tammy Strobel" />
        <figcaption>Description de l'image</figcaption>
      </figure>

      <aside>
        <h2>Titre de la zone secondaire</h2>
        <ul>
          <li>Facebook</li>
          <li>Twitter</li>
          <li>Etc</li>
        </ul>
      </aside>

      <div class="entry-content-asset">
        <a href="https://www.w4u.fr/sites/default/files/logo_0_0.png" title="">
          <img src="https://www.w4u.fr/sites/default/files/logo_0_0.png" alt="The objects Tammy removed from her life after moving" />
        </a>
      </div>

      <a class="entry-unrelated" href="https://www.w4u.fr/">https://www.w4u.fr/</a>
  </div>

  <footer>

    <div class="source-org vcard copyright">
        Copyright 2009 <span class="org fn">par W4U</span>
    </div>
  </footer>
</article>

Autres fiches HTML