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></h3> <h3> <h4></h4> </h3> </h2> <h2> <h3></h3> <h3></h3> </h2> <h2> <h3></h3> </h2> </h1>
Those of you confused by this code, this is merely an illustration of heading structure transformed into XML.
Find a more visual approach below:
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.
Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for
didoo on 14 Jan, 2008 wrote:
"A heading element briefly describes the topic of the section it introduces." (see http://www.w3.org/TR/html401/struct/global.html#h-7.5.5 )
cssglobe on 14 Jan, 2008 wrote:
Franck on 14 Jan, 2008 wrote:
I don't agree with your XML scheme. I often use several H1 on a page and I think this is not a problem at all. Indeed, the first title of a page is the