#14431

Note : h1, w3c, sémantique, etc.

Je viens d’en parler par email à un lecteur, je le publie ici car ça peut servir : c’est à propos de l’élément <h1> dans une page web, et le fait qu’il ne doit y en avoir qu’un seul.

Aujourd’hui, un H1 peut être utilisé dans un élément "article" ou "section" : sémantiquement, et en HTML5, il représente alors le titre de cet article (ou cette section).

L’élément "article" est en fait considéré comme un objet isolable de la page, pouvant accueillir un titre H1 (et sa propre structure H1/H2/H3…).

http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 (en)
https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document (en)
http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html (fr)

Je sais que le validateur HTML du W3 génère un avertissement si vous avez plusieurs <h1> dans une page, mais justement : c’est un avertissement, pas une erreur.

Tu peux évidemment le changer en H2, c’est comme tu veux et rien n’est ni faux ni vrai :
– soit tu considère toute la page comme un document entier et consistant
– soit tu considère la page comme une liste d’articles indépendants et isolables.

C’est ce qu’on appelle la sémantique : le HTML, avec la version 5 (HTML5) n’est plus seulement un langage de mise en page, mais il apporte également des informations supplémentaires : un "article" représente un article, un "footer" c’est soit un pied d’article, soit un pied de page…

Là où avant, un "div" c’était juste un bloc, sans véritable sens à lui seul.

Les moteurs de recherche (comme le dit un des liens précédents) préfèrent la sémantique : c’est plus organisé et plus structuré, et ça leur permet de mieux trier tes articles.


Concernant la sémantique et la SEO, j’expérimente toujours quelques trucs à des fins d’études du fonctionnement d’un moteur de recherche. Actuellement sur Couleur-science, vous pouvez regarder le code source, j’ai placé des marqueurs de données structurée, avec "itemscope".

Ainsi, au lieu de mettre 
<article>
<p>publié par Timo</p>
…

je mets ça :

<article itemscope itemtype="http://schema.org/BlogPosting">
<p itemprop="author" itemscope itemtype="https://schema.org/Person">Publié par <span itemprop="name" rel="author">Timo<span></p>
…


Peut-être que c’est lourd un peu, mais ces choses sont utilisées par les moteurs de recherche et les navigateurs pour afficher des informations supplémentaires. Ce sont un peu des données EXIF pour les page web.
On définit ainsi l’auteur, la date de publication, les images, les logo, les articles, etc.

C’est intéressant.
http://lehollandaisvolant.net/?mode=links&id=20160202182838