Waarom is H2 groter dan H1?

Waarom is de H2-inhoud in het volgende codefragment groter dan de H1-inhoud?

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

http://jsfiddle.net/abugp/

Waarom is de H1-inhoud groter in het onderstaande fragment, maar niet in het bovenstaande?

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

http://jsfiddle.net/59T43/

Antwoord 1, autoriteit 100%

Omdat je geen stijlen hebt gespecificeerd, wordt de grootte van de koppen bepaald door het standaard stijlblad van je browser. Dit betekent met name dat de relatieve grootte van de twee koppen kan variëren, afhankelijk van de browser van de kijker.

Als ik naar je viool in Chrome 33 kijk, zie ik het effect dat je beschrijft. Door met de rechtermuisknop op de koppen te klikken en “Inspecteer element” te selecteren, blijkt dat het probleem wordt veroorzaakt door de aanwezigheid van de tags <article>en/of <section>rond de koppen.

In het bijzonder bevat het standaardopmaakmodel van Chrome normaal gesproken de volgende regels:

h1 { font-size: 2em }

en:

h2 { font-size: 1.5em }

De eerste regel wordt echter binnen de <article>– en/of <section>-tags overschreven door enkele meer specifieke regels, vermoedelijk ontworpen om sectiekoppen kleiner te maken dan normale “volledige pagina” koppen:

:-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;
}

De niet-standaard :-webkit-any(...)selector komt vermoedelijk overeen met een van de tags die tussen haakjes staan ​​vermeld. Het effect is dat alle <h1>-koppen in een <article>, <aside>, <nav>of <section>tags wordt verkleind tot de grootte van een normale <h2>kop, en elke <h1>binnen tweevan dergelijke tags is verder naar beneden verkleind, vermoedelijk tot de grootte van een normale <h3>of zo.

Cruciaal is dat het standaard stijlblad van Chrome nietzulke speciale regels heeft voor <h2>-tags, dus dat zullen ze altijd (in ieder geval in Chrome 33) ) worden weergegeven op dezelfde grootte. Dus, wanneer omgeven door twee of meer <article>en/of <section>tags, wordt <h1>kleiner dan <h2>.

Antwoord 2, autoriteit 3%

Als u geen stijl opgeeft, kiest uw browser de standaardstijl. In het eerste voorbeeld bevinden de h1 en h2 zich in een header in een sectie, terwijl ze in het tweede geval in de root staan. Dan is het toelaatbaar dat het gedrag anders is.

Antwoord 3, autoriteit 3%

Dit maakt deel uit van de HTML5-specificatie voor secties en koppen :

In het volgende CSS-blok is xeen afkorting voor de volgende selector: :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; }

Vreemd genoeg zijn er geen dergelijke regels voor h2–h6.