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.
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
footer, and well as various kinds of HTML elements such as images, paragraphs, list, etc.
section element essentially replaces the generic container
div element, which in past practice has been identified with an
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
Here’s some W3C example code showing how an
article (another new semantic element in HTML5) could include some
section elements. The code:
<p>Tasty, delicious fruit!</p>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<p>These bright red apples are the most common found in many
<p>These juicy, green apples and make a great filling for
Here’s how that displays, unstyled:
Tasty, delicious fruit!
The apple is the pomaceous fruit of the apple tree.
These bright red apples are the most common found in many
These juicy, green apples and make a great filling for
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 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
See also HTML5: The Doctype Declaration, HTML5: The nav element