Apparence par défaut des titres h1 selon leur parent.

**krissnice** · 26/01/2013, 11h52

bonjour à tous,

Je m'interroge sur -comme le titre l'indique- l'apparence par défaut dans un navigateur d'un code HTML5 basique, avec plusieurs titres h1 dans des balises différentes.
Suivant depuis peu les différents débats sur l'utilité ou la possibilité d'avoir plusieurs balises h1 dans une même page, je précise que ma question ne porte pas là-dessus.

Donc, je pars du code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="fr">
<head>
	<title>titre de la page</title>
	<meta name="description" content="ma description" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>un titre de niveau 1</h1>
	<section>
		<h1>Titre h1 de la section, ou est-ce absurde ?</h1>
		<h2>Titre h2 de la section</h2>
		<article>
			<h1>un titre de niveau 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra, velit eu dictum convallis, elit justo vulputate enim, ac commodo massa lectus quis lectus.</p>
		</article>
		<article>
			<header>
				<img src="image.png" alt="une image importante" />
				<h1>encore un titre de niveau 1</h1>
			</header>
			<h1>Ici, un h2 serait-il plus adapté, ou pas forcément ?</h1>
			<h2>un test de h2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra, velit eu dictum convallis, elit justo vulputate enim, ac commodo massa lectus quis lectus.</p>
		</article>
		<aside>
			<h1>un titre de niveau 1 pour la aside</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra, velit eu dictum convallis, elit justo vulputate enim, ac commodo massa lectus quis lectus.</p>
		</aside>
	</section>
</body>
</html>

Au lancement de cette page dans un navigateur (FF, Chrome) j'ai la surprise de voir des titres h1 de taille différente.
Soit, il y a après tout une certaine logique là dedans, la présentation ne fait que respecter les différentes balises et leur imbrication respectives.
Mais les questions qui en découlent immédiatement sont :
1. Est-ce que la mise en forme par défaut préfigure (ou témoigne) d'une certaine importance inégale (SEO parlant) pour un même type de balise (h1 en l'occurrence) ?
(ou plus clairement : un h1 d'article serait moins "important" qu'un h1 de section, lui même moins important qu'un h1 à la racine (body) ??? )

2. Pourquoi le titre h2 de la section apparait de même taille que son frère h1 ???

3. Est-ce non conseillé ou faux (invalide) de trouver des titres de sections tels que placés dans ce code ?

4. Qu'en est-il de l'apparence du titre h2 "un test de h2" qui apparaît "plus gros" que son frère h1 ?!?

Il est bien évident que ces problèmes d'apparence sont facilement réglés avec les css, mais ici c'est le résultat par défaut qui m'intéresse. Par ailleurs il est censé montrer l'importance des divers éléments "par défaut", non ?
bref je suis en train de me perdre là dessus.

Merci de votre aide et de vos éclaircissements.

**Muchos** · 26/01/2013, 18h42

D'abord, il faut comprendre le rôle des balises.

ARTICLE correspond à une portion de texte autonome et complète (billet de blog, commentaire de ce même billet…)
SECTION correspond à une section de la page ou d'une autre section (typiquement, les parties et sous-parties d'un ARTICLE)
HEADER contient le(s) titre(s) de sa section. Le faire suivre de titres n'est pas forcément pertinent.

1. Est-ce que la mise en forme par défaut préfigure (ou témoigne) d'une certaine importance inégale (SEO parlant) pour un même type de balise (h1 en l'occurrence)?

Non. Néanmoins, on pense par ex. que Google s'intéresse au plus important des H1 et c'est tout. Pour tout dire, il vaudrait mieux en termes de SEO ne mettre qu'un H1 puis passer à H2 et inférieurs pour tous les autres titres.

2. Pourquoi le titre h2 de la section apparait de même taille que son frère h1???
[…]
4. Qu'en est-il de l'apparence du titre h2 "un test de h2" qui apparaît "plus gros" que son frère h1 ?!?

Pour le premier, simplement parce que le H1 de la section est moins important que celui de la page. Il passe donc le H1 "section" en taille H2.
Pour le second, parce qu'il s'agit du H1 de niveau 3. Il passe en taille h3.
Dans tous les cas, tout cela n'est qu'une interprétation du navigateur…

3. Est-ce non conseillé ou faux (invalide) de trouver des titres de sections tels que placés dans ce code?

Pas vraiment. C'est juste un peu lourd, tout ça

En fait, vous semblez mal utiliser la balise ARTICLE (en la confondant avec SECTION) et le principe de titre/sous-titre, qui doit ressembler à ça:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<hgroup>
<h1>Titre</h1>
<h2>Sous-titre</h2>
</hgroup>

Pour plus d'infos, vous pouvez voir des exemples de structures html du WhatWG.

**krissnice** · 26/01/2013, 22h50

Merci, Muchos
C'est effectivement plus clair et les explications me conviennent.
Cependant, je trouve toujours un peu compliqué de s'y retrouver entre nouvelles recommandations et utilisation SEO.
un exemple :

En fait, vous semblez mal utiliser la balise ARTICLE (en la confondant avec SECTION)

J'avais effectivement lu qu'il valait mieux éviter les sections dans les articles, mais faire plutôt l'inverse...
La source :
http://css.4design.tl/html5-et-si-on...balise-article

Qu'en pensez- vous ?

**NoSmoking** · 27/01/2013, 14h36

Envoyé par krissnice

J'avais effectivement lu qu'il valait mieux éviter les sections dans les articles, mais faire plutôt l'inverse...
La source :
http://css.4design.tl/html5-et-si-on-evitait-la-balise-section-dans-une-balise-article

la lecture la "spécification" ne va pas dans ce sens!

http://developers.whatwg.org/section...ection-element

**thelvin** · 27/01/2013, 15h53

Envoyé par krissnice

Cependant, je trouve toujours un peu compliqué de s'y retrouver entre nouvelles recommandations et utilisation SEO.

Parce que la SEO ne fait pas partie des spécifications du web, elle est au mieux spécifiée par chaque moteur de recherche, qui reste flou pour éviter les abus et s'adapter aux évolutions.

Il arrive donc assez souvent que des experts SEO autoproclamés viennent raconter n'importe quoi pour se faire mousser. Comment leur prouver le contraire ? On peut pas plus le faire qu'ils ne peuvent prouver ce qu'ils racontent. Ce qu'ils disent est une question de foi.

Apparence par défaut des titres h1 selon leur parent. [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager