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.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (24 Comments)

1. didoo
   January 14, 2008

   As far as i know, heading are for "titles", not for sections... "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 )

2. cssglobe
   January 14, 2008

   That's what I said. Headings are meant to describe sections... If you are referring to that xml code there, as I said in my note, it is only an illustration of a heading structure not the actual html code.

3. Franck
   January 14, 2008

   The role of headings is quite clear for most people (imo). How tu use them is a bit more complicated. 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.

4. Franck
   January 14, 2008

   ... TITLE tag in the head (sorry).

5. Björn
   January 14, 2008

   Is this the correct way to write xml from headings? or is it just an illustrative example? It seems abit strange. Is for instance h1 really a parent to h2. Arent they all nodes of something else, like <body> or something?

6. cssglobe
   January 14, 2008

   Yes, in many ways title tag can be considered as H0 and you can build your structure from there if you want to go that way. 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 :)

7. cssglobe
   January 14, 2008

   @Björn: it is an illustration of a heading structure, not the actual code. I thought it would help us understand the relations between heading tags, similar to parent-child relations in xml.

8. Franck
   January 14, 2008

   You said : "pay attention to content hierarchy and do not break the logical flow of the headings" I really agree with that. Then, there are many ways of using headings and it is a good discussion.

9. milo317
   January 14, 2008

   Funny coincidence, some of those "premium" WordPress paid themes are featuring bad habit with headings on the front page, 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.

10. cssglobe
    January 14, 2008

    Actually it's looking at those sites based on various WP themes that got me to write this article. It seems that heading usage is not that obvious after all.

11. Rob Knight
    January 14, 2008

    Good overview on heading use. I'm curious about the h4 nested in an h3...even if just an example that might give someone the wrong idea. Cheers, Rob

12. cssglobe
    January 14, 2008

    I got a lot of criticism about this illustration so I decided to put new , more visual approach. Hope the things are clearer now.

13. sunil
    January 21, 2008

    is there any limitation of heading tags used in a page (count). I seen some of the css deveopers using h1 for logo (background of h1). Can we use another h1 for titles. Is it considered as spamming?

14. cssglobe
    January 21, 2008

    As I said earlier, h1 define content that carries the most "weight" and there's no other heading that is "heavier" than h1. If you have separate content sections that are of EQUAL and MOST importance than there's no other choice but to use multiple h1. Btw, with things you see around web sites, I doubt that multiple h1 would be considered spamming.

15. Navdeep
    January 24, 2008

    thanks for the tips...

16. Joe
    January 25, 2008

    How do you feel about using h1 tags for the website name/logo; does that constitute as a logical heading?

17. cssglobe
    January 25, 2008

    I almost always use h1 for the sites logo or even entire header, but I also always use image replacement technique so that in the source h1 contains text.

18. Ryan
    February 15, 2008

    Hi, just came across this post... 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.

19. Manuel F. Graf
    February 25, 2009

    In addition, headings are one of the most important indicators for search engines like e.g. google or yahoo. They try to determine the content of what is written in the page. As far as i know, google takes h1 for th name of the site/category/whatever, h2 for the contents main heading and h3 for teaser and h4 for subheadings. may be not 100% complete... so long. Manuel

20. Steve Perks
    February 25, 2009

    I thought this was a well written article. I'd like to address two issues. 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.

21. Gafroninja
    February 26, 2009

    I totally agree with you 100% cssglobe.com 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.

22. Darren McPherson
    February 26, 2009

    The debate on using the h1 as an image replaced logo is purely preference and what you want to achieve. There is no hard fast rule. 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.

23. Martin
    February 27, 2009

    Thank for that article, it was exactly what I was looking for! Just Manuel's comment is maybe bothering me a bit, but... another google search comes :) thanks again

24. Me Paparazzi
    April 28, 2009

    Sensible point you make Alen and you make it sensibly too! ;-) 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

Sorry, the comment form is closed at this time.