Sémantique d'un article d'un blog

Bonjour à tous,

Je suis actuellement en train de créer un blog, et je me pose des questions sur la sémantique HTML5 d'une page article. En effet, prenons l'exemple d'article connexe: un article connexe va être un article contenu dans un aside, composé d'une illustration et d'un titre. Ce titre sera un H1 sur la page de l'article connexe concerné. Mon article connexe doit-il donc prendre cette forme?:

<aside>

<article>
<h1>Titre de l'article</h1>
<p>Description...</p>
</article>

<article>
<h1>Titre de l'article</h1>
<p>Description...</p>
</article>

<article>
<h1>Titre de l'article</h1>
<p>Description...</p>
</article>

</aside>

Je joins une image du type de structure que j'imagine pour le moment. Pourriez-vous m'indiquer si elle est sémantiquement correcte et pourquoi?

Merci d'avance!
Modifié par DrasLeona (14 Oct 2015 - 14:45)

Salut,

D'après mes souvenirs, il ne doit y avoir qu'un H1 par page.

Cdlt,

Ce qui était vrai avec le html4 ne l'ai plus aujourd'hui.
Il est possible d'avoir plusieurs h1 par page.
Recommandation W3c:
http://www.w3.org/TR/html5/sections.html#the-aside-element


En revanche, si tu t’évertue à vouloir rajouter des balises h1 pour une question de reférencement, il n'a pas encore été démontré que rajouter ces balises (même dans les sections) avait une influence positive ou négatif sur le réf. Dans le doute, il vaut mieux s'abstenir, et se contenter que d'un seul h1 dont est sur de son impact (moindre que le title d'ailleurs).
Modifié par J_B (16 Oct 2015 - 17:24)

Référencement ou pas, la norme HTML5 va dans ce sens. Donc non, ne pas hésiter à utiliser plusieurs H1 par page si c'est sémantiquement pertinent. Ici ça peut lêtre selon la nouvelle formule de hiérarchisation des titres de HTML5.

Attention toutefois aux anciens lecteurs d'écran qui interprètent mal ce nouveau modèle de hiérarchie.

HS: je trouve dommage qu'on ramène systématiquement les questions de sémantique au simple référencement. JE mets des H1 pertinents selon la structure, c'est uniquement pour le référencement ? Non, c'est pour fournir un document qui certes pourra être bien référencé, mais surtout qui a du sens même quand on le lit en braille, en lecture vocale, ou sur un écran en noir et blanc avec les CSS désactivés.
Modifié par QuentinC (16 Oct 2015 - 21:09)

C'est vrai, mais si j'ai pris la peine de le préciser c'est parce que beaucoup de personne pense que la sémantique est avant tout une affaire de référencement et ne vont pas penser au malvoyant, non voyant et divers lecteur.

Même si c'est sémantiquement correct, ce n'est pas recommandé. C'est trop tôt. Et je m'appuie sur des professionnel qui passe leur temps à faire des test "labo". Après chacun fait comme il le veut.

Bonjour, merci pour vos réponses.

Il est vrai que la présence de plusieurs H1 doit avoir un sens sémantique et non de référencement. Pour moi, il me semble logique que les titres des articles annexes soient des H1, puisqu'il seront le H1 de la page vers laquelle ils pointent. Et ils ne sont pas des h2 puisqu'ils ne sont pas des sous-parties de l'article.

Après il est difficile de savoir si un h1 dans un aside aura moins de poids que le h1 global, et si il ne va pas perturber le référencement global de la page?

Quand au reste de la structure, qu'en pensez-vous? Les commentaires sont dans la balise article. Je ne sais pas si je dois les sortir ou pas. En soit je mettrais bien l'article isolé (ce qui valoriserait le contenu) et en même temps les commentaires et les articles annexes sont directement liés à cet article, on peut dire qu'ils en font "partie".

DrasLeona a écrit :
Pour moi, il me semble logique que les titres des articles annexes soient des H1, puisqu'il seront le H1 de la page vers laquelle ils pointent. Et ils ne sont pas des h2 puisqu'ils ne sont pas des sous-parties de l'article.

Il sont peut-être H1 dans la page cible mais dans la page en cours cela signifie qu'ils ont le même poids que le titre global de la page.
Les titres de tes encadrés sont très importants dans la page qui les concerne mais en tant que titres d'articles connexes, je ne vois pas pourquoi ils ne seraient pas des titres de second rang.

D'ailleurs ton aside Articles connexes ressemble plus pour moi à un élément de navigation (à moins que le contenu intégral de l'article apparaîsse) qu'à des mini-articles.

Ceci était vrai avec HTML4 comme l'a signalé J_B.
Avec HTML5 aujourd'hui il est tout à fait possible d'avoir plusieurs H1, d'où ma réflexion à ce sujet! Notamment dans des asides. Et d'un point de vue sémantique, ils ne sont pas des h2, ni des h3 ni des hn. Or si ils ne sont pas des titres, que sont-ils?

Les articles connexes sont des articles qui ont la même thématique, ou traitent un sujet parallèle au sujet de la page actuelle, or la balise nav ne fait pas ce lien. Une balise section pourrait éventuellement être adaptée, mais l'aside me paraît être un choix plus approprié.

Juste pour illustrer la validité de plusieurs h1: https://jsfiddle.net/ksf85ztj/

h1 ne représente pas le titre d'une page, mais le titre d'un contexte. Une page est un contexte, une section est un contexte, un article est un contexte, aside est un contexte. C'est prévu comme ça par la norme du langage, et c'est pris en compte de façon explicite par le rendu des navigateurs.
Modifié par Manumanu (07 Nov 2015 - 11:28)

Bonjour,

Je t'invite à intégrer dans la structure, de ton code, les données structurées proposées par le site Schema. Ce qui aura un impact positif sur le référencement de votre blog. L'outil de test de Google te permettra de tester ton code et de le compléter si besoin. Ces derniers sites peuvent t'aider à élaborer au mieux ton code.

Bon courage pour la suite