Difference between heading inside section or before it in HTML5

Question

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>

Answer 1

The answers will highly depend upon logical view.

<section>
  <h1>....</h1>
</section>

On the above case <h1> denotes the heading of the section. Now lets look at another example:

<div id="info">
    <h1>Sections:</h1>
    <section>
       <h1> Section: 1</h1>
    </section>
    <section>
       <h2> Section: 2</h2>
    </section>
</div>

This the defines a major portion of a page called sections, where as the heading inside each heading, only tend to emphasis the contains within the section i.e of a particular type of section like section 1.

Hope it helps

Answer 2

In the first, the h1 is a heading for the content of that section while, in the second, it's a heading for all the content below the h1 which may include more than one section.

The biggest difference between the two is that the section, in the second example, can contain an additional its own h1 element.

Answer 3

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 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.