Forum Moderators: not2easy
For my next site, I'll try to use a template from one of free css layout sites. The problem is that the template use <h1> tag as a site name in the header. For SEO reason, I want to change this into something else, and use <h1> in page header.
Can someone help me how to change this?
Below is the original css for header and the html part.
Thanks
Sjarief
CSS Header Part
#header
{
position: absolute;
top: 4.5em;
background: #073C4C url('images/header.jpg') top right no-repeat;
height: 135px;
width: 100%;
}
#header h1
{
position: absolute;
top: 1.2em;
left: 1.0em;
font-size: 2.5em;
color: #fff;
}
#header h2
{
position: absolute;
top: 6em;
left: 2.5em;
font-size: 1.0em;
font-weight: normal;
color: #fff;
}
#header a
{
color: #fff;
text-decoration: none;
}
HTML Part
<div id="header">
<h1><a href="#">Site Name</a></h1>
<h2>Site Slogan</h2>
</div>
You can have multiple h1 tags on a page. Having an h1 in the header and another on the page won't be bad for seo.
The css has styled h1 specific to the header div, so h1 tags in different divs will not have this styling. In fact you can style them as you like.
If you want to remove the h1 from the header, simply choose a different tag -- p, h3, etc. If you want the text (currently 'Site Name') to look the same as it is now, but using a different tag (like h3) simply change the #header h1 to #header h3 in the css.
If I change it to h3, then the page structure isn't properly ordered. So what is the best option?
Basically, the arguments are should the site name be an h1, or should the page description title be an h1? Structurally, the two are similar importance. Or perhaps they aren't.
Also interesting is the semantic data extractor from w3c, which shows an outline of the page, along with meta title and description tags.
I was answering your question based on coding/display, not structure. That said, I do have sites with multiple h1's if there are two major categories (on a home page for example). And the logo/site name is not an h1 as I figure that information is a given, structurally. They came to the site, right? It's named in the content, yes? And the meta data has that info too.
Perhaps some other viewers will chime in too. I would be interested in how others approach this.
Basically, the arguments are should the site name be an h1, or should the page description title be an h1? Structurally, the two are similar importance. Or perhaps they aren't.
it is an interesting question, and shilmy we can tell how to change both your HTML and CSS whenever you let us know which side of the coin the prefer to choose ;)
I'm of the opinion that the site name should NOT be the <h1>, and yes I prefer one <h1> per page too so that puts the structure/accessibility/semantics view which I also hold in direct conflict for me
My reasons for this are that if you have your site name for the main heading it's basically duplicated across the whole site so what would be the point in weighting it?
The web is a series of documents not sites, it is the document/page itself which should be important and is usually linked to.
Now what about a company name and header, fair enough there should be visual clues as to what site you're on, but header graphics etc.. are just a vanity thing and/or a branding excercise so are only really any use in a visual browser.
We already have an element just ripe for "branding" purpose and most CMS let you set this to include both the company name and document title in it - the <title> element.
We could already be styling this with our header logos, using image replacement techniques if it weren't for you know who: e.g. (view in FF/Opera)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Your Company Name</title>
<style type="text/css" media="screen">
head, title {display: block;}
head {border: 1px solid #000;}
title {background: #abc; font-weight: bold;}
</style>
</head>
<body>
<h1>This is the Document Title</h1>
</body>
</html>
and the title element should be good enough for most to know what site they're on, wether becasuse it's visually styled, displayed across the top of your browser or it's read aloud
I have been known just to put the header logo etc in a div element with no inner element apart from a <a> link perhaps (home page link that is). You could of course use any (supposedly non weighted) element inside the heading div, e.g. <p> another <div>, but of course that will throw the structure police into hissyfits.. but I wonder if this isn't just one of things that is in a bit of a no-mans land at the minute.. jury still out or what is the "correct way"?
all this above of course is only MHO, interested to hear all other thoughts too :)
Suzy
[edited by: SuzyUK at 6:42 pm (utc) on Jan. 26, 2007]
Can you have more than 1 h1 tag? No one will stop you, it will validate just fine. I've had home pages with more than 1 h1, one for each product line, for example. Search engines haven't booted the sites.
Accessibility though is probably the real issue.
If you decide to dump the h1 for the site name, and make it a link back to the home page, you can style it the way it is now by changing the h1 css to a
#divname h1 <blah> changes to
#divname a <blah> perhaps with
#divname a:hover <hover effect here>
