Handling Headers: Where to Use h1 and h2
How to handle headers, ie h1, h2, h3, and so on, is something that I’m being asked a lot. The most common question by far is “should I have my logo in the h1 tag, or my post title, on my blog?”, and it is a good one. In fact, I’d reckon not all of you will agree on the answer.
The reason I’m bringing it up now is this post on the topic, over at Webmaster-Source. I’ve gotten several emails asking if Matt’s conclusion is the right one. Basically, this is what Matt says about it:
Here’s the best way to handle headings on blogs:
On the index and archive pages, h2 tags should be used for post titles. On permalink pages, use h1 instead. You can then use h2s, h3s, etc in your post content, for subheadings. I suppose an h2 would work for the “x Comments” and “Leave a Comment” messages as well.
Personally, I don’t do it that way. The way I see it, the h1 should be the site’s name, even if it is a logo, since that is the highest item in the hierarchy. For me that goes on both listing pages and single pages. Like so:
Website Title → Post title
I think this is true because you’re on a website, reading something that is located on this website. That means that the actual website name (usually a logo, as I said) should be the first header, ie h1, while the story you’re reading should have its title in h2, and then sub-titles in h3, h4, and so on.
That’s my take.
However, I’d love to hear how you guys do it! How do you arrange your headings on your blogs and websites, and why do you do it the way to do it? Share in the comments below.
Want an avatar? Get a gravatar! • You can link to this comment
For search engines I would say it is best to have the post title as the h1 tag.
Want an avatar? Get a gravatar! • You can link to this comment
I think you should see the pages as chapters, like a book.
So if you are on the front page (book cover)
the h1 should be your title/logo.
And if you are on a article/page (chapter)
the h1 should be on the article/page title (chapter)
something like this
SITE NAME
h1 Article titel
h2 Article sub title
I think this helps readers/google/etc to know what is important. If you arent on the frontpage then the logo/site name should be in focus anymore, it should focus on the content instead.
Want an avatar? Get a gravatar! • You can link to this comment
I have to agree with the other solution. For example, in this page “Where Where to Use H1 and h2″ is the main topic, so I think it should be in H1 tags (a SEO friendly solution, appearently). The main website logo would be in H1 tags in the homepage of the site, where the other post titles are in H2 tags.
Want an avatar? Get a gravatar! • You can link to this comment
I’ve always thought of the h tags in outline format, and shouldn’t change no matter how it’s presented. I think the second description fits that more.
Want an avatar? Get a gravatar! • You can link to this comment
I couldn’t disagree more.
What a waste of good semantic to use it on one never-changing part of your website. To put h1 around a logo or title of a website trashes the chance to use h1 more than once on your page, because odds are you’re website logo is only going to be used once at the top. You might be able to argue the idea of using it for your website name at the top, but there’s certainly no debate when your header has no text, its just a logo. h1 has a job to do, that job has absolutely no value to images.
Search engines know the name of your website because… odds are… it will be in your title tags, where it should be.
Save h1 for the title to each post, h2 for possible article sub titles, and h3 for the rest of your post information.
Ha, couldn’t help but check the source of devlounge and yeah, sure as anything, you’ve got h1 around the image logo up top.
Want an avatar? Get a gravatar! • You can link to this comment
Daniel, I definitely agree with your solution. I think the page code should be good from usability and SEO standpoint, not only SEO. Therefore on each page should be clearly defined and apparent where the visitor is, and it should be consistent across the whole website - for that purpose the H1 is ideal. We’re using H1 for server name + some relevant keywords or SEO-compatible claim, e.g. “Deutsche Bank - your online bank”. In H2 we’re using subsection / product or page title (depends on project).
Want an avatar? Get a gravatar! • You can link to this comment
I agree with Per’s comment
Though, with that comes with that is what happens with supplementary content. If the entry title is the h1, a supplementary content’s heading shouldn’t be h2 since if it doesn’t relate to the content.
Site Title
h1. Entry Title
h2. Sub-heading in entry
h2. Supplementary heading (”Archives” for example)
Using the Thord’s method it would be:
h1. Site Title
h2. Entry Title
h3. Sub-heading in entry
h2. Supplementary heading (”Archives” for example)
Which makes more sense, but I don’t agree with having the site title as a constant h1. Unfortunately, I don’t have a suggestion as to an appropriate approach as per Per’s comment!
Want an avatar? Get a gravatar! • You can link to this comment
Personally, I do it like you do: put my Logo in an H1 tag… Don’t really know why, I’ve always done it like that.
I kinda see my logo/website name as the first item on my page. Using something like or seems wrong. on the other hand…
Want an avatar? Get a gravatar! • You can link to this comment
I just noticed my post got Devlounge’d.
Some good discussion going on here, I updated my post with a link to here.
Want an avatar? Get a gravatar! • You can link to this comment
Why should the site name be a headline? I think it’s more important than that, plus why waste the h1 tag on something that doesn’t change and is part of every page? Dan L is right.
Want an avatar? Get a gravatar! • You can link to this comment
I do completely agree with you. The title or the heading should be the boldest of all, hence I prefer to use h1. The others just follow accordingly: smaller ones for the least important ones.
Want an avatar? Get a gravatar! • You can link to this comment
I agree with you. Header tags should follow the traditional outline format to give the best presentation.
Want an avatar? Get a gravatar! • You can link to this comment
I like to think of it this way: the h1 should be the “subject” of the content on the page.
Suppose you’re on a page organized this way: Company -> About. In this case, “About” is the subject, and it should fill your h1.
Suppose instead if you’re on this page: Company -> About -> Our History. Here, “Our History” is the subject of the page, and that should be the h1.
On an article page on a news site, the article title is h1. On a single blog entry page, the blog entry title is h1. In a multilevel site with subsections (as above), the section title is h1 when you’re at the section landing page, and the subsection title is h1 when you’re in a subsection page.
In my opinion, it’s all about the content of the current document, not the site structure as a whole.