5568 sujets

Sémantique web et HTML

Hiérarchie et <section>

bonjour.

Sur une page de site avec une hiérarchie du type :

<header>
  H1 -TITRE DU SITE
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
</header>

<main>
 <section> 
  
  <article>
   <header>
     H2 - TITRE DE L'ARTICLE
   </header>
     CONTENU DE L'ARTICLE
   <footer>
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
   </footer>
  </article>

 </section>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>


Le validator Nu Html Checker (validator.w3.org) me dit :


Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.


Est-ce grave, ma configuration ci-dessus est-elle correcte ?
Modifié par poilozorey (13 Oct 2016 - 19:21)
Bonjour,
Rien de grave c'est juste un warning prevenant le manque de balise heading en dessous de la balise section.
Essaie :
<main>
<section>
<h2>....</h2>
<article>
<header>
Bonjour,

Personnellement j'aurais placé mon H1 en lieu et place du H2 de l'exemple de Foolcrow.

Bonne journée.
Bonjour et merci à vous pour vos réponses.

Je me suis pourtant basé sur Démonstration des éléments de section HTML5

La structure est quasi identique à la mienne et le validateur "couine" également sur le....
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

(à moins que des choses est changés et que cette démo n'à pas été mise a jour ??)

Donc si je laisse tel que mon site actuel (identique à la démo) ...

<header>
  H1 -TITRE DU SITE
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
</header>

<main>
 <section> 
  <article>
   <header>
     H2 - TITRE DE L'ARTICLE
   </header>
     CONTENU DE L'ARTICLE
   <footer>
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
   </footer>
  </article>
 </section>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>


Est-ce mauvais ou négatif point de vue référencement ?
Modifié par poilozorey (14 Oct 2016 - 10:49)
poilozorey a écrit :

Est-ce mauvais ou négatif point de vue référencement ?
Je ne pense pas que cela soit vraiment pénalisant du point de vue du référencement.

Le message évoqué par le W3C ne constitue qu'un avertissement. Selon eux, toute section doit contenir un ordre hiérarchique de titres qui se suivent allant de 1 à 6.
Dans ton cas tu commences l'article de ta section par un titre de niveau deux. Or ta section ne contient pas de titre.
Ta section est inclue dans ton contenu principal (balise main) or ce contenu principal ne contient aucun titre (ton H1 fait partie d'une en-tête elle-même frère de ton contenu principal.
Donc d'après le validateur, ta section ne se rapporte pas à ton h1, détecte que tu as un h2 donc te signale que ta numérotation est en défaut.

Du point de vue du référencement, ta structure est conforme car elle dispose d'un titre h1.

La norme et le référencement sont deux point de vue différents.

Mais je maintiens qu'il serait plus logique d'opter pour une présentation telle-que:
<header>
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
</header>

<main>
 <section> 
  H1 -TITRE DU SITE
  <article>
   <header>
     H2 - TITRE DE L'ARTICLE
   </header>
     CONTENU DE L'ARTICLE
   <footer>
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
   </footer>
  </article>
 </section>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>




Et si vraiment tu as besoin de conserver cet ordre pour tes éléments, pourquoi ne pas opter pour

<main>
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
 <section> 
<header>
  H1 -TITRE DU SITE
</header>
  <article>
   <header>
     H2 - TITRE DE L'ARTICLE
   </header>
     CONTENU DE L'ARTICLE
   <footer>
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
   </footer>
  </article>
 </section>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>


ou pour

<main>
<header>
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
</header>
 <section> 
  H1 -TITRE DU SITE
  <article>
   <header>
     H2 - TITRE DE L'ARTICLE
   </header>
     CONTENU DE L'ARTICLE
   <footer>
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
   </footer>
  </article>
 </section>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>



D'ailleurs l'exemple que tu cites Démonstration des éléments de section HTML5 n'est lui-aussi pas conforme pour le validateur du W3C.


PS : tous ces exemples ont été soumis au validateur qui ne signale aucun avertissement.
Merci greg pour toutes ces infos.
Malheureusement je ne peut pas me permettre de "remanier" la structure comme tu me le montre dans tes 2 exemples ci-dessus.

Du coup ...

- Est-ce que je laisse comme ca 


<header>
  H1 -TITRE DU SITE
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
</header>

<main>
 <section> 
  <article>
   <header>
     H2 - TITRE DE L'ARTICLE
   </header>
     CONTENU DE L'ARTICLE
   <footer>
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
   </footer>
  </article>
 </section>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>


- Ou est ce que j’enlève les <section>
<header>
  H1 -TITRE DU SITE
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
</header>

<main>
 <div id="content"> 
  <article>
   <header>
     H2 - TITRE DE L'ARTICLE
   </header>
     CONTENU DE L'ARTICLE
   <footer>
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
   </footer>
  </article>
 </div>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>

Modifié par poilozorey (14 Oct 2016 - 11:50)
Attention, section identifie une portion de contenu qui n'est pas liée au contenu principal. Ici il faudrait se passer d'une section et préférer une div, car sémantiquement une section seule enfant de main n'a aucun sens.

Source : http://html5doctor.com/element-index/#section

De plus attention au piège de la structure, plus aucune spéc ne permet de mettre plusieurs h1 dans une même page : l'algorithme d'outline de document de HTML5 n'a jamais fonctionné ni été supporté, il faut donc revenir à la bonne vieille règle d'un seul h1 par page.


Source : http://html5doctor.com/computer-says-no-to-html5-document-outline/
Ten a écrit :
Attention, section identifie une portion de contenu qui n'est pas liée au contenu principal. Ici il faudrait se passer d'une section et préférer une div, car sémantiquement une section seule enfant de main n'a aucun sens.

Source : http://html5doctor.com/element-index/#section

De plus attention au piège de la structure, plus aucune spéc ne permet de mettre plusieurs h1 dans une même page : l'algorithme d'outline de document de HTML5 n'a jamais fonctionné ni été supporté, il faut donc revenir à la bonne vieille règle d'un seul h1 par page.


Source : http://html5doctor.com/computer-says-no-to-html5-document-outline/



Donc clairement, tu me conseil de faire ...


<header>
  H1 -TITRE DU SITE
  <nav>
    ELEMENTS DE NAVIGATION
  </nav>
</header>

<main>
 <div id="content"> 
  <article>
     H2 - TITRE DE L'ARTICLE
     CONTENU DE L'ARTICLE
     OUTILS DE PARTAGE RESEAUX SOCIAUX 
  </article>
 </div>
</main>

<aside>
Barre LATERALE
</aside>
 
<footer>
 ELEMENTS DE PIED DE PAGE
</footer>


J'ai bon docteur ??? Smiley confused
Ten a écrit :
Attention, section identifie une portion de contenu qui n'est pas liée au contenu principal. Ici il faudrait se passer d'une section et préférer une div, car sémantiquement une section seule enfant de main n'a aucun sens.

Source : http://html5doctor.com/element-index/#section

Ce n'est pas du tout ce que je lis dans le "Source" en question:
Section : Represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, contact information.

Il s'agit bien de choses qui font partie du contenu principal. Les choses qui ne sont pas dans le cours "normal" du document sont des <aside>.
Quant à déclarer qu'une seule section dans une page n'a pas de sens, c'est comme dire qu'il n'y a pas de paragraphe dans un texte qui ne comprend qu'un seul paragraphe, c'est une question de point de vue.
Ten a écrit :
De plus attention au piège de la structure, plus aucune spéc ne permet de mettre plusieurs h1 dans une même page : l'algorithme d'outline de document de HTML5 n'a jamais fonctionné ni été supporté, il faut donc revenir à la bonne vieille règle d'un seul h1 par page.
Source : http://html5doctor.com/computer-says-no-to-html5-document-outline/

Ce point est controversé il a été discuté plusieurs fois sur ce forum. En théorie on peut mettre un <h1> par <section>.
Ne mettre qu'un seul <h1> par document permet d'être à peu près certain que les renifleurs vont bien comprendre qu'il s'agit du sujet principal de la page.
Personnellement je ne mets qu'un seul <h1> par page, par contre mes pages ont plusieurs sections et chaque section a un <h2>.
Modifié par PapyJP (14 Oct 2016 - 15:30)
Hello,

Pour la section unique tu as raison, question de point de vue. Le mien est que si le seul enfant de main est une section, elle ne fait qu'ajouter du markup inutile Smiley ohwell

Pour l'outline le débat est clos en vérité, la dernier paragraphe de l'article que j'ai lié le précise clairement. Cette partie de la spécification a été retirée au W3C, et les exemples dans la spécification actuelle parlent d'eux-mêmes : http://w3c.github.io/html/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements.

Ta pratique de mettre un h2 dans les section est la bonne, mais c'est aussi désormais la seule. Et il n'est pas question de robots mais des utilisateurs qui accèdent à un plan de document cohérent.
Si je vous résume, ca devrait être comme suit ?

<header>
 <a href> TITRE DU SITE </a>
  <nav> ÉLÉMENTS DE NAVIGATION </nav>
</header>

<main>

 <section> 
  <h1> TITRE DE L'ARTICLE </h1>

  <article>
   <header>
     <h2> SECOND TITRE </h2>
     <a href> NOM - DATE - CATÉGORIE </a>
   </header>

     <p> CONTENU DE L'ARTICLE </p>

   <footer> 
         OUTILS DE PARTAGE RÉSEAUX SOCIAUX 
   </footer>
  </article>

 </section>

</main>

<aside> Barre LATÉRALE </aside>

<footer> ÉLÉMENTS DE PIED DE PAGE </footer>
bonjour a tous

je déterre un peu le topic

pouvez-vous me dire si ma structure est bonne ou néfaste pour le référencement svp ?

https://www.vinaigre-blanc.com/post/Nettoyer-une-vitre-d-insert-de-cheminee

malgré l'avertissement


Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

From line 129, column 3; to line 129, column 24

"main">?  <section id="content">?  ?

Modifié par poilozorey (26 Feb 2017 - 10:58)
Sujet clos
Aller à