• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

Use of h1 tag in HTML5

We are reviewing our use of the h1 tag in HTML5 and up till now we have been in the habit of wrapping the website logo around a h1 tag as follows:

<h1 class="logo">
   <a href="#" title="Website name">Website name</a>

Open in new window

However I am concerned that this is not correct from a standards and SEO point of view. Shouldn't the h1 tag represent the main topic of the page in question? Currently we use the h2 tag for this but I would like some guidance as to whether we should change our current approach.

I have tried to find a definitive answer online and have seen this debate: http://www.h1debate.com/
It indicates the majority are in favour of using h1 as the main page title rather than the logo. However I have not seen anything close to officially suggesting one way or the other.

Personally I feel it must not be wrapped around the logo. If you are targetting a page for search engines, the h1 is the most important visible page tag and so should be the main title of the page.
3 Solutions
mike99cAuthor Commented:
H1 should be used to indicate the relevant heading for the most important part of the page
With HTML5 you can have multiple H1 tags
H2 indicates the next most important bit, H3 the next and so on

So no, it's not for an image
Steven HarrisPresidentCommented:
Great articles mike99c.  Of course, both comments above are right (form my perspective).  Wrapping the logo in a h1 is generally a bad idea and can provide more negative consequences than positive ones.  A great quote from the fastcolabs.com article:

Usability: The tags <h1> to <h4> should be used to organize information and orient users. The logo is not actually information or orientation; it’s metadata about the site, not relevant information about the content of the page.
Pointless discussion by people who don't know

Think of it this way, if every page has your logo in an H1 tag then you are saying every page is the same - you are saying my logo is what is important and nothing else.
Every page should have it's own H1 header to make it unique - which when it comes to search engines is the only thing that counts.
Let's deal with what W3C says.  They write the standards so I consider them to be the definitive source:
"<h1> is the HTML element for the first-level heading of a document:"

From: http://www.w3.org/QA/Tips/Use_h1_for_Title

As for SEO... Google considers the h1 tag to be the declaration of what the content is about.  Use it any other way or leave it out and you lose weight for the page rank.

You can have more than one h1 tag, but if you do that you reduce the relevance of the text and reduce the weight of the tag.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now