Questions sur les éléments sémantiques (HTML5)

[kartyr]

Bonjour,

J'aurai quelques questions concernant le bon usage des éléments sémantiques.

1/ Le titre <h1> d'une page doit‑il être dans <main>, dans <header> ou entre les deux ?

<header>...</header>
<h1>...</h1>
<main>...</main>
<aside>...</aside>
<footer></footer>

<header>...</header>
<main><h1>...</h1>...</main>
<aside>...</aside>
<footer></footer>

2/ Si la page est constituée principalement d'un article, la balise <h1> doit‑elle être dans le premier bloc article ?

<main>
<h1>...</h1>...
<article>...</article>
</main>

<main>
<article><h1>...</h1>...</article>
</main>

3/ Dans le cas d'une énumération d’articles (par exemple, sur la page d'accueil, la <h2>liste des derniers articles publiés</h2>), qu'est‑ce qui est le mieux ?

<article>
<a ...>Titre 1</a>
<p>Résumé...</p>
</article>

ou

<article>
<h3><a ...>Titre 1</a></h3>
<p>Résumé...</p>
</article>

ou autre chose?

Merci.

 

[kb-seo]

Bonjour

Pour répondre à la question 1, voici aujourd'hui la bonne pratique

<header>
</header>
<main>
<h1>Titre de l'article ou de la page</h1>
<p>Contenu...</p>
</main>

Il existe aussi des outils qui valident la syntaxe

• https://gsnedders.html5.org/outliner/
• Ext chrome :https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
• https://wave.webaim.org/

J'espère que cela t'aidera
Bonne journée!

 

[anemone-clown]

Toutes les balises "sémantiques du HTML" sont surtout interprétées par la taille de la police. Grosso modo, ça n'a pas beaucoup d'importance. Si un H3 est affiché en 30 px bold noir quand le H1 est affiché en 20 px cyan sur blanc, le H3 deviendra prioritaire. Autrement, voir la réponse de kb-seo.

 

[emualliug]

Niveau SEO je doute que ça ait un impact, et je ne suis pas convaincu non plus qu'il y ait de manière ultime.

WHATWG fournit des exemples (la doc pour main, la doc pour les éléments de section).

En résumé, il faut que ça reste cohérent.

1/ Le titre <h1> d'une page doit‑il être dans <main>, dans <header> ou entre les deux ?

Ça dépend sur quoi il porte : si c'est le titre du site, en dehors du main, si c'est le titre du contenu reproduit dans le main, à l'intérieur de celui-ci.

Un header n'a de sens dans un contenu que si c'est utile. Je ne vois pas l'intérêt de faire un header pour y mettre juste un h1. Par contre s'il y a un titre avec un sous titre, ça pourrait justifier un hgroup, et si en plus il y a un plan, des infos sur l'auteur, un temps de lecture, le tout dans un header.

2/ Si la page est constituée principalement d'un article, la balise <h1> doit‑elle être dans le premier bloc article ?

S'il n'y a qu'un élément dans main, je ne vois pas l'intérêt de l'encapsuler dans une balise article. L'objectif de cette balise est d'identifier des blocs de contenus autonomes. Et précision que article, en tant que balise ne se limite pas à la définition journalistique du terme (ce peut être un commentaire par exemple).

3/ Dans le cas d'une énumération d’articles (par exemple, sur la page d'accueil, la <h2>liste des derniers articles publiés</h2>), qu'est‑ce qui est le mieux ?

Mieux vaut utiliser des balises pour identifier les contenus :

<aside>
    <h2>
        Articles en lien
    </h2>
    <article>
        <hgroup>
            <h3>
                Titre
            </h3>
            <p>
                Publié le …
            </p>
        </hgroup>
        <p>
            Quelques mots pour décrire l'article
        </p>
    </article>
</aside>

 

[kartyr]

Merci pour vos réponses.

 

[EUSKAL CONSEIL]

Discussion passionnante sur la structure HTML5. Pour répondre à kartyr, les conseils de kb-seo et emualliug sur le main et l'usage de article sont de très bonnes bases techniques.

Cependant, si on se place dans la perspective du SEO de 2026, j'aimerais ouvrir la réflexion sur un point souvent omis : la résonance entre la structure HTML et le Graphe d'Entité.

Aujourd'hui, une balise techniquement parfaite ne suffit plus à 'exposer' un contenu si elle n'est pas suturée sémantiquement à l'expertise réelle du site. L'algorithme ne cherche plus seulement à 'lire' votre page, il cherche à valider si votre entité est légitime pour traiter ce sujet.