I'm never quite sure what is the best, most semantic way to handle heading levels in HTML5 markup, when you have multiple sections. On one hand it makes sense to have an H1 heading as a title of a section, or an article, but it leads to these weird situations when your whole document outline is made out of H1 headings.
<header>
<h1>Site heading</h1>
</header>
...
<section>
<h1>Section heading</h1>
<article>
<h1>Article heading</h1>
...
</article>
...
<section>
<h1>Subsection heading</h1>
<article>
<h1>Subsection article heading</h1>
...
</article>
...
</section>
</section>
Is this really the way to do it in HTML5? It feels a bit like the heading tags don't carry no semantic value anymore. When you see an H1 tag in a markup it doesn't tell you anything about the headings position in the document's outline.
On the other hand, when you mark your headings hierarchically, like you would before the HTML5's markup, it creates a situations where one article has a different heading level than another, while having the same level as a subsection, which also doesn't make much sense.
<header>
<h1>Site heading</h1>
</header>
...
<section>
<h2>Section heading</h2>
<article>
<h3>Article heading</h3>
...
</article>
...
<section>
<h3>Subsection heading</h3>
<article>
<h4>Subsection article heading</h4>
...
</article>
...
</section>
</section>
From what I read, I understand that the first way is the correct way in HTML5, but it just doesn't feel right. Having often a whole site without single third level heading feels weird, but it might be just a case of old habits dying hard on my part, maybe?
h1
as being at different levels according to nesting is purely theoretical, not implemented in browsers or other software.h
tags. And the higher level article uses the same tag, as the heading of the subsection, while they are quite a different thing.