HTML - Sections (Sectioning Content Element)
Table of Contents
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:
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:
- implied by the presence of a heading element
- or explicitly marked up using sectioning (content) elements (and identified, typically by including a heading (h1-h6 element) as a child of the section element)
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:
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
