5568 sujets

Sémantique web et HTML

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 :

<!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. Smiley eek
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 ?!? Smiley biggol

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. Smiley confus

Merci de votre aide et de vos éclaircissements.
Je parlerai de ce que je connais uniquement : les h1 ont des styles par défaut qui les différentient selon la profondeur d'imbrication des section, article, aside et nav. En revanche les h2, h3, h4, h5 et h6 ne changent pas de taille. Je ne connais pas la raison exact qui a motivé ce choix mais il est possible de n'utiliser que des h1 en HTML5, ce qui rendrait inutile l'usage des autres niveaux.

Je te conseille la lecture de cette CSS par défaut de Gecko (Firefox) :
http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css
Le passage qui t'intéressera le plus démarre à la ligne 162.