Search code examples
htmlsemanticshtml-heading

Difference between heading inside section or before it in HTML5

In HTML5, what is the difference between a section with a heading as child element and a section which is the next sibling of a heading element? Does the same difference hold for div elements instead of section?

<section>
<h1>First section</h1>
<!-- other content -->
</section>

<!-- vs. -->

<h1>Second section</h1>
<section>
<!-- other content -->
</section>
Solution

  • The biggest and most important difference is how outlining algorithms will parse the html page. Since heading elements offer no way to mark the end of the section they relate to; they cannot nest either. <section> elements can be nested, and thus allow to properly markup a document's outline.

    smashing magazine has a detailed explanation of how it works and how it can and should be used, they also provide examples and common pitfalls.