HTML - Sections (Sectioning Content Element)


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:

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


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.


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:

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.


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:

<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
 <h1>A plea from our caretakers</h1>
 <p>Please, we beg of you, send help! We're stuck in the server room!</p>
<p>Epidermal growths.</p>

The resulting outline would be:

1. (untitled page)
    1. A plea from our caretakers
2. Feathers

Documentation / Reference

Powered by ComboStrap