Thursday, November 6th, 2008p>Mark Pilgrim kicked off a series of posts that keep track of the goings on in HTML 5, and has now created the first article in a new series: The Road to HTML 5 – Episode 1: the section element.
The Road to HTML 5 will go into detail on a particular feature of HTML 5 rather than a broad look on waht has happened that week:
The element of the day is the
sectionelement represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.
Discussion of sections and headers dates back several years. In November 2004, Ian Hickson wrote:
Basically I want three things:
- It has to be possible to take existing markup (which correctly uses
<h6>) and wrap the sections up with
<section>(and the other new section elements) and have it be correct markup. Basically, allowing authors to replace
- It has to be possible to write new documents that use the section elements and have the headers be automatically styled to the right depth (and maybe automatically numbered, with appropriate CSS), and yet still be readable in legacy UAs, without having to think about old UAs. Basically, the header element has to be header-like in old browsers.
- It shouldn’t be too easy to end up with meaningless markup when doing either of the above. So a random
<h4>in the middle of an
<h3>has to be defined as meaning _something_.
At the moment what I’m thinking of doing is this (most of these ideas are in the draft at the moment, but mostly in contradictory ways):
The section elements would be:
The header elements would be:
<h1>gives the heading of the current section.
<header>wraps block-level content to mark the whole thing as a header, so that you can have, e.g., subtitles, or “Welcome to” paragraphs before a header, or “Presented by” kind of information.
<header>is equivalent to an
<h1>. The first highest-level header in the
<header>is the “title” of the section for outlining purposes.
<h6>are subsection headings when used in
<body>, and equivalent to
<h1>when used in one of the section elements.
<h1>automatically sizes to fit the current nesting depth. This could be a problem in CSS since CSS can’t handle this kind of thing well — it has no “or” operator at the simple selector level.
<h6>keep their legacy renderings for compatibility.
Posted by Dion Almaer at 9:31 am