5568 sujets

Sémantique web et HTML

A propos de la balise H1

Bonjour à vous,

Je viens d'apprendre qu'il ne faut pas utiliser plus d'une fois la balise <h1> dans une même page web. L'argument avancé est que cette balise doit être réservée pour le titre principal de la page et que s'il y a d'autres titres aussi importants il faut utiliser la balise <h2> avec les mêmes propriétés graphiques que la <h1>.

Pourtant, j'ai fait des recherches sur le web et j'ai trouvé ce lien : https://www.emaginance.com/plusieurs-balises-https://www.emaginance.com/plusieurs-balises-h1/#:~:text=Le%20mythe%20d'une%20sanction
qui dit que c'est faux et qu'on peut utiliser plusieurs balises <h1> dans une même page mais de façon intelligente.

J'ai testé et le validator du W3C m'envoie effectivement un message d'alerte que voici :
upload/1665631993-62242-capture.png
j'ai effectué ce test avec le code HTML suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Test sur les titres</title>
</head>
<body>
	<main>
		<section>
			<article>
				<h1>Titre 1</h1>
				<p>bla bla bla bla</p>
			</article>
			<article>
				<h2>Titre 2</h2>
				<p>bla bla bla bla</p>
			</article>
			<article>
				<h2>Titre 3</h2>
				<p>bla bla bla bla</p>
			</article>
			<article>
				<h2>Titre 4</h2>
				<p>bla bla bla bla</p>
			</article>
		</section>
	</main>
</body>
</html>


Cela me paraît étrange. L'un de vous saurait m'expliquer pourquoi il ne faut pas utiliser plus d'une fois la balise <h1> dans une même page ?
Modifié par ObiJuanKenobi (13 Oct 2022 - 13:37)
Théoriquement on peut utiliser la balise <h1> une fois bloc.
En pratique tout le monde ne l’utilise que pour le titre de page, chaque section ayant une balises <h2> etc.
Il est vraisemblable que les "renifleurs" prennent en compte cette pratique mais cela n’est pas certain.
Les balises <h1> à <h6> datent du tout début du web, à une époque où le CSS n’existait pas. La présentation de ces balises était incluse dans les quelques navigateurs de l’époque. Du reste elle y est toujours, ce qui nécessite de bien les styler soi même pour éviter des présentations disgracieuses.
Salut,
les discussions sur la balise h1 sont en effet très nombreuses et déroutantes.
Je crois, qu'en dehors des chapelles, il faut avoir un peu de bon sens. Si la structure que l'on met en place mérite vraiment deux h1 dans une page, on les mets. Sinon, on en met qu'un.
La question étant, pourquoi avoir besoin de deux balises h1 dans une page ? Normalement, il y a un titre dominant par page, les autres titres de paragraphes vont sur les hn suivants. On peut mettre h2 ou h3 sur plusieurs paragraphes identiques en poids, c'est en tous cas une pratique que j'observe. De h2 à h6, il y a alors de quoi faire, sans doubler la h1.
Si tu lis bien le message en Anglais de ton test, qui n'est qu'un message d'avertissement, tu verras qu'ils précisent que uniquement les balises h1 seront traitées par les lecteurs d'écrans comme titre principal de la page. Ils ne disent pas qu'on ne peut pas mettre un autre h1. Consider, en Anglais, ça veut dire envisager, ça ne veut pas dire interdit ou mal.
As-tu demandé à Monsieur Google, puisque c'est lui qui fait la pluie et le beau temps sur le net (et sur les balises hn...).
Merci Bongota, ton explication est très clair.

Mais je ne comprends pas pour quoi je n'ai aucun avertissement si j'ai ce code HTML :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <section>
        <h1>Titre</h1>
        <p>bla bla bla bla</p>
    </section>
</body>
</html>
voilà la capture écran de Validator :
upload/1665660875-62242-capture1.png
alors que le code du début de ce post m'envoie deux avertissements quand bien même je n'utilise qu'une seule balise <h1>. Autrement dit, pourquoi Validator m'averti pour le premier code HTML et pour le second il ne me dit rien ?

C'est étrange pour moi.
Modifié par ObiJuanKenobi (13 Oct 2022 - 13:40)
Je suppose que c'est parce que dans le premier cas, il y a beaucoup plus de balises et il donne un avertissement général, voyant plus de code. Dans le premier cas, tu avais aussi ajouté <article> en plus. La détection n'a pas été la même. Tout ça sont des suppositions, il est un peu difficile de se mettre dans la peau du validateur...
Une autre particularité que j'ai aussi remarquée, c'est que le validateur peut s'arrêter après n erreurs et ne pas aller plus loin, nous donnant l'illusion que seules les erreurs listées sont à corriger.
Je te conseille de ne pas attacher trop d'importance à tout ça et d'aller tester des sites célèbres et très visités. On y trouve beaucoup d'erreurs, parfois flagrantes...
Mais si on peut être complètement valide, c'est mieux quand même.
J'ai compris !

Pour éviter les avertissements de Validator, il faut que la balise <h1> soit en dehors de la balise <article> mais peut être à l'intérieur des balises <main> et <section>. Par contre, si on utilise les balises <article> et <section>, on doit utiliser une des balises <hn> restantes pour ne pas avoir les messages d'avertissement de Validator.

J'ai testé avec ce code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Titre 1</h1>
    <main>
		<section>
            <h2>Titre secondaire</h2>
			<article>
                <h3>Titre secondaire</h3>
				<p>bla bla bla bla</p>
			</article>
		</section>
	</main>
</body>
</html>

Et voilà la réponse de Validator :
upload/1665667372-62242-capture.png
Modifié par ObiJuanKenobi (13 Oct 2022 - 15:24)
Sujet clos
Aller à