section element

Description

The section element is a generic sectioning element, designed to contain a thematically defined piece of document. The contents of a section are usually leaded by a heading.

Authors will usually turn to the section element to divide a long document into chapters, separate the different tabs in a tabbed application or thematically dividing the sections of a document (ads section, latest articles section, related links section, etc.).

Being the section element generic, authors are encouraged to use other sectioning elements (like main, header, footer, article, aside or nav) with more specific meaning whenever appropriate.

The section element is intended to thematically group a set of elements. If there's a need to define a block exclusively for styling or scripting purposes, the div element should be used instead.

Examples

In the following example the section element is used to enclose the different chapters of a document, which constitutes a very common usage. Note how, in this particular case, each section begins with its own heading element. Although not required, this is very likely to happen due to the nature of the element and its purpose.

<h1>The strange within</h1>
<section>
  <h2>Introduction</h2>
  <p>Boris was a lonely man...</p>
</section>
<section>
  <h2>Sitting ducks</h2>
  <p>Contradictions kept growing in his mind...</p>
</section>
<section>
  <h2>Nobodie's worries</h2>
  <p>Wandering unnoticed, Boris tried to understand people passing by...</p>
</section>

In the second example, we'll see how the section element thematically divides an entire document into different sections. We'll have the following sections: ads and related articles; the main content will be represented by the more appropriate main element.

<section>
  <h1>Advertisement</h1>
  <p><a href="http://www.super-frogger-shaper-5000.com">Super frogger shaper 5000. Everything you need to keep fit!</a></p>
</section>
<main>
  <h1>How to keep yourself fit?</h1>
  <p>Having a healthy lifestyle is very important...</p>
</main>
<section>
  <h1>Related articles</h1>
  <ul>
    <li><a href="healthy-food.html">Include healthy food in your diet</a></li>
    <li><a href="sleeping-habits.html">Adopt good sleeping habits</a></li>
  </ul>
</section>

Lastly, we'll show a section element wrapping a "related articles" section, which consists of a number of links accompanied by a small description. Yes, each one of these items is suitable for syndication and therefore, the article element will wrap it.

<section>
  <h1>Related articles</h1>
  <article>
    <h2><a href="global-warming-in-2030.html">Global warming in 2030</a></h2>
    <p>How will life be for Earth inhabitants in 2030? The effects of human behavior will be felt in the near future...</p>
  </article>
  <article>
    <h2><a href="prenting-climate-change.html">Preventing climate change</a></h2>
    <p>What can be done to stop contributing to climate change from home? Learn a few techniques that will help out your planet...</p>
  </article>
</section>

Attributes

Events