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.
didoo 14 Jan, 2008
"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 14 Jan, 2008
Franck 14 Jan, 2008
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 <title> tag in the head.
Franck 14 Jan, 2008
Björn 14 Jan, 2008
cssglobe 14 Jan, 2008
Main reason for going with only one h1 is that it is a top level heading and, as I said in my article, it carries the most "weight". That means that content that follows is the most important. So if you use more than one h1 tags that means that you have two or more sections of equal importance - same "weight".
The other reason I am going for one h1 is that I use that tag inside the content. i.e when you print out a document it will print your h1 but not the title tag.
Anyway, this article is not (only) about whether we should use one h1 or not. What I wanted to say in this article is that when working with headings you should be consistent and pay attention to content hierarchy and do not break the logical flow of the headings, don't jump from h2 to h4.
If you want to use more than one h1, use that scheme more than once and you'll get your structure :)
cssglobe 14 Jan, 2008
Franck 14 Jan, 2008
I really agree with that. Then, there are many ways of using headings and it is a good discussion.
milo317 14 Jan, 2008
e.g. no h2 tag followed by h3 tags with not even an h1 tag, using an image instead of an image replacement technique.
Premium?
Apart from that it's a nightmare in terms of SEO.
cssglobe 14 Jan, 2008
Rob Knight 14 Jan, 2008
Cheers, Rob
cssglobe 14 Jan, 2008
sunil 21 Jan, 2008
cssglobe 21 Jan, 2008
Btw, with things you see around web sites, I doubt that multiple h1 would be considered spamming.
Navdeep 24 Jan, 2008
Joe 25 Jan, 2008
cssglobe 25 Jan, 2008
Ryan 15 Feb, 2008
I have been using h1 for logos with image replacement as you mentioned...but I've come to wonder if that is really best practice. Is the logo, i.e. the company's name, really the most important feature of any given page? It's most likely already used in the <title>. It seems that perhaps the page topic really is the most important, for both semantics and SEO.
Manuel F. Graf 25 Feb, 2009
so long. Manuel
Steve Perks 25 Feb, 2009
1. The HTML in your example has the h4 nested in the h3. It should follow the h3.
2. Use image replacement on h1 on homepages (and possibly category pages), but revert to using a div for your logo on article pages. Logically, if someone searches for "site name" you want to give them your homepage. If someone searches for an article name, they'll get the article.
Nice article, it made perfect sense to me.
Gafroninja 26 Feb, 2009
This is the correct way to use headings.
h2 inside h1,
h3 inside h2,
h4 inside h3.
1 h1 at the top to describe what this page is about
<h1>Darren McPherson</h1>
<h2>Address</h2>
<p>blah blah</p>
<h2>Qualifications</h2>
<h3>Napier University</h3>
<p>qualifications blah blah</p>
<h3>James Watt College</h3>
<p>qualifications</p>
<h2>Work Experience</h2>
<h3>current company</h3>
<p>blah blah</p>
<h3>last company</h3>
<h4>role one</h4>
<p>blah blah</p>
<h4>role two</h4>
<p>blah blah</p>
<h2>Interests</h2>
<p>Blah blah</p>
People listening to this via screen reader, a google bot, the whole structure flows better and makes sense.
Darren McPherson 26 Feb, 2009
But what I will say if you are a business with a logo, wouldn't you want that to be an img tag for when users print out a page they will always see your logo (since printers don't print out background images).
As said though, it's purely preference. I've used many different ways.
Martin 27 Feb, 2009
Just Manuel's comment is maybe bothering me a bit, but... another google search comes :) thanks again
Me Paparazzi 28 Apr, 2009
As I work on a site I approach it in two ways. Kind of reverse angle view!
A newspaper has a HUGE HEADLINE on its front page and that is often called the LEAD story. It is about the most significant news of the day. We can take that as h1. And then you have the second lead, third lead and fourth lead to the caption on the cartoon script!
Another way of looking at it is from the humble paragraph p which is used the most and also taken for granted the most!
A para might need emphasis at times for a break - { h5... h4 zone :-) } and on other occasions ...
A little sub head
to help digest a subtle point { h4 ...h3 zone ;-)}
and then you have an brief kicker intro {still h3}
that gently leads you to the story headline which
in all probability be h2 ...
unless it is the MAIN LEAD STORYon the page!
As a writer, this approach makes the most sense to me and perhaps others of my ilk might benefit a bit from this.
Thanks again Alen and would stay tuned in!
Me Paparazzi