About

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:

  • a heading
  • and their corresponding outline. There are also certain elements that are sectioning roots. These are distinct from sectioning content, but they can also have an outline.

Example

Examples of sections would be:

  • chapters,
  • the various tabbed pages in a tabbed dialog box,
  • or the numbered sections of a thesis.

A web site's home page could be split into sections for:

  • an introduction,
  • news items,
  • and contact information.

Chapter

In this example, a book author has marked up some sections with the section element The section represeents:

  • chapters
  • appendices.
<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>

Creation

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.

Elements

The sectioning elements are:

heading, header and footer elements inside this sectioning element are only for this sectioning element.

In other word, they define the scope of the heading, header and footer element.

Syntax

Heading never rise

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

Documentation / Reference