HTML En-tête Sémantique

Question

Je fais un exercice de sémantique HTML dans le cadre de mon cours universitaire et j'ai fini par être curieux de savoir de quelle façon les en-têtes devraient être mis en page. Permettez-moi de donner 2 exemples:

Exemple 1:

<main> 
    <header> 
    <h1>Main Header</h1> 
    </header> 
    <section> 
    <header> 
     <h1>Section Header</h1> 
    </header> 
    <p>Some content</p> 
    </section> 
</main> 

Exemple 2:

<main> 
    <header> 
    <h1>Main Header</h1> 
    </header> 
    <section> 
    <header> 
     <h2>Section Header</h2> 
    </header> 
    <p>Content here</p> 
    </section> 
</main> 

Ma principale merveille ici est que vous utilisez un dépérir h1 ou h2 à l'intérieur des sections. Si je comprends bien, l'exemple 1 est plus sémantiquement correct car (au moins en chrome) le HTML brut stylisera de telle sorte que les en-têtes de section soient plus petits. Cependant, auparavant, j'ai utilisé le chemin de l'exemple 2, et dans ma classe en année 1, on ne m'a jamais dit que c'était incorrect. Parce que je suis évalué sur la sémantique dans cet exercice, et parce que j'ai besoin de nourrir ma curiosité, j'aimerais savoir lequel est le plus correct.

Answer 1

Source: http://w3c.github.io/html/sections.html#headings-and-sections

«Les articles peuvent contenir des rubriques d'un rang égal à leur section niveau d'imbrication Les auteurs doivent utiliser des titres de rang approprié pour le niveau d'imbrication de la section. »

L'exemple 2 semble être ce que le W3C suggère d'utiliser dans les exemples suivants après cette citation.

Ceci est probablement basé sur l'opinion, donc je ferme cette question avec cette information.