This article is one in a series of brief discussions about the proposed specifications for HTML 5. View the Working Draft for HTML 5 at the W3C.

The section element is a new semantic element. It groups related content. This might be a part or chapter in a book, a section in a chapter, or  anything that had its own heading in HTML 4. Each section may include other new semantic elements such as header and footer, and well as various kinds of HTML elements such as images, paragraphs, list, etc.

The section element essentially replaces the generic container div element, which in past practice has been identified with an id or class attribute for styling purposes. The div element carries no structural meta information with it, however. Presumably, one would now assign ids or classes to sections of the page for styling purposes. As you’ll see in the next example, a page can now have more than one  header and footer element, so the old habit of identifying these parts of a page with an id may be less useful than using class designations or descendant selectors based on the ID of an individual article.

A page could have a number of sections, each with header and footer elements.

Here’s some W3C example code showing how an article (another new semantic element in HTML5) could include some section elements. The code:

<article>
<header>
<h1>Apples</h1>
<p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples and make a great filling for
apple pies.</p>
</section>
</article>

Here’s how that displays, unstyled:

Apples

Tasty, delicious fruit!

The apple is the pomaceous fruit of the apple tree.

Red Delicious

These bright red apples are the most common found in many
supermarkets.

Granny Smith

These juicy, green apples and make a great filling for
apple pies.

The Opera browser, Safari, Firefox, and, to a more limited extent Internet Explorer, support some or most of the HTML5 specifications, including the section element.

One section element can be nested inside another section, in a similar manner to the way div elements are now nested. Or, using the chapter analogy, one section of a chapter might have several nested sections, each with its own header and possibly footer.

See also HTML5: The Doctype Declaration, HTML5: The nav element