CODEWITHSUNDEEP
html
Doug Cuffman
Doug Cuffman

Reputation: 51

Nesting in HTML5

My understanding (correct me if I'm wrong) is that the "section" tag in html5 is used somewhat like a wrapper div. If that is correct, ok, fine, no prob. But what about nesting? As we all know, its quite common to nest divs inside of each other. Does this mean in html5 we next "section" instead?

Upvotes: 4

Views: 5047

Answers (2)

Hezerac
Hezerac

Reputation: 334

You should not nest html5 elements the way you are describing... like so:

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

One of the most common mistakes is nesting or wrapping article elements with the section element, like so:

<section>
  <article>
    ...
  </article>
</section>
<section>
  <article>
    ...
  </article>
</section>

You can separate into logical parts a section with articles and vice-versa, but the preceding code is most likely being used for stylizing and not semantics. In that case you should replace one or the other with a div element.

The proper way to nest elements in html5 is pretty much the way you might already be familiar with... one example:

<main>
  <div>
    <div>
      <section>
        <header>
          <h1></h1>
          <time datetime=""></time>
        </header>
        <img src="" alt="">
        <p></p>
        <p></p>
        <p></p>
      </section>
    </div>
  </div>
</main>

Upvotes: 1

Inca
Inca

Reputation: 1901

Sections can be and should be nested if the content indicates so. See for example http://www.mattryall.net/blog/2008/10/html-5-headings-and-sections and http://blog.whatwg.org/is-not-just-a-semantic

From W3C (emphasis mine):

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content

Divs carry no semantic meaning about the content. Sections do. Sections therefor can and should be nested if the content requires it, like when formatting a classic chapter-paragraph-structure. Sections should not be used as hooks for purely technical matters. Divs are still the way to go for that.

Upvotes: 7

Related Questions