Nesting HTML5 section tags

Question

Is this a correct way to use the

tag?

Answer 1

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

  ....


   
 
  
  
 

   

      ....
   
      ....
   


   

  




      ....

Single-Page Content Layout

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

  

    
Page Headline/Title
  
  

      ....
  
  
  

    ....
  

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 (e.g. 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

  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

  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.