By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Sectioning Roots in HTML

Reference explaining Sectioning Roots.

Edited: 2016-01-18 06:01

sectioning roots are elements that makes up a section in a HTML page or ducument. These so called "roots" will count as parant sections for certain semantic elements, such as the footer element. These elements will work as sectioning roots: body, td, blockquote, details, fieldset, figure.

This means that, if you place a footer element inside of body, or inside a non-sectioning root element, which is placed inside body, or inside of other non-sectioning root elements which are placed inside of body, the footer will belong to the body.

The above wont apply to sectioning elements, such as article, or section. Footers blaced inside of those, will belong to these, and not the sectioning root.

Sectioning root example

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <style type="text/css">
     footer {
      border: 1px solid #ffbc66;
      padding: 1em;
      margin: 1em;
     }
    </style>
  </head>

  <body>
    <p>The footer in this example will be attributed to the body, and not the div its placed in. This is because divs doesn't have semantic meaning, like <a href="http://brugbart.com/References/html-article-tag">article</a>, <a href="http://brugbart.com/References/html-section-tag">section</a>, or <a href="http://brugbart.com/References/sectioning-roots">sectioning roots</a>.</p>
   <div>
    <div>
     <h1>Example of how to avoid semantic errors</h1>
     <footer>
      <p>Copyright © Brugbart</p>
      <address>
        Contact <a href="/Infrastructure/contact">Brugbart</a>
      </address>
     </footer>
    </div>
   </div>
  </body>

</html>

So even though the footer in above example might, be placed virsually inside some divs on the page, it still counts as a footer for the body, and not the divs.