HTML - Sections (Sectioning Content Element)
Table of Contents
About
Sectioning content or sectioning element are element that creates a logical section
A section in HTML logically groups content by thematic.
Each section can have one 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:
Articles Related
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.
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:
- HTML - Article Element
- HTML - Nav element
heading and HTML - Footer elements inside this sectioning element are only for this sectioning element.
In other word, they define the scope of the heading 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