Ivana Vasilj

Headings in HTML4 & HTML5

by on

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 section, article and hgroup, 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:

  1. Nest headings properly, do not skip levels (h1 is followed by h2, h2 is followed by h2 or h3, etc.)
  2. Use one h1 element 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:

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 h2 element.

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 section (or other elements of sectioning content: article, aside, nav) and its 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)?

  1. Backward compatibility
  2. hgroup — heading might have multiple levels (subheadings, taglines, alternative titles) — though I cannot think of an example with headings other than h1 and h2

hgroup

There's also a new kid on the block. hgroup is also a heading, more precisely an element for grouping h1–h6 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) h1–h6 descendant. So the hgroup from the example above, would appear in an outline only as the h1 element 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>