Headings are for organizing content into sections. Nice heading structure represents document outline, improves accessibility, may help with search engine rankings — it's simply beautiful.
New elements in HTML5, such as
have changed the way of marking up headings a bit. So let's compare "the old" and "the new" way.
Headings in HTML4
These are the rules of heading structure I follow in HTML4:
Nest headings properly, do not skip levels (
h1is followed by
h2is followed by
- Use one
h1element per document / page (the main, top level heading for that page)
Those are basically accessibility techniques and have little to do with
HTML 4.01 Specification
(which only notes that
some people consider skipping heading levels to be bad practice).
Check out Techniques for WCAG 2.0
(in case you haven't before), particularly these:
- G141: Organizing a page using headings
- H42: Using h1-h6 to identify headings
- H69: Providing heading elements at the beginning of each section of content
This is the example of use from HTML4 spec:
<DIV class="section" id="forest-elephants"> <H1>Forest elephants</H1> <P>In this section, we discuss the lesser known forest elephants. ...this section continues... <DIV class="subsection" id="forest-habitat"> <H2>Habitat</H2> <P>Forest elephants do not live in trees but among them. ...this subsection continues... </DIV> </DIV>
So, there's a main
div.section starting with the
h1, and a
div.subsection starting with the
Headings in HTML5
First, let's take a look at the examples of use from HTML5 specification draft. Snippet #1:
<body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body>
and its equivalent snippet #2:
<body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body>
Both are correct in HTML5. What's the difference then, if you can just continue with your HTML4 practice?
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
This actually means you should only use
h1 for headings; start with a new
(or other elements of sectioning content:
h1 for each level.
Snippet #1 is "HTML5 transitional". Snippet #2 is the way to go.
Cool thing about the new way of usage is that you can aggregate any
section from a document
in other documents, it will fit into the external document’s outline.
Why have 6 heading levels then?
Why not just
h (like in XHTML2)?
- Backward compatibility
hgroup— heading might have multiple levels (subheadings, taglines, alternative titles) — though I cannot think of an example with headings other than
There's also a new kid on the block.
is also a heading, more precisely an element for grouping
elements, in cases when heading has multiple levels, like:
<hgroup> <h1>Monochrome daydreaming</h1> <h2>Homesite of Ivana Vasilj</h2> </hgroup>
In document outlines, the text and rank of
hgroup elements will be the text and rank of
their highest ranked (or the first if many of the same rank)
hgroup from the example above, would appear in an outline only as the
with the text (Monochrome daydreaming) it encloses.
More on the subject
Wonder if you've done your heading structure right? Check your document outline with HTML 5 Outliner. Also check out Headings in HTML 5 and accessibility, a nice article by Bruce Lawson. And, of course, the best resource, Sections in HTML 5 specification.
For one not-from-spec example of use, here's the markup (the relevant part) of this document:
<body> <hgroup> <h1>Monochrome daydreaming</h1> <h2>Homesite of Ivana Vasilj</h2> </hgroup> <article> <h1>Headings in HTML4 & HTML5</h1> <section> <h1>Headings in HTML4</h1> </section> <section> <h1>Headings in HTML5</h1> <section> <h1>Why have 6 heading levels then?</h1> </section> <section> <h1>hgroup</h1> </section> <section> <h1>More on the subject</h1> </section> </section> </article> </body>