HTML5: The section element

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

2 thoughts on “HTML5: The section element

  1. Perhaps one should add that sections make content copy/cut and pasteable in new ways. Since the level of nesting decide what level an heading is.

    Take a blog. On the front page you’d want every new post to be an h2 and the h1 to be for the whole blog. And every subheading for each entry to be h3.

    On an entry’s individual page you’d like the h1 to be that entry’s title, and the subheadings to be h2. Today that logic must be accomplished with server side code, which most blog-systems don’t have.

    With HTML 5 you’d just wrap each entry on the front page in a section, and all headings are automatically demoted one level.

    Caveat: No browser or assistive technology support this semantc aspect of sections yet. And they probably won’t for a few years.

Leave a Reply