April 10, 2012

Difference between heading inside section or before it in HTML5

Question by knittl

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 by Starx

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

...

Please fill the form - I will response as fast as I can!