Marking up headings

Headings (the h1 tag and its little siblings) are necessary for about every web page, and when they are properly utilized, they can greatly benefit the design, usability, accessibility of a page. Additionally, their usage helps search engine crawlers correctly index the content appearing on the page. Why fight it? It’s good.

Common approaches and why they’re bad

Of course, there are many wrong ways to define headings:

1. <span class="heading1">
2. I am a heading.
3. </span>
4. <div class="heading2">
5. No, I am a heading!
6. </div>
7. <p class="heading3">
8. Can I be a heading, too?
9. </p>
10. <h2>
11. I don't like where this is going...
12. </h2>
13. Download this code: /code/headings_01.html

Let’s look at what’s bad about such approaches for headings.

• The intent of this markup is at best unclear. Are these headings or just content?
• Once again, we fall short on semantic use of our markup, and we pay a price because of it. Browsers and crawlers that do not work visually or that do not support CSS have no choice but to assume nothing in terms of the intent. Remember, div and span are just generic containers that imply no meaning.
• Although this HTML could be styled appropriately to provide visual order and structure, it’s silly to do so. Such an approach RELIES on CSS to communicate this order and structure, meaning that nothing other than the author interprets the intended meaning correctly.

A better approach

1. <h1>
2. I am a heading.
3. </h1>
4. <h2>
5. So am I.
6. </h2>
7. <h3>
8. Me, too!
9. </h3>
10. Download this code: /code/headings_02.html

It’s far better to always use heading tags for headers. Why? Because even without any style support or guidelines given by us, browsers and search crawlers understand that a heading tag is a heading.

• Visual browsers will render heading text in appropriate sizes and weights, in the way we intended. This happens because, once again, we chose semantic markup that conveys meaning that the user agents can understand.
• Search crawlers will do a much better job of indexing our page, because we have provided an outline to use for indexing the content.

Even if we took the earlier approach and styled our div, p or span tag to look exactly like the heading, the crawlers or other non-CSS requests wouldn’t know it. Use the appropriate semantic tags, and they will.

Headings as outline

One way to think about headings is to think back to what you learned about writing outlines in elementary school. Yes, all of that stuff with Roman numerals. Use the headings consistently in your document to reflect the level of the outline and you’ll generally be in pretty good shape.

Headings as navigation

Another advantage to using headings over other constructs is that assistive technologies such as screen readers allow a user to navigate the document by using the headings. Use a different structure, and it’s like you’re giving such users a treasure with no map.

Don’t skip heading levels

Additionally, it is considered to be a bad practice to skip heading levels. Always start with h1, and work through to h6 as needed. If you find that you’re skipping heading levels, ask yourself why. If you use headings to outline, you shouldn’t need to skip levels. Some pages may only have 2 levels (indeed, few have 6) but that still means you should use h1 and h2, not h1 and h5 because they visually appear by default in a way that you desire. At the point you do that, you’re back to using markup for presentation and all of the badness it entails.

Next post (newer)

Marking up lists

Previous post (older)

Browser rendering modes: standards and quirks