Heading Elements, Semantics and the Spec | February 7, 2005
Many people have taken to using the h1 element to describe the site a particular page belongs to. This usually involves wrapping a h1 tag around the site name, hiding the containing text from browsers using CSS and possibly swapping in the site logo using an image replacement method.
I can see the logic to this. Many people see a website much in the same way they see a book. Each page on a site is like a chapter in a book, so each page gets it’s own headline. However that chapter is part of a collection of chapters and it’s important to know what that collection is called. How else would you be able to buy it off Amazon? In the same way, people feel that a webpage is naturally part of a collection of pages called a website, so the main heading of all the pages on a site should be the name of the site.
The spec says “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.”
The purpose of the heading element therefore is to describe the structure and content of the current page, not to describe the structure of the site or how this particular page fits into a larger hierarchy. By using the H1 element to link a document to a group of documents the web author is almost trying to create their own meta data. However that isn’t necessary as HTML already provides us with the means of doing this using the link element.
Most web authors are using the H1 element this way in order to increase the meaning of the document. However in many respects they are actually doing the opposite and adding superfluous information. For instance, much in the same way that a sighted user will scan a pages headings looking for information, an experienced screenreader user may have all the level one headings read aloud. This is because they know that level one headings should accurately describe what a page is about. If the site author has decided to use the level one headings to describe the name of the site instead, screenreader users may naturally assume that the pages don’t contain the info they are looking for and go elsewhere.
A lot of web authors also mistakenly believe that there should only be a single h1 per page. This makes sense if all the information on the page is about a single subject but it makes less sense if the page has groups of unconnected information. For instance, this article is primarily about headings, however the side bar contains unrelated information. Unfortunately because the sidebar doesn’t have it’s own h1, this information is structurally considered part of the headings article, even though it has nothing to do with it.
Posted at February 7, 2005 8:47 AM