CODEWITHSUNDEEP
htmlsemanticshtml-heading
knittl
knittl

Reputation: 265817

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>

Upvotes: 2

Views: 1297

Answers (3)

knittl
knittl

Reputation: 265817

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.

Upvotes: 2

Starx
Starx

Reputation: 79041

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

Upvotes: 1

Rob
Rob

Reputation: 15168

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.

Upvotes: 0

Related Questions