I am doing a HTML semantics exercise as part of my University course and I ended up being curious as to which way headers should be laid out. Let me give 2 examples:
Example 1:
<main>
<header>
<h1>Main Header</h1>
</header>
<section>
<header>
<h1>Section Header</h1>
</header>
<p>Some content</p>
</section>
</main>
Example 2:
<main>
<header>
<h1>Main Header</h1>
</header>
<section>
<header>
<h2>Section Header</h2>
</header>
<p>Content here</p>
</section>
</main>
My main wonder here is wither you use a h1 or h2 inside the sections. If I understand right example 1 is more semantically correct as (at least in chrome) the raw html will style in such a way where the section headers are smaller. However, previously I have used the way in example 2, and in my class in year 1 I was never told this was incorrect.
Because I'm being graded on semantics in this exercise, and because I need to feed my curiosity, I'd love to know which is more correct.
Source: http://w3c.github.io/html/sections.html#headings-and-sections
"Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level."
Example 2 seems to be what W3C is suggesting to use in following examples after that quote.
This is probably all opinion based so I'm closing this question with this information.