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.).
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.
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
<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>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.