18041 sujets

Questions générales et questions de débutants

Question conformité HTML5

Pages :
(reprise du message précédent)

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)
Salut, je me joins à vous tiens Smiley smile

Greg_Lumiere a écrit :
Le doute semble toutefois planer sur la multiplication des balises titres de niveau 1.

En fait, il y a quand même eu des articles donnant les résultats de tests de référencement in situ avec plusieurs H1 ou avec un H1 unique et qui montrent pour la plupart des résultats similaires : ça ne change rien du moment que le tout est logique, sémantique, avec un balisage bien pensé Smiley smile
> Premier exemple avec ce test de Daniel Roch : http://www.seomix.fr/referencement-h1/
> Ah bah Matt Cutts en parlait aussi sur Youtube… https://www.youtube.com/watch?v=GIn5qJKU8VM même si ça date de 2009 Smiley cligne

Bref, suffit de faire les choses correctement et tout va bien. C'est sur que si la page est une soupe de markup, ça marche moins bien Smiley smile

Greg_Lumiere a écrit :
Edit : * censé représenter un soulignement. On ne peut pas souligner sur Alsa ?!

A ton avis, pourquoi on ne peut pas souligner sur Alsa ? Allez un petit effort Smiley langue Indice : c'est pas qu'une mauvaise chose sur Alsa, le soulignement graphique étant une mauvaise pratique à peu près partout sur le web… sauf dans un cas Smiley lol
a écrit :
Edit : * censé représenter un soulignement. On ne peut pas souligner sur Alsa ?!


Tiens, ça me fait penser, ça serait bien que le forum alsa se mette au markdown.
a écrit :
Tiens, ça me fait penser, ça serait bien que le forum alsa se mette au markdown.


C'est reconnue par le validateur le markdown ?
@Greg_Lumiere

En effet le site que tu as partagé est intéressant, il explique plus ou moins le " standards " du H1 son origine, comment il était utilisé, comment on peut l'utilisé.

Plus ou moins d'après ce que j'ai compris.

Avant la norme HTML5 les <h1> étais utilisé de cette manière : 


<header>
<h1>Mon grand titre de page</h1>
</header>
<div>
<p>contenue de ma page</p>
</div>


Ce qui est expliqué, avant il y avait un standard de " 1 seul titre de forme h1 par page ".

Maintenant avec HTML5, nous ne sommes plus obligé d'avoir un seul h1 comme étant un grand titre mais de la même façon que @Greg nous l'as montré.


<header>
<h1>Un titre</h1>
</header>
<section>
<header><h1>Mon titre de section</h1></header>
<article>
<header><h2>Mon titre de niveau 2</h2></header>
</article>
</section>
<section>
<h1>Mon titre</h1>
<h2>Mon titre de niveau 2</h2>
</section>


Enfin si je ne me suis pas trompé si j'ai a peux près compris. A partir du moment ou l'on incorpore une " section " on peut installé un h1 dedans et même conseillé de le mettre dans une balise <header> pour forcer a montrer que c'est le titre principal de cette section.

Si je n'ai pas compris de travers ? Smiley murf
Modifié par Golderen (28 Apr 2016 - 09:55)
C'est aussi ce que j'ai compris toutefois j'émets une réserve sur la nécessité d'inclure une en-tête lors de l'ajout d'une section portant un titre de niveau 1.
Je suis d'accord dans la mesure où cet en-tête ne contiendrait pas uniquement un titre mais aussi une description, un sous-titre voir même les deux ce qui donnerait un réel sens à l'en-tête.
Sans le cas contraire, une section suivie d'un titre de niveau 1 suivit à son tour d'un article directement me paraît appropriée (dans la mesure où la section ne contiendrait un seul article).

Golderen a écrit :
[...] pour forcer a montrer que c'est le titre principal de cette section.
C'est déjà le sens que donne la balise H1 : " Je suis un titre de niveau 1 du groupe auquel j'appartiens " scande-t-elle à tout va !
Modifié par Greg_Lumiere (28 Apr 2016 - 10:16)
Tien, il y a quelque chose qui m'interpelle sur le site :
http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Dans les exemples la développeuse utilise des balise 

<main>
</main>


Comme dans ce code :


<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 markup example</title>
   </head>
   <body>
      <header>
         <h1>Whackamoon Legumes!</h1>
         <p>We've been luvin beans</p>
      </header>
      <main>
         <article>
            <header>
               <h1>Boiling beans</h1>
               <p>Category: Mean Beans</p>
            </header>
            <h2>Is boiling beans really worth it?</h2>
            <p>Let's be honest, it takes ages.</p>
            <p>We advise just buying canned beans instead.</p>
            <footer>
               <a href="../">Back home...</a>
            </footer>
         </article>
      </main>
      <footer>
         <p>Copyright Whackamoon Legumes 2013</p>
      </footer>
   </body>
</html>


C'est un standard HTML5 ?

J'ai pas trouvé plus de précisions sur ce sujet. J'ai bien trouvé a quoi sa fessait référence mais pas quelle version Smiley sweatdrop
La balise MAIN fait effectivement partie des standards HTML5, elle a été introduite en même temps que Article et Section (entre-autres).

Elle donne le rôle sémantique de "contenu principal de la page".

Elle a pour vocation de remplacer la traditionnelle <div role="main">;

Dans un soucis de retro-compatibilité on croise souvent <main role="main">.

L'usage de cette balise est unique (par page) au contraire des Section.

Dans l'exemple que tu as recopié Golderen, il aurait été judicieux de placer des Section si (et seulement si) :
* Le nombre d'article était suffisant
* un(des) groupe(s) d' articles n'appartiennent pas au même sujet et nécessitent donc un titre de niveau 1 ; à ce niveau l'auteur doit se demander s'il ne serait pas plus judicieux de mettre dans une nouvelle page, la question se tranche en fonction du cahier des charges, pas des spécificités du langage.
Modifié par Greg_Lumiere (28 Apr 2016 - 14:26)
C'est pas souvent utilisé la Balise main ?

Lorsque je visite un site j'aime bien voir comment il a été créer comment il est schématiser ect..

Mais j'en ai jamais vue qui utilise la balise <main>

On croise souvent 

<div role="main">


Pourquoi ?
Il y a des soucis de compatibilité ?

( Désolé si je pose trop de question Smiley murf )
Modifié par Golderen (29 Apr 2016 - 09:22)
Golderen a écrit :
Pourquoi ? Il y a des soucis de compatibilité ?
A la sortie d'Html5 oui, bien sûr qu'il y avait des soucis de compatibilité !
C'est pourquoi quand on prend en considération les visiteurs qui naviguent via IE9 et inférieur on prévoit un Javascript qui a pour fonction de créer dans le DOM les balises Html5.

Mais on peut dire aujourd'hui que ceci est quasiment de l'histoire ancienne. On met encore le script au cas où mais c'est surtout un cas de conscience.


Golderen a écrit :
( Désolé si je pose trop de question Smiley murf )
C'est une façon d'obtenir des réponses. En même temps le forum est là pour ça et si ça me dérangeait tant que ça... je n'ai aucune obligation de participation (Alsas refuse de me rémunérer, ils parlent de volontariat ; pfff)

D'ailleurs si tu a encore une question vas-y, je suis chaud là Smiley err
Pages :
Sujet clos
Aller à