Pourquoi H2 est-il plus grand que H1 ?

Question

Dans l'extrait de code suivant, pourquoi le contenu H2 est-il plus grand que le contenu H1 ?

<article>
    <section>
    <header>
        <h1>First Header</h1>
    </header>
    </section>
    <section>
    <header>
        <h2>Second Header</h2>
    </header>
    </section>
</article>

http://jsfiddle.net/abugp/

Pourquoi le contenu H1 est-il plus important dans l'extrait ci-dessous, mais pas dans l'extrait ci-dessus ?

<h1>First Line</h1>
<h2>Second Line</h2>

http://jsfiddle.net/59T43/

Answer 1

Comme vous n'avez spécifié aucun style, la taille des titres est déterminée par la feuille de style par défaut de votre navigateur. En particulier, cela signifie que la taille relative des deux en-têtes peut varier en fonction du navigateur de l'utilisateur.

En regardant votre bidouille dans Chrome 33, je vois bien l'effet que vous décrivez. Un clic droit sur les titres et la sélection de l'option "Inspecter l'élément" révèlent que le problème est dû à la présence de l'élément <article> et/ou <section> autour des titres.

En particulier, la feuille de style par défaut de Chrome inclut normalement les règles :

h1 { font-size: 2em }

et :

h2 { font-size: 1.5em }

Toutefois, la première règle est supplantée par la règle de l'intérieur. <article> et/ou <section> par des règles plus spécifiques, vraisemblablement destinées à réduire la taille des titres de section par rapport aux titres "pleine page" normaux :

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

La norme non standard :-webkit-any(...) correspond vraisemblablement à n'importe laquelle des balises énumérées entre les parenthèses. L'effet est que n'importe quel <h1> à l'intérieur d'un <article> , <aside> , <nav> o <section> est réduite à la taille d'une étiquette normale <h2> et tout <h1> à l'intérieur deux Ces étiquettes sont encore réduites, vraisemblablement à la taille d'une étiquette normale. <h3> ou à peu près.

Il est important de noter que la feuille de style par défaut de Chrome ne ont des règles particulières pour les <h2> de sorte qu'elles seront toujours (dans Chrome 33, en tout cas) affichées à la même taille. Ainsi, lorsqu'elles sont entourées de deux ou plusieurs <article> et/ou <section> étiquettes, <h1> devient plus petit que <h2> .

Answer 2

Cela s'explique par les exigences en matière de style de documentation. Vous trouverez des détails à l'adresse suivante Documentation HTML 5.1 @ 10.3.7 Sections et en-têtes

Answer 3

Cela fait partie de la Spécification HTML5 pour les sections et les titres :

Dans le bloc CSS suivant, x est l'abréviation du sélecteur suivant : :matches(article, aside, nav, section)

x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

Curieusement, il n'y a pas de telles règles pour h2-h6.

Answer 4

Si vous ne spécifiez aucun style, votre navigateur choisira son style par défaut. Dans le premier exemple, les h1 et h2 se trouvent à l'intérieur d'un en-tête dans une section, tandis que dans le second cas, ils se trouvent dans la racine. Il est donc admissible que le comportement soit différent.