Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Use of h1 tag in HTML5

Posted on 2014-09-06
5
237 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Make Session back to empty 9 30
How to check if a session is disconnected in php 9 32
Change Firefox bookmarks menu font size 2 33
2 separate CSS animations 2 16
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.

856 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