5568 sujets

Sémantique web et HTML

Structure page html5 / index articles récents

Bonjour

Je cherche à structurer au mieux un site et je me pose quelques questions, si quelqu'un a le temps pour une discussion constructive ce serait sympa. Il s'agit d'un accueil qui affiche notamment les derniers articles du site:

<body>
    <header>
        <hgroup>
             <h1>Mon site</h1>
             <h2>Ma base line</h2>
        </hgroup>
     </header>

     <div id="primary" role="main">
          <h1>Titre page - A la Une</h1>


Jusqu'ici je pense tout va bien c'est pour poser le contexte, maintenant 2 exemples de structure pour afficher les derniers articles à ce niveau de l'arbo :

Exemple1 : nav avec des sections

          <nav>
                <h1>Mes derniers articles</h1>
                <section>
                       <a>
                           <h1>Article1</h1>
                           <p>extrait</p>
                           <p>Lire la suite</p>
                       </a>
                </section>                
                <section>
                       <a>
                           <h1>Article2</h1>
                           <p>extrait</p>
                           <p>Lire la suite</p>
                       </a>
                </section>    
                <footer>
                        <a>Voir tous les articles</a>
                </footer>
          </nav>



Exemple2 : section avec des nav

          <section>
                <h1>Mes derniers articles</h1>
               <nav>
                       <a>
                           <h1>Article1</h1>
                           <p>extrait</p>
                           <p>Lire la suite</p>
                       </a>
                </nav>                
                <nav>
                       <a>
                           <h1>Article2</h1>
                           <p>extrait</p>
                           <p>Lire la suite</p>
                       </a>
                </nav>    
                <footer>
                        <nav>
                                <a>Voir tous les articles</a>
                        </nav>
                </footer>
          </section>


La 1ere solution me semble correcte.. la 2eme plus compliquée (ou mettre les articles dans une liste contenue dans une nav mah c un peu la même) si vous avez un avis sur la question..

Au cas où j'en profite pour avoir un autre avis concernant l'imbrication des H1 dans mes sections, si côté W3C c'est correct (et bien pratique) je me pose des questions sur la manière dont Google traite ces imbrications et tous ces H1, quelqu'un a-t-il des retours côté SEO ?

Merci
Modifié par loddesign (12 Sep 2012 - 04:47)
Salut,

Personnellement, je réserve <nav> à la navigation principale (en général) et je ne l'utiliserais pas pour ce genre de liens transversaux...
Ce sont juste des liens et pas un bloc de navigation...

J'opterais pour la solution 2, un ensemble de contenus (section) regroupant les articles et en remplaçant <nav> par des <li>, genre la liste des derniers articles !

tm
Moi, j'aurais fait :

 <section>
                <h1>Mes derniers articles</h1>
                <article>
                           <h1>Article1</h1>
                           <p>extrait</p>
                           <a>Lire la suite</a>
                </article>                
                …
 </section>
Salut Muchos,

Il me semble que l'élément <article> doit être utilisé pour un contenu qui se suffit à lui-même et qui, hors de tout contexte, est compréhensible. Il est est censé pouvoir être diffusé de façon autonome ou syndiqué.
Du coup, un extrait ou résumé me semble un peu juste...

S'il y a d'autres points de vue ?

tm
Merci pour vos réponses!

tm™ Smiley cligne
Je suis assez d'accord avec ton point de vue et le fait de réserver nav pour le menu principal et celui du footer quelquepart c'est rassurant, d'où mon post tu as bien cerné la problématique. D'un autre côté je me force à sortir de certaines habitudes d'intégration, du bon vieux menu horyzontal et quand je regarde de plus près les recos du W3C :

a écrit :
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

> l'élément nav est une section de liens vers d'autres pages ou de liens de navigation au sein de la page (en tant que section cela implique que mes liens sont groupés dans une thématique commune)

Pour l'exemple1 sur ma page d'accueil je t'explique mon raisonnement :
-la nav générale je la place dans le premier header c'est une section de liens pour naviguer dans le site, ensuite je place un titre après le header considérant que c'est le sujet de ma page (à la Une)
-Vient ensuite les sections qui vont composer cette page à la Une, la section "articles récents" pour moi n'est pas une simple section mais plutôt une nav puisque son seul but est de naviguer vers les articles (une navigation transversale en fait> oui c'est d'ailleurs ce que tu as mis plus haut hé hé). Afin de bien la structurer je crée des sections pour chaque article introduit et en footer le lien vers tous les articles.

Je me permets d' étayer avec un autre exemple pour un index de catégorie :

<body>
    <header>
        <hgroup>
             <h1>Mon site</h1>
             <h2>Ma base line</h2>
        </hgroup>
        <nav>
              <ul>
              <li><a>Accueil</a></li>
              <li><a>Catégorie1</a>
                   <ul>
                         <li><a>Sous-menu1</a></li>
                         <li><a>Sous-menu2</a></li>
                         <li><a>Sous-menu3</a></li>
                   </ul>
              </li>
              <li><a>Catégorie2</a></li>
              <li><a>Nous contacter</a></li>
              </ul>
       </nav>
     </header>

     <div id="primary" role="main">
          <h1>Catégorie1</h1>
          <nav>
                <section>
                       <a>
                           <h1>Sous-menu1</h1>
                           <img>Une jolie image</img>
                           <p>Voici ce que vous allez découvrir</p>
                           <p>J'y vais!</p>
                       </a>
                </section>                
                <section>
                       <a>
                           <h1>Sous-menu2</h1>
                           <img>Une jolie image</img>
                           <p>Voici ce que vous allez découvrir</p>
                           <p>J'y vais!</p>
                       </a>
                </section>   
                <section>
                       <a>
                           <h1>Sous-menu3</h1>
                           <img>Une jolie image</img>
                           <p>Voici ce que vous allez découvrir</p>
                           <p>J'y vais!</p>
                       </a>
                </section>    
          </nav>

          <section>
                <h1>Qu'est ce que la catégorie1?</h1>
                 <p>Je vous l'explique ici!</p>
          </section>


Ici que les liens vers les sous-menus soient dans la nav principale ou qu'ils soient dans le main avec une présentation plus explicite j'estime que ce sont des sections pour naviguer dans le site, du fait aussi que cette page est un index (et pas une page de contenu). C'est dans cette logique que j'ai construit l'exemple1 je ne sais pas ce que tu en penses (hé hé quand je suis lancé sur ce genre de sujet dur dur de m'arrêter mais j'avais bien besoin d'échanger à ce propos!! le côté seo m'inquiète aussi un peu)

Muchos
> Tout à fait d'accord avec Tm c'est pas adapté article
Dans mon exemple c'est un texte d'intro et pas un article en lui-même, demain mon client peut demander d'enlever l'extrait et de garder seulement le lien, il ne s'agit pas d'un article entier et indépendant
> dommage aussi de supprimer le "lien block" qui est une nouveauté en html5 et qui nous évite de mettre trois liens type un lien sur le titre, un lien sur l'image, un lien sur lire la suite. Et côté ergonomie ça donne de bons gros blocs cliquables et ça c'est que du bonheur!!! Smiley langue
Modifié par loddesign (13 Sep 2012 - 23:04)
Personne d'autre a un petit avis sur l'emploi de la nav? C'est vrai que je me relis ça doit être un peu indigeste Smiley eek mais bon si vous avez un peu de temps à consacrer à la question (ou un oh malheureuse tu peux pas faire ça parceque...) je suis preneur!
Modifié par loddesign (13 Sep 2012 - 23:10)
Sujet clos
Aller à