Question conformité HTML5

Tout d'abord bonjour a tous !

Aujourd'hui je passe mon site au Validateur, ... roulement de tambour ... Tout est correct mais j'ai quand même 4 messages avec ceci :

" Section lacks heading. Consider using h2-h6 elements to add identifying headings to all articles. "

De la me sort une question, est ce qu'il est obliger qu'il y est un h2 -> h6 dans une section ?
Est ce que cela peux créer des litiges ?

Deuxième partie,
Sur un autre site que je développe pour proposer des tutos sur le jeux " DayZ " ( pour les connaisseurs ).
De la j'ai fais une " Nav " dans cette nav j'y est mis une image en bannière de 200px / 60px.
et une liste tel que :

<ul>
<a href="#"><li>Monpremier</li></a>
<a href="#"><li>Mondeuxième</li></a>
<a href="#"><li>Montroisième</li></a>
<a href="#"><li>Monquatrième</li></a>
</ul>

J'ai voulue faire le teste de faire le " li " qui s'adapte a la taille du " a ", car en faisant un simple :

<li><a href="#">Monpremier</a></li>

comme il est conseillé. Je n'arrive pas a adapter la taille du " a " au " li " lorsque je fais un effet de survol.

Enfin bref la n'est pas la question.
La question est :
Est ce qu'il peux y avoir des litiges au niveau de certains navigateurs si je suis la " nav " que j'ai faite ?

J'ai tester sous IE, MF, GC aucun problème.

Mais dans le validateur W3C sa ne passe pas ..

" Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.) "

Voila voila,

bien a vous Gold

Golderen a écrit :
C'est que le problème au niveau du contenu, il y en a mais je peux pas trop mettre des titre partout ! ^^

Du coup solution n°2 ou n°3

Golderen a écrit :
/ ! \ a notée que je possède déjà un ( H1 ) dans mon header.

C'est déjà ça mais ce qui gène le validateur c'est les <section> sans un <h2-6> dedans, comme le signale la phrase que je t'ai mis en gras.

Golderen a écrit :
Effectivement, mais le problème de mettre des div partout c'est pas très jolie et puis sa ne ressemble pas tellement a la schématique du HTML5 non ?

Ça ne ressemble pas à l'idée que les gens se font du html5, c'est surtout ça en fait. Parce que pour ce qui est de la réalité de cette norme : aucun souci.

Ten a écrit :
Une section est un élément autonome de contenu, il doit pouvoir constituer un document à part entière et doit donc avoir un titre !

Si tu n'as aucun titre correspondant à ta section, tu ne dois pas utiliser une section mais une div !

