5568 sujets

Sémantique web et HTML

Bonjour à tous,

Je suis en train de constuire un site qui possèdera une topbar fixe en haut (un peu comme twitter pour situer).

Cette topbar possèdera
- Le titre du site (ainsi qu'une baseline)
- Le formulaire de recherche
- Le menu de navigation principale
- Un panier (car ce sera un site ecommerce)

Je veux faire ça en HTML5. D'après les informations que j'ai lu parci parla, j'hésite entre plusieurs choses.

La première

<header role="banner">

  <hgroup>
    <h1>Mon super site</h1>
    <h2>Ma super baseline</h2>
  </hgroup>

  <nav role="navigation">
    <ul>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
    </ul>
  </nav>
  
  <form>
    <input type="text" placeholder="Recherche">
  </form>

  <div id="panier">
    <p>3 articles dans le panier</p>
    <a href="#">Commander</a>
  </div>
</header>


La seconde

<header role="banner">

  <hgroup>
    <h1>Mon super site</h1>
    <h2>Ma super baseline</h2>
  </hgroup>

  <nav role="navigation">
    <ul>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
    </ul>

    <form>
      <input type="text" placeholder="Recherche">
    </form>

    <div id="panier">
      <p>3 articles dans le panier</p>
      <a href="#">Commander</a>
    </div>
  </nav>
  
</header>


En gros dans la seconde j'ai mis le formulaire de recherche et le panier dans la balise <nav> car on pourrait considérer que ce sont 2 "major" éléments de navigation dans un site ecommerce. Mais je ne suis pas sur...

La troisième

<header role="banner">

  <hgroup>
    <h1>Mon super site</h1>
    <h2>Ma super baseline</h2>
  </hgroup>

  <nav role="navigation">
    <ul>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
    </ul>
  </nav>
  
  <form>
    <input type="text" placeholder="Recherche">
  </form>

  <nav id="panier">
    <p>3 articles dans le panier</p>
    <a href="#">Commander</a>
  </nav>
</header>

Presque pareil que la première, mais on considère que le panier est un élement de navigation suffisamment important pour mériter sa balise nav.

Voilà, pour le moment j'hésite entre ces 3 là, mais si vous avez des remarques et suggestions autres, elles sont toutes les bienvenues.

D'avance merci
Salut,

Je suis pas un pro pour ce qui est sémantique, mais j'aurais tendance à opter pour la première solution ... d'ailleurs, tu peux ajouter un ARIA pour le champ de recherche.

Smiley cligne
Idem pour les options, j'opterais plutôt pour la première !

Côté sémantique, outre les rôles Aria tu peux te pencher sur les microformats, dans le cadre d'un e-commerce ça peut être très intéressant !
Ten a écrit :
tu peux te pencher sur les microformats


Si il est en html5, c'est mieux d'utiliser les microdatas ou le RDFa (Lite ou pas).
Modifié par Patidou (05 Nov 2012 - 00:19)
Merci pour tous vos conseils, je vais garder la première et regarder du coté des micro datas