Home »

How to use headings in HTML

Wednesday, January 16, 2008
Many of web standards rookies feel that passing validation is good enough to call their work web standards compliant. Those who are more involved in web standards know that there's more than that. Use of headings is a good example. While validator will not show any warnings or errors for headings, you can't say that your page is valid if your heading structure fails.

Meaning of headings
Some say that the largest role of headings are their SEO meaning. I am not going into that. They maybe right, but I say (since I am not a SEO expert but a web standards enthusiast) that their importance lies in semantics. What are headings anyway? Headings are elements that describe the content that follows and also define a document's structure. Similar to large headings and subheadings in printed newspapers, html headings should briefly describe what the page or sections are about, making it clear to the reader (human or non-human) what to expect if he continues to read. We have h1 to h6 heading tags. The numbers in the tag name carry a certain "weight", where h1 is the "heaviest" and h6 is the "lightest". That hierarchy is the principle that we should follow when structuring our document.

Document structure

So how to properly structure a document? Let's compare document's heading structure with some well formed XML file.

H1, H2, H3 and H4 represent heading tags (titles) while boxes represent content where darkest box carries more "weight" in terms of importance then lighter ones.
First heading, h1 defines a large section, usually an entire document. I believe that it should be used once per page as a top level heading, describing the content of entire page. Exceptionally, if you have separate large sections on the same page you may use two or more h1. Choosing which heading tag to use on a specific spot shouldn't be a matter of thought. You simply use the next one in line. If the content you're describing could be treated as a "child" of the previous content, then use the heading that is one step down in hierarchy. If we are talking about "sibling" content than you should use same one. That creates a certain logical flow that shouldn't be broken, otherwise your document will make less sense.

"Don'ts" when using heading tags

As some of you know, and some of you guess, the power of CSS is rather large. There's no need for compromises when we're talking about headings. One of the thing that I see a lot is using heading tags based on browser's default styling. Some will use h4 instead of h2 on a
certain spot just because they need a smaller headline. What we should do is use h2 and use

CSS to make it smaller. Simple, right?

Further more, not all content belong in the heading. i.e. if you have a blog post title and you decided to put it into h2 or h3, don't worry what heading to use for the date and publisher info. Don't use headings for that type of content. Even in newspapers you will not see large and bold "Written By John, Aug 22nd".

The largest error that I see often is separating headings from their belonging content because of design compromise i.e putting some floated navigation between heading and the paragraphs. You shouldn't make compromises in that area. Make document structure a priority and don't bend it just because you have complex design. In most (I would say "all") cases CSS can give you a hand. Just make an extra effort and pretty soon you will be happy.
Tags: ,

Comments[ 0 ]


Post a Comment