C'est une erreur très gênante pour l'accessibilité. Tu dois vraiment utiliser des div (ou span ou n'importe quoi de sémantiquement neutre) si tu n'as aucun titre à mettre sur un ensemble d'éléments.

Réponse claire et concise.
Petite question, que penser des sections qui sont de même niveaux et qui contiennent chacune un titre de niveau <h1>. Est-ce un problème par rapport au référencement pour lequel Google recommande un seul titre de ce niveau ?
Est-il préférable de titrer la page avec un <h1> unique puis les sections commencent leurs titrages à <h2> ?

Bonjour (quoi que ceci nous ne le saurons que ce soir finalement),

Passer en Html5 ne signifie remplacer div et span par section et article.

Passer en Html5 signifie placer [u]stratégiquement[/u]* les balises à valeur sémantique.
Edit : * censé représenter un soulignement. On ne peut pas souligner sur Alsa ?!

Être passé en Html5 ne signifie pas avoir fait disparaître les div et span.

Sommes-nous d'accord ?!


Bonne continuation.
Modifié par Greg_Lumiere (26 Apr 2016 - 14:09)

Merci de ton conseil QuentinC !

Intéressant cette discussion.
Peut-être qu'une solution propre pourrait être celle qui fait office d'un exemple sur le MDN à propos des Racines de sectionnement.

<section>
  <h1>Éléphants de forêt</h1>
  <section>
    <h2>Introduction</h2>
    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
  </section>
  <section>
    <h2>Habitat</h2>
    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;:
    <blockquote>
      <h1>Bornéo</h1>
      <p>L'éléphant de la forêt vie à Bornéo…</p>
    </blockquote>
  </section>
</section>

Sinon, oui, on ne sait pas franchement si plusieurs <h1> dans une page influe sur les SERP de Google mais je trouve ça assez logique qu'une page ait un et un seul titre principal qui résume un peu le contenu général de la page.
EDIT : d'ailleurs, le message du validateur est assez explicite sur ce point : "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.". Il ne fait référence à des titres que à partir du niveau <h2>.
Vient se poser le problème sur une page avec plusieurs articles dont le contenu éditorial n'a pas de point commun...
Modifié par MatthieuR (27 Apr 2016 - 09:23)

En complément à la discussion, le site outliner aide à valider une titraille de page par rapport à HTML5.
Ceci dit, je reste perso sur un titre H1 par page.

Après a chacun de se faire son idée sur le fameux <h1>, un ou plusieurs par pages ^^

a écrit :
Sinon, oui, on ne sait pas franchement si plusieurs <h1> dans une page influe sur les SERP de Google mais je trouve ça assez logique qu'une page ait un et un seul titre principal qui résume un peu le contenu général de la page.

Oui, c'est assez logique qu'une page ait un seul et unique titre principal qui résume tout le contenu.
Sauf que, ce fameux titre général pour toute la page, ça ne devrait être autre que <title> !

Par exemple il faut savoir que le contenu de <title> est la toute première chose qu'un lecteur d'écran lit quand on arrive sur une nouvelle page. C'est donc bien, en ce sens, cet élément qui fait office de titre principal.
C'est aussi l'un des éléments les plus fortement influenceurs du référencement (et là, même si on n'a pas le code de Google, on a pu facilement le prouver).

Tout le monde est juste frustré parce que le contenu de <title> n'apparaît jamais sur la page mais seulement dans la barre de titre de la fenêtre et personne ne fait jamais attention à la barre de titre. Donc on a inventé des contournements pour qu'il s'affiche en gros en haut de la page d'une manière ou d'une autre.
Mais en vérité, le titre principal de la page, c'est juste <title> et rien d'autre !

a écrit :
EDIT : d'ailleurs, le message du validateur est assez explicite sur ce point : "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.". Il ne fait référence à des titres que à partir du niveau <h2>.

C'est un point de vue.

Il ne me semble pas que ce soit écrit noir sur blanc dans les spécifications qu'il ne doit y avoir qu'un seul H1 par page, même pas comme recommandation optionelle.
Partant de là, les deux points de vue se défendent avec de très bons arguments de chaque côté. IL n'y a rien de faux.


Je pense qu'il suggère simplement H2-H6 et non pas H1-H6 afin d'éviter toute confusion possible entre le nouveau système de hiérarchie relative de HTML5 très impopulaire, et celui absolu qu'on a toujours utilisé depuis HTML4 et qu'on continue à utiliser très majoritairement.

L'idéal dans cette discussion est que tout le monde a raison.

Le doute semble toutefois planer sur la multiplication des balises titres de niveau 1.

Je me souviens avoir lu que ce n'est pas leur nombre qui apporte une pénalité vis-à-vis de Google mais leur utilisation.
Il est tout aussi valide de n'avoir qu'un titre de premier niveau par page tout comme il l'est tout autant d'en avoir plusieurs.

Là où il faut faire un distinguo est dans leur(s) utilisation(s) qui doit impérativement être appropriée. Pour ça on rentre dans la construction classique d'un texte hiérarchisé qui doit rester logique.

Dans le cas de l'utilisation d'un unique H1 :
Les titres, enfants directs de ce H1 doivent êtres des H2.
Les enfants de ces H2 seront des H3 et ainsi de suite (là dessus je suis d'accord avec le W3C, 6 constitue un maximum raisonnable).
soit:

<h1>Titre niveau 1</h1>
<p>du blabla</p>
<article>
 <h2>titre de l'article</h2>
</article>
<!-- EST CORRECT ! -->

<h1>Titre niveau1</h1>
<article>
 <h3>titre de l'article</h3>
</article>
<!-- EST FAUX -->

Dans le cas de l'utilisation de multiples H1 :
Les mêmes règles que précédemment s'appliquent mais chacun suit son "fil de dépendance".
Soit:

<h1>titre de page</h1>
<header>
 <p>... contenu du header ...</p>
</header>
<section>
 <h1>titre de section</h1>
 <header>...en-tête de l'article...</header>
 <article>
   <h2>titre de cet article</h2>
 </article>
 <article>
  <h2>titre de cet article là</h2>
 </article>
<section>
<sections>
 <h1>titre de section</h1>
...
</section>
<!-- EST CORRECT ! -->
<h1>titre de page</h1>
<header>
 <p>... contenu du header ...</p>
</header>
<section>
 <h2>titre de section</h2>
 <header>...en-tête de l'article...</header>
 <article>
   <h1>titre de cet article</h1>
 </article>
 <article>
  <h1>titre de cet article là</h1>
 </article>
<section>
<sections
 <h2>titre de section</h2>
...
</section>
<!-- EST FAUX -->

Les exemples corrects le sont du point de vue syntaxique, répondent aux recommandations et n'entrainent pas de malus en SEO.

A ce propos, il y a sur l'article du W3C - HTML5 4.3 Sections un exemple cité avec de multiples H1 au paragraphe 4.3.6 concernant les h1-h6.
Un acteur majeur de la presse spécialisée française (je crois que c'est Abondance mais je ne suis plus sûr) en a aussi fait un article début d'année ou fin de la précédente.

Enfin tout ça pour dire que le nombre d'itération de la balise H1 au sein d'une même page est à la libre appréciation du développeur.
Modifié par Greg_Lumiere (27 Apr 2016 - 11:31)