Sectioning content or sectioning element are elements that creates a logical section
A section in HTML logically groups content by thematic.
Each section can have one heading or a group of heading associated with it, and can contain any number of further nested sections.
The outline is a list of sections
Each sectioning element potentially has:
Examples of sections would be:
A web site's home page could be split into sections for:
In this example, a book author has marked up some sections with the section element The section represeents:
<header>
<hgroup>
<h1>My Book</h1>
<h2>Subtitle: A sample with not much content</h2>
</hgroup>
<p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
<h1>My First Chapter</h1>
<p>This is the first of my chapters. It doesn't say much.</p>
<p>But it has two paragraphs!</p>
</section>
<section class="chapter">
<h1>It Continues: The Second Chapter</h1>
<p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="appendix">
<h1>Appendix A: Overview of Examples</h1>
<p>These are demonstrations.</p>
</section>
A section is:
Because section are the elements of the document outline, they are an important helps for the navigation.
If a section content is not complete without other section, you should group them in an article.
The sectioning elements are:
The Headings are always attached to their parent section and never rise above.
In the following example, the first h1 does not actually describe the page header; it describes the header for the second half of the page:
<!DOCTYPE HTML>
<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
<section>
<h1>A plea from our caretakers</h1>
<p>Please, we beg of you, send help! We're stuck in the server room!</p>
</section>
<h1>Feathers</h1>
<p>Epidermal growths.</p>
The resulting outline would be:
1. (untitled page)
1. A plea from our caretakers
2. Feathers