Using HTML Heading Numbers

First published on 2007-04-01, updated on 2008-01-24.

Headings introduce a section of content. HTML has six elements for headings: <h1> to <h6>.

What is the best way to use these different heading elements?

W3C Specifications

If you read them very carefully and squint a bit, they say the same thing.

HTML 2.0: Headings H1 to H6

The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.

So they were first standardised in this way:

  1. Headings introduce sections.
  2. Use heading numbers sequentially, so they indicate section depths.

But this parrot is dead: there are later specifications which supercede it.

HTML 3.2: Headings

H1, H2, H3, H4, H5 and H6 are used for document headings. You always need the start and end tags. H1 elements are more important than H2 elements and so on, so that H6 elements define the least important level of headings.

  1. “Document headings” introduce sections in other formats and media.
  2. Heading numbers indicate importance.
  3. “Level of headings” might mean section levels.

This specification has also been superceded, though.

HTML 4.01: The H1, H2, H3, H4, H5, H6 elements

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

  1. Headings introduce sections.
  2. A table of contents might be created from the headings.
  3. Heading numbers indicate importance.
  4. “Level of headings” might mean section levels.

If the numbers are for importance, a table of contents wouldn’t make sense?

WCAG 1.0: Guideline 3.5

3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]
For example, in HTML, use H2 to indicate a subsection of H1. Do not use headers for font effects.

Does this contradict HTML 4.01?

Which Specification is Correct?

Maybe HTML 3.2 and 4.01 use “importance” for lack of a better term to describe the relationship between section levels? If so, there is no contradiction:

By my reading, heading numbers are for section levels throughout the document.

Interpretations

The W3C descriptions take some figuring out. Authors differ in their use heading levels.

Strict Sections

Heading numbers always match section levels. They only match importance by coincidence.

Loose Sections

Heading numbers normally match the section level. The looseness is from giving priority to factors outside logical purity.

For example, reserving the first <h1> for the main content even if other headings introduce top-level sections. Often done to make this the most important section.

Quirky Sections

Heading numbers normally indicate the section level. Some intentional quirkyness is added.

For example, using low headings for small sections like a search form or an advert.

Presentational Sections

Headings still introduce sections but the number is chosen largely by its default appearance.

Often, only the main content will use headings. It might start with <h2> with sub-sections using <h4>. Subsections of these might use <p><strong>.

Prioritised Sections

Headings still introduce sections. The number indicates the author’s feeling of importance.

Importance is a matter of perspective. Different content authors may use them differently, even in the same website. Heading levels will be unpredictable and confusing.

Random

Heading numbers only match section levels or importance by coincidence. They might not introduce sections.

Often done by authors who are unaware that these elements have a specified meaning.

Recommendation

Which interpretation is best? It depends which factors are important to you.

Headings help users skip between sections of a page visually. Using heading elements for your headings lets users skip between them non-visually. So they are a big help for accessibility, even if you play a bit fast and loose with the levels.