What are sectioning roots? Let’s take a look at this HTML5 feature and whether or not sectioning roots are important to your webpages.

Sectioning roots were introduced in HTML5 (formerly referred to by the W3C as HTML 5, but now branded without a space). Knowing all about them are not going to be important to your daily work as a designer or developer.

Here is a run-down of the very specific, yet short definition.

Defining Sectioning Roots

Section roots are mostly what they sound like.

Solid Statement: Section roots break out sections of a document into their own separate outlines. They are ‘root’ objects that have no ancestors.

According to the W3C, the only HTML5 elements that are section roots are body, blockquote, fieldset, figure, and td.

These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

Therefore, this blockquote above from the W3C could contain its own headings and sections, but they would not appear in an outline of this document. Likewise, a form’s fieldset or a table’s td cell would act the same.

Does it Matter to Me?

Right now, not really. I am always a proponent of quality, semantic coding. Therefore, I build sites with the best markup I can and pay attention to these structures even when it doesn’t change the result.

Sectioning roots are purely for outlining purposes. With the body tag being the main element, there is actually very little to worry yourself with and it certainly won’t affect the look of your page.

Assistive technology certainly doesn’t concern itself with these semantics yet and search engines don’t seem to react either. These things are destined to be picked up eventually, so start coding properly now and be ahead of the curve.