Semantics in HTML: What’s in a Heading?
During a workshop on accessibility and WAI yesterday, the issue of proper use of HTML headings came up.
Lots of sites fall short when it comes to using HTML headings (and other elements) properly, something that can affect accessibility, search engine ranking, as well as code maintenance [not to forget future re-use on the grand Semantic Web].
How - and where - to properly use the elements might not always be that clear, and some of the questions raised during the discussion can be rephrased as:
- Do all web sites/documents have a clearly defined heading?
- Do all documents have to specify a H1?
- Is it really OK to put the logo inside H1?
What follows is my 2 cents on the subject.
What HTML Headings Are
Headings are used to structure the contents of a document by specifying a hierarchy of sections.
Starting with H1, which is the main level of headings defined in (X)HTML, it goes all the way down to H6 … sometimes unfortunately not further, but HTML5 brings promise to those who could care less.
As stated in the HTML 4.01 specification, section 7.5.5:
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.
Using H1-H6, one can define the main structure of a HTML document.
Structuring the information using HTML headings is usable for a multitude of users such as those using “alternative” user agents (for instance screen readers), those who for some reason have disabled CSS or don’t want to use the CSS, as well as search engines.
It also helps preserving the information for future re-use - as does all use of proper / semantic HTML.
Headings, Titles and Logos
Now, if the site you’re building has a clearly defined structure, there should be no problem in deciding what to put in the H1 tag and what to put inside <H2>, right? Or is it really that simple?
Consider the following cases:
- What’s the difference between H1 and title, or rather: if there is a title but no “main” heading, why use the same thing twice (both <title> and <h1>)?
- What if the graphic design doesn’t include a main heading on e.g. the front page? What should then be used for H1 — or can we leave it out?
Should, or could, for instance, the main heading contain a logo? And if so: what would be the correct way to do so?
Title versus H1
The HTML 4.01 specification, section 7.4.2 specifies that: Authors should use the TITLE element to identify the contents of a document.
The same section’s example states that The TITLE element is not considered part of the flow of text.
Hence, title and H1 are used in different contexts. One (title) is used to identify the contents of a document, while the other (h1) describes the section of information that it introduces and may be used to e.g. construct ToCs.
Minimum One Heading
In some cases the differences between the title and h1 are subtle, but considering other factors, such as WCAG and search engine ranking factors (although some beg to differ), there is little doubt that a document should always include a H1.
The HTML Techniques for Web Content Accessibility Guidelines 1.0, section 1.2.1 does for instance state that:
Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).
(Web developers: Please notice the last sentence!)
There is no reason not to use the same for both title and h1.
Logo in H1
But what if the graphic design for a site’s home page doesn’t include a heading? Could you use the logo?
Yes!
From what we know about the H1 tag (from the HTML recommendation as well as the WCAG), it is used to convey meaning about the structure of the document. It introduces a section of content.
So if the logo is a natural heading, there is no shame in using the logo inside a H1!
In fact, I always put the logo inside a H1. It’s valid (X)HTML, you can style it using CSS, and a search engine should pick up the text from the alt-attribute (which you of course did remember to include!).
Hell, even the W3C uses an <img> in the site’s topmost <h1>, as do sites such as SEOmoz, AListApart.com, SmashingMagazine.com, so I guess that case is closed.
Here’s an example of how you might style the logo in CSS (I’ve left out the obvious tags):
<style type="text/css">
h1#logo { margin: 0; padding: 0; }
</style>
<h1 id=”logo”>
<img src=”/corporate-logo.jpg” alt=”MyCompany Inc.” />
</h1>
It really is that easy, so you might as well just start doing it.
Number of H1 and H2 tags
On a side note: some claim that there should only be a single H1 and a single H2 per page. The HTML recommendation says no such thing, but according to SEOmoz, using too many H1 or H2 tags may get you into trouble with Google’s indexing algorithms.
Not being able to use multiple H2s would be like not being allowed to write a book with more than 1 chapter heading.
Again, I believe that referring to a well renowned site tells us quite a bit: at the time of writing, the SEOmoz home page includes three H1 and seven H2 tags…
as...