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