Solved

Use of h1 tag in HTML5

Posted on 2014-09-06
5
222 Views
Last Modified: 2014-09-11
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>
</h1>

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.
0
Comment
Question by:mike99c
5 Comments
 

Author Comment

by:mike99c
ID: 40307439
0
 
LVL 58

Expert Comment

by:Gary
ID: 40307553
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
0
 
LVL 18

Assisted Solution

by:Steven Harris
Steven Harris earned 167 total points
ID: 40307595
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 167 total points
ID: 40307608
http://www.h1debate.com/
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.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 166 total points
ID: 40307962
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.


Cd&
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Strange loading of website behaviour 3 23
Login area of a page 4 20
HTML CSS 7 20
Import data into excel from web page 10 26
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now