Sectioning content is a new category of elements created in HTML5 to encompoass HTML elements that provide structure to HTML documents. Most of the elements in this category are new to the HTML specification, and so many people are not clear how they work or what they are for.
Sectioning Elements Explained
Sectioning content is used to divide an HTML document into sections. Each section of the document would generally have it's own header, and possibly footer, as well as content.
Prior to HTML5, the only sectioning elements designers had to work with were the div and body tags. This made the semantic markup of a document virtually impossible, even if the designer was very careful to identify specific DIVs as different sections of the page. This made pages difficult to evaluate by screen readers and other assistive devices.
HTML5 provides designers a way to differentiate the content of a web page so that it is clear what content is the “meat” of the page, and which is sidebar or even unrelated content.
Outlining with HTML5 Sectioining Elements
The other advantage to sectioning elements in HTML5 is the ability to create outlines from the sections and headers within them. These outlines rely on the the sectioning elements to create outlines of documents that contain unrelated material such as navigation for the site as a whole, advertising, legal notices and more.
HTML5 looks at the sectioning elements and the headers they contain to generate the outline of a document. For example:
<section>
<h1>My Dogs</h1>
<section>
<h2>Dogs that I Adopted, Personally</h2>
<p>I have adopted three dogs in my life: McKinley, Shasta, and Mickey.
</section>
<section>
<h2>Dogs that Were Part of My Family</h2>
<p>I have also had dogs that were adopted by my parents, but I consider them my dogs as well: Calico and Homer
</section>
<aside>
<h1>Ads</h1>
<p>Dog advertising
</aside>
<footer>
<p>© 2011 Jennifer Kyrnin
</footer>
</section>
Would have an outline format like:
- My Dogs
- Dogs that I Adopted, Personally
- Dogs that Were Part of My Family
- Ads
You notice that the footer is not included in the outline. That is because it is not a sectioning element.
Sectioning Elements
This is a list of the sectioning elements in HTML5:
Also the blockquote and figure tags can be used as a sectioning root—with sectioning content included inside them.
