H1 for title in header or body copy

HTML & CSS
1

I use an H1 tag and gilder-levin image replacement to construct my header.

But that means I have to put the title of each page into the header if I want to have only one H1 tag per page.

And then I don’t know what H tag I should put in the title in my body copy? H2?

But that is what the viewer sees as the title.

So the search engines will see this

<h1>Interesting new fishing lures</h1>
<h2>Interesting new fishing lures</h2>
<p>blah, blah blah …</p>

This looks strange.

2

It’s not really clear what you are saying here. Use the H1 for your visitors and the search engines. There is not difference. Are you talking about the <title> element in the head of your document?

3

I am referring to the header of the web page (within <body></body>) not the the title tag within <head></head>

I use an H1 with image replacement to show the logo of the company etc. in the header.

But in the body copy where I also put the title visible to the reader I surround that with H2 tags.

<h1>Interesting new fishing lures</h1> <---- This is the graphic header
<h2>Interesting new fishing lures</h2> <---- This is a text in the body copy
<p>blah, blah blah …</p>

Is this right?

I was looking at my wordpress sites and they use H2 tags for page and post titles. So I suppose I use the same title with H1 tags and they h2 tags just so there is only one H1 tag per page.

4

Are they both within the same div? You can set the H1 to work differently with different divs by parenting the CSS. Such as:

#div1 h1 {
blah;
}

and

#div2 h1 {
blah;
}

Etc. If this isn’t what you’re talking about, please try to give us a bit more info :slight_smile:

5

O, I see. You are using the H1 in the wrong place. Use it for the overall title of the page content. The logo is just decoration, so just wrap it in a div, or perhaps a paragraph (though that’s not really the role of a paragraph either). Search engines look at the content of a page to decide what it’s about, and the main header is a very important factor in this. Wasting your H1 on every page for a decorative logo is losing you a lot of ground.

Remember that the H1 signals to the reader (and Google) what the page is about.

6

Attached is the document structure for css-tricks and they are using a second H1 tag instead of a H2 tag for the title.

7

Doesn’t men it’s a good idea, though. That site is using HTML5, which has a slightly different document structure (where multiple H1s make more sense) but the full meaning of that document structre is not properly recognized in the ‘wild’ yet. There is no point in using a heading element for decoration.

8

Is css-tricks some sort of authority on the subject?

9

Not an authority; just a popular site that demonstrate some cool things you can do on the web. But plenty of what’s there can be argued about.

Off Topic:

I’ve moved this to the HTML forum, as this is really a discussion about that.

10

It is extremely rare a page ever needs more than one H1 and if you find you are using one per page the odds are you have done something wrong. Also is you are duplicating the logo text with the another main first copy heading then the odds are you also might want to reconsider what you are doing with the page contents and think more deeply.