TIP 97

Proper Use Of H1, H2, H3, H4, H5, H6 header elements

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. W3C

However you do not need to use all six elements to structure your pages.

For example:

Use Only One H1 Element on any page

Accessibility 101 uses the header elements as explained above, and generally only reach level H3 as each page is a concise investigation of one topic. We only use one H1 element per page. However the following is also semantically correct:

You can use any number of H2, H3, H4, H5, H6 Elements on any page

You can use any number of H2-H6 elements on any one page, but this might be a bit cumbersome for the typical web designer.

So as you can see there is a few definitive ways to implement these elements. We would recommend that possibly you keep your pages specific about one topic and use

• One H1 Element (tag as it is commonly talked about)
• As many as required H2 elements to denote sections on the page (you should really only need one or two or 3 if you are keeping your page concise.
• Consider using H3 Elements for useful link groups to other relevant sources, or for information not immediately relevant to the page and so "3rd" in the pecking order.

Search Engines Love H1 Elements

It has been argued that the main search engines pay more attention to H1 elements these days, so you might want to consider this when creating your pages, and include your best keywords in it.

Use <h1> for top-level heading

<h1> is the HTML element for the first-level heading of a document:

• If the document is basically stand-alone, for example Things to See and Do in Scotland, the top-level heading is probably the same as the title.
• If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs - Your Guide to Pets.

Unlike the title, this element can include links, emphasis and other HTML phrase elements.

The default font size for <h1> in some browsers have, unfortunately, motivated many writers and tools to use an <h2> element in stead. This is misleading to tools that take advantage of heading structure of pages, such as Amaya's table of contents view.

Consider using Cascading Style Sheets, which are designed to express the author's preferred font sizes corresponding to elements such as <h1> and <h2>, like we have done here in Accessibility 101.

Remember:

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. W3C

NEXT > .< BACK