Describing Structure with Headings
Six of the simplest yet commonly misunderstood and misrepresented HTML elements.
Posted 14 Nov 2007, lunch time.
Tagged with accessibility, best practice, headings, html, rnib, seo, usability, web design, web development.
I'd like to draw attention to a post on the Web Access Centre Blog (Better Connected, Better Results: Headings) in which RNIB's Ann McMeekin talks about the correct use of headings in HTML.
Headings - designed to divide and describe hierarchical, semantic chunks of content in an HTML document - are important not only for accessibility but also usability and SEO.
Ann outlines the following rules:
- Every page must have at least one (the H1)
- Only one H1 per page
- The H1 must be applied to the main heading of the page
- The H1 should ideally be the first heading in the source code
- Subheadings of any heading should be given the next heading level down (e.g., H2 for subheadings of H1, H3 for subheadings of H2, etc.)
- No jumping levels (e.g., H1 to H3)
- Everything that's actually a heading needs to be coded as a heading, not just made bold.
- No using heading tags to make text bigger or smaller
One key point I'd like to emphasise is that headings should describe the structure of individual pages, not groups of pages or entire websites.
On other pages [other than the homepage], [the H1 is] the main heading of the document, not the site name…there is no concept of site in HTML, each page is a document which is intended to be treated on its own.
If we take the example of an individual news article displayed on its own page, the H1 on this page should be the article headline since that is the most unique and descriptive element for this document. There is a tendency among designers, however, to attempt to group these articles under a single heading of "News" and relegate the article headline to the H2, thus losing some semantic value.
Heading structures need to be considered and planned properly, as early in the design process as possible to avoid any pain later in the project. The concept is actually not all that complicated if you follow these few basic rules and call on a bit of common sense.
