HTML - Sections (Sectioning Content Element)


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:

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


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

  • chapters
  • appendices.
  <h1>My Book</h1>
  <h2>Subtitle: A sample with not much content</h2>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
<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 class="chapter">
 <h1>It Continues: The Second Chapter</h1>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
<section class="appendix">
 <h1>Appendix A: Overview of Examples</h1>
 <p>These are demonstrations.</p>


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


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

Discover More
Content Venn
HTML - (Content of an element|Content Model)

The contents of an element are its children in the DOM tree. Each element has a content model: a description of the element's expected contents. HTML Authors must not use HTML elements anywhere except...
HTML - Article Element

article is an element that represents a section of content that forms an independent part of a document or site; For example: a magazine a newspaper article, or a blog entry. This is a more...
HTML - Footer

The footer is an element that represents the footer of: a section. or page A footer: contains information its section such as who wrote it, links to related documents, copyright data,...
HTML - Header (element)

The header in html is an element which principal use is to group ancillary information around the top level heading (ie h1). It may (not required) contain the section's heading (an h1–h6 element...
HTML - Section Element

The section element is one of the sectioning element that creates a section section elementHTML The section element is typically written with a: title attribute or heading element. Example:...
HTML - Subheading / Subtitle / SupTitle / Tagline / Slogan

This page is the HTML Markup for subheadings, alternative titles or taglines Note that before the creation of the hgroup element, HTML did not have any dedicated tag. This article shows you...
HTML - hgroup

hgroup or heading grouping is an element that: represents the heading of a section or page group a set of h1–h6 elements when the heading has multiple levels, such as: subheadings, alternative...

Share this page:
Follow us:
Task Runner