Contenus et sémantique des documents HTML5

J'ai utilisé certains éléments de HTML5 pendant un certain temps, mais je n'ai jamais eu le temps de m'y mettre vraiment, alors je me fais une priorité pour que mes fesses soient engagées. J'ai lu tous les aspects que je peux trouver, et construit moi-même un petit testeur. Je l'ai exécuté à travers un outil de piste et tout semble sortir des atouts. Je me demandais juste si quelqu'un serait aussi gentil de regarder mon document de test complet pour voir si je néglige quelque chose ou si je fais quelque chose de radicalement faux.Contenus et sémantique des documents HTML5

<body> 
    <!-- Header --> 
    <header> 
     <img src="logo.jpg" alt="Logo" /> 
     <h1>Slogan</h1> 
     <nav> 
      <header><h2 class="hide-element">Navigation</h2></header> 
      <ul> 
       <li>Nav Item</li> 
       <li>Nav Item</li> 
       <li>Nav Item</li> 
      </ul> 
     </nav> 
    </header>  
    <!-- Main Content -->  
    <section id="wrapper"> 
     <header> 
      <h2>Page Heading</h2> 
     </header>    
     <section>    
      <h2 class="hide-element">Section Heading</h2> 
      <article> 
       <header> 
        <h3>Sub Heading</h3> 
        <time datetime="2013-02-08">February 8th 2013</time> 
       </header> 
       <p>Section Text</p> 
       <footer> 
        Like Button 
       </footer> 
      </article> 

      <article> 
       <header> 
        <h3>Sub Heading</h3> 
       </header> 
       <p>Section Text</p> 
       <figure> 
        <img src="" alt="" /> 
        <figcaption>Caption</figcaption> 
       </figure> 
       <footer> 
        Like Button 
       </footer> 
      </article>    
     </section> 

     <aside> 
      <h2 class="hide-element">Sidebar</h2> 
      <nav> 
       <header> 
        <h3>Categories</h3> 
       </header> 
       <ul> 
        <li>Sidebar Nav Item</li> 
        <li>Sidebar Nav Item</li> 
        <li>Sidebar Nav Item</li> 
       </ul> 
      </nav> 
     </aside>    
    </section> 

    <!-- Footer -->  
    <footer> 
     <nav> 
      <h3>Links</h3> 
      <ul> 
       <li>Link</li> 
       <li>Link</li> 
       <li>Link</li> 
      </ul> 
     </nav> 
     <section> 
      <h3>Social</h3> 
      <a href="">Link to Twitter</a> 
      <a href="">Link to Facebook</a> 
     </section> 
     <p class="copyright">&#169; Copyright 2013</p> 
     <p class="credit"><a href="" target="_blank">Credit</a></p> 
    </footer> 
</body>

Mise à jour

Ajouté autour h2 balise interne. Je n'ai pas réalisé que vous pouviez avoir à l'intérieur. Merci

Modifié div # wrapper à la section.

Source

2013-02-08 ccdavies

Vous devriez probablement ajouter '' et '' en haut, et '' à la fin. – paul

Cela pourrait être mieux adapté à l'échange de pile de révision de code http://codereview.stackexchange.com/ –

En html5, les balises h1-h6 ne fonctionnent pas de la même façon qu'en html4, vous pouvez avoir une pile de h1-h6 par élément de sectionnement (section/nav/etc ..) donc à peu près tout votre h2/h3 devrait être h1. A côté de cela, une suggestion serait d'utiliser la balise pour le droit d'auteur. –

Contenus et sémantique des documents HTML5

Répondre

Questions connexes