Nesting HTML5 section tags

Question

Is this a correct way to use the <section> tag?

<section id="container">
   <section id="outer">
      <section id="inner">
      </section>
   </section>
</section>

I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?

Answer 1

If you are just using these elements to place things in some position / style things, then you should probably be using divs.

Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:

http://html5doctor.com/the-section-element/

From the spec:

NOTE: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Having said that, it's perfectly acceptable to nest section elements. Maybe something like:

<section>
    <h1>Portishead</h1>
    <p>Portishead are a cool band from Bristol</p>
    <section>
        <h1>Dummy (album)</h1>
        <p>some info....</p>
        <img src="..." />
    </section>
    <section>
        <h1>Portishead (album)</h1>
        <p>some other info info....</p>
        <img src="..." />
    </section>
</section>

Answer 2

Note:

My answer is severely out-of-date, and no longer contains sound advice given the changes to HTML that have happened in the last decade. I will be leaving this answer as-is for historical context, but please be aware that the structure suggested is not best practice—particularly around the use of the obsolete document outline .

Short answer: The code as you've provided is not semantically valid.

Long answer:

section elements are meant to mark up sections of content. Each section of content (ie Introduction, Abstract, content, conclusion) could have subsections.

If you're using those elements for structural purpose, you should be using div elements instead. They are semantically meaningless.

This would be more semantic:

<section id="introduction">
  <div id="outer">
    <div id="inner">
      Some content
    </div>
  </div>
</section>

This would be a semantic way of marking up nested sections:

<section id="content">
  <h1>Fizz Buzz</h1>
  <section id="chapter-1">
    <h1>Foo bar baz</h1>
    ...
  </section>
  <section id="chapter-2">
    <h1>Lorem ipsum dolor</h1>
    ...
  </section>
  ....
</section>

Answer 3

My personal recommendation would be to utilize semantic structure as much as possible when you create HTML5 layouts. As other posters have indicated, nesting section elements is totally acceptable , however you need to just make sure it makes sense to do so.

I personally use a few patterns that I've put together based on some research I've done over the course of the last year or so. The most common situation for using nested section elements is to provide ARIA roles for the main content of the document (see "site layout" example below)

Note: assumes body/html elements are present, etc

Site Layout

<header class="header" role="banner">
  ....
</header>

<!-- used once per page, implies role="main" -->   
<main> 
  <!-- declares page content to be a document and not a web app -->
  <section id="wrapper" role="document"> 

   <section class="hero">
      ....
   </section>
      ....
   <section class="content">

   </section>

  </section>
</main>

<footer class="footer" role="footer">

      ....

</footer>

Single-Page Content Layout

Note: This layout applies to a page with a singular/topic/object and isn't suitable for all use cases

<article>
  <header>
    <h1>Page Headline/Title</h1>
  </header>
  <section class="page-content">
      ....
  </section>
  <!-- if this is a post or something with metadata/authorship info... -->
  <footer>
    ....
  </footer>
</article>

I use the tag for the class name on the shell header/footer elements as well as landmark roles to insure I can always distinguish them from other header/footer elements within the page (eg easy CSS scoping).

References

• role="document" https://www.w3.org/TR/wai-aria/roles#document

  A region containing related information that is declared as document content, as opposed to a web application.

• "Why the <main> element doesn't need a role attribute": https://www.w3.org/TR/2012/WD-html-main-element-20121217/

  The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark role=main.

• "W3.org/Wiki explanation of nesting <section> elements" - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element

  The section element is a container for document content that has a related theme, and represents the section of a document that is grouped around a general concept. Everything within a section element is related. Also section elements may be nested if necessary . The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way. For example, the section element may create items inside an outline of a document, or divide page content into related pieces (like an Introduction) followed by some background information on the topic.

Answer 4

An updated method (as far as I understand it) could be something like this:

<main id="content">
  <div id="inner-wrapper">
    <section>
      <h1>Section Title</h1>
      ...
    </section>
    <section>
      <h1>Section Title</h1>
      ...
    </section>
  </div>
</main>

main {
  width: 100%;
  ...
  ...
}

#inner_wrapper {
  max-width: 80%;
  margin: 0 auto;
}

See: http://www.w3.org/TR/html-main-element/ , http://www.sitepoint.com/html5-main-element/ or http://html5doctor.com/the-main-element/ for more info.

Answer 5

A useful way to think through this is to consider how a screen reader would see your site. Imagine (and in fact you should test this for yourself) the screenreader announcing the word 'section' before reading the content inside your <section> tag.

If that doesn't make logical sense then maybe you've got your items ordered wrong.

Check out aria region role .

I don't know exactly how screen readers read nested sections but if the logical sections on your page don't have a hierarchy then your HTML shouldn't either.

eg. (this is meant to represent HTML structure)

GOOD

section aria-label="dogs"
   section aria-label="labradors"
   section aria-labels="terriers"

section aria-label="cats"
   section aria-label="sphynx"
   section aria-label="persian"

BAD

Section used solely to group two other sections, but without a real meaning of its own as a 'section'.

section style="display: flex; flex-direction: row"
   section aria-label="news"
   section aria-labels="sport"

Answer 6

HTML5 also allows for setups such as:

<section>

<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>

</section>

multiple times on the same page, so you don't have just the one header, it goes a lot deeper than this, but it's worth checking out.

Check out the http://gsnedders.html5.org/outliner/