Balisage sémantique HTML5

J'ai besoin de faire du balisage sémantique HTML5 à partir de la mise en page illustrée ci-dessous.Balisage sémantique HTML5

Mon code HTML est le suivant. Je ne suis pas sûr si ce que j'ai est sémantique. Aucun conseil?

<body> 
    <header> 
     <h1>slogen+logo</h1> 
    </header> 
    <div id="login_or_register"></div> 
    <nav><!--main menu--> 
     <ul> 
      <li>home</li> 
      <li>about us</li> 
      <li>deals</li> 
     </ul> 
    </nav> 

    <select id=sort> 
     <option>new</option> 
     <option>price</option> 
     <option>discount</option> 
    </select> 

    <select id=main_sort_by> 
     <option>usa</option> 
     <option>england</option> 
     <option>japan</option> 
    </select> 

    <select id=main_sort_by> 
     <option>category1</option> 
     <option>category2</option> 
     <option>category3</option> 
    </select> 
    <section> 
     <article> 
      <p>our price</p> 
      <p>price</p> 
      <p>details</p> 
      <header> 
       <h1>deal title</h1> 
       <h2>deal description</h2> 
       <img src="" id="deal_image"/> 
      </header> 
      <footer> 
       <p>items left</p> 
       <p>end of the deal</p> 
      </footer> 
     </article> 

     <article> 
      <p>our price</p> 
      <p>price</p> 
      <p>details</p> 
      <header> 
       <h1>deal title</h1> 
       <h2>deal description</h2> 
       <img src="" id="deal_image"/> 
      </header> 
      <footer> 
       <p>items left</p> 
       <p>end of the deal</p> 
      </footer> 
     </article> 


    </section> 

    <aside> 
     <div id="newsletter"></div> 
     <div id="rss"></div> 
    </aside> 

    <footer></footer> 
</body>

Layout I am trying to markup

Source

2012-07-12 ofir

Ça va! Peut-être ajouter une rubrique aux articles –

J'ai quelques commentaires à offrir. Premièrement, vous ne devriez pas avoir besoin d'une étiquette header pour un seul élément. Peut-être que le login ou le registre peut y entrer aussi, cela dépend de votre design.

Vous utilisez article, maintenant c'est peut-être parce que je ne sais pas quel contenu ira ici, mais seulement utiliser cette étiquette si chaque partie du contenu sera logique, par exemple. dans un lecteur de flux RSS. Si tout va bien, sinon utilisez un tag section. Vous utilisez l'étiquette section uniquement comme un wrapper pour le articles. Vous ne devriez pas utiliser cette balise comme un conteneur, l'algorithme de plan du document ne prendra pas un en-tête pour cette section, donc un div suffirait.

L'un des outils que j'ai trouvé utile pour aider avec la sémantique html5, est le html5 Outliner, cela vous aidera à voir où vous devriez ou ne devriez pas utiliser les éléments de sectionnement.

Voici un excellent resource on html5 semantics.

Source

2012-07-13 09:00:22 Neil

Neil, merci. je vais aller à html5 outliner et le vérifier :) – ofir

Pouvez-vous accepter comme réponse, si elle vous a aidé? – Neil

Il me semble bon.

Peut-être envelopper <select> dans un conteneur si.

Source

2012-07-12 12:09:42 Maresh

Balisage sémantique HTML5

Répondre

Questions connexes