1. Accueil
  2. librairie de codes
  3. html
  4. structure dune page html5

Structure d'une page HTML5

Découvrez l'exemple
<!DOCTYPE HTML>
 
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <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>
Découvrez l'exemple
<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>