HTML5 Sémantique sémantique aide

Question

Je commence juste une nouvelle application. Voici une maquette de base de ce que je suis chargé de faire. Je suis novice dans l'utilisation de HTML5 pour mon balisage sémantique, donc j'aimerais recevoir des commentaires/de l'aide.

Je voudrais comprendre comment/où utiliser des choses comme <nav> et <section>

<div id="container"> 
    <header> 

    <div id="appInformation"> 
     <a href="#" alt="Home"> 
     <img src=""> 
     </a> 

     <span>Selected AppName</span> 
    </div> 

    <div> 
     <span id="time">TIME GOES HERE</span> 
    </div> 

    <div> 
     <a href="#" alt="Additional Information"> 
     <img src=""><!-- This is will be the location of the the 'i'--> 
     </a> 
    </div> 

    <div class=""> 
     <label>UserName</label> 
    </div> 

    </header> 
    <div id="main"> 
     <!-- main content for the selected app here --> 
    </div> 

    <footer> 

     <div id="appVersion"> 
      VERSION # HERE 
     </div> 

     <nav> 
      <ul> 
       <li> 
        <a href="#">FAQ</a> 
       </li> 
      </ul> 
     </nav> 

     <div id=""> 
      <!-- Team logo here--> 
     </div> 

    </footer> 

Answer 1

• Évitez unacessary Div.
• Utilisez l'horodatage au lieu de Div pour l'élément de temps.

• Évitez l'étiquette si vous n'avez rien à vous recommander, comme une entrée.

  sélectionnés AppName

  <time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag --> 
  
      <a href="#" alt="Additional Information"> 
       <img src=""><!-- This is will be the location of the the 'i'--> 
      </a> 
  
      <em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. --> 
  </header> 
  <div id="main"> 
      <!-- main content for the selected app here --> 
  </div> 
  <footer> 
      <div id="appVersion"> 
       VERSION # HERE 
      </div> 
      <nav> 
       <ul> 
        <li> 
         <a href="#">FAQ</a> 
        </li> 
       </ul> 
      </nav> 
  
      <a href="yourTeamUrl" id=""> 
       <!-- Team logo here--> 
      </a> 
  </footer> 
  

Answer 2

En plus de réponse de bien @Simon Arnold, je pourrais aussi suggérer que l'utilisation <nav> est incorrect. Un seul lien dans un pied de page peut difficilement être interprété comme un «bloc de navigation majeur». Voir la première note en texte vert au http://dev.w3.org/html5/spec/sections.html#the-nav-element