<H1> Tags and their importance

How much do they matter?

[IppTak]

I read everywhere that it is recommended to use H1 tags on your page to stay on Google's good side.

Do they really matter? How much effect do you guys think these tags have?

The reason I ask is because I do not like how using H1 tags changes the look of my site. I am using CSS to modify the font/size, but <h1> tag seems to always put some spacing around the text and cause my pages to look just a tad different. I ended up taking the tags all out as a result.

Does anyone know what I am talking about? Am I missing something here? If anyone knows how I can modify my CSS class to convert H1 tag into regular text (without the spacing on top and bottom), I would be grateful. (oh, and also the importance of these things.)

[claus]

For the space above and below, try experimenting with these two in your CSS:

1) padding (top+bottom): [w3.org...]

2) margin (top+bottom): [w3.org...]

[Harry]

I don't use H1. Never hurt me.

I have this pet theory that one day H1 will be used as a filter against SEOed sites!

[pageoneresults]

I read everywhere that it is recommended to use H1 tags on your page to stay on Google's good side.

This not only applies to Google but also to the other search engines. And, you don't just want to insert an

<h>

element because it has more relevance.

There is a reason to use the

<h>

elements. They define headings within a page. They are the eye catching headlines that define a block of content. Not only should you be using

<h1>

, you'll also want to use

<h2>

and

<h3>

if applicable.

Normally a page will have a main heading (your

<h1>

) and then sub-headings (your

<h2>

) and then possibly sub-sub-headings (your

<h3>

).

[willybfriendly]

<h1> tag seems to always put some spacing around the text and cause my pages to look just a tad different. I ended up taking the tags all out as a result.

I have used H1 tags in line in the first paragraph, simply bolded, by using CSS. My point is that you can make them look however you want.

Just stay within the purpose of the tag and you should be OK.

WBF

[IppTak]

WBF,
Point taken, but can you tell me how you get rid of the blank spaces around the H1 text? (especially bottom, it seems to break line)

claus, great advice, but adjusting them did not make any difference.

pageoneresults, yep, I have headers at the top, so I tried applying H1 to them (why not if it helps in SERP), but I stopped when I realized that it puts this empty whitespace underneath it! If you use them, do you have this problem?

[pageoneresults]

That would be a CSS topic which you can find here in the CSS Library...

Avoiding extra space under <h> tags [webmasterworld.com]

[brucec]

IppTak, what we need to know is what are the CSS rules that you set up for your <H1> tags.

Keep in mind that the bigger the font-size value, the more space there will be. That is font-size to for any tag and not just <h1>.

One thing you can do in your CSS for <H1> is have a padding:1px; - I do this often and it leaves 1 little pixel of space on all sides of the text. I tried using 0px, but it does not work in Netscape.

Also, if you want to surpress the line breaking, use CSS display:inline; property and using a <br /> to break your line.

I hope this helps. :)

[Go60Guy]

In your stylesheet you can style your <h> tags along these lines:

H1
{font-family:"verdana"; font-size: 16px;
MARGIN-TOP: 3px;
MARGIN-BOTTOM: 3px;
color: #336666
}

Or you can set up a class as follows:

.nomargin {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}

Then you can use:

<H1 class="nomargin">Heading</H1>

[Watcher of the Skies]

After working to absorb much of the stuff on this forum for a few years, I have some vague tug on my shoulder that says H2 is actually a better tag to use. Unfortunately, I can't remember why I think that.......any guesses?

[IppTak]

Thanks for the inputs, but I have tried all that. I should have been clearer and stated that I do not consider myself as a CSS beginner. Were you guys successful in implementing the code you posted? I tried a class like this in all desperation.

.nomargin{
font-family: verdana,arial,helvetica,sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
padding-top: 0px
padding-right: 0px
padding-left: 0px
padding-bottom: 0px
margin-top: 0.1em
margin-bottom: 0.1em
margin-left: 0.1em
margin-right: 0.1em
}

The code looks like this:

<TABLE>
<TR>
<TD
<h1 class="nomargin">Advertise With Us</h1>
</TD>
</TR>
</TABLE>

...and still no luck. I still have a space underneath the text, "Advertise With Us".

[brucec]

Yeah, IppTak, you were clear to me :) I would try to use 1px instead of 0px in your padding and margin properties.

Besides that, what you have looks good to me.

Maybe the problem is with one of the tags before or after your <h1>. That happens to me some times.

[SuzyUK]

Hi IppTak

there is a small error in your table code which I think is probably just a typo <td (no closing bracket}

but what's causing your problem is the CSS rule you haven't closed any of the padding or margin lines with semi-colons..

btw you can also shorten your CSS to the following if all margins/padding are the some (top right boittom left) you just need to declare it once:

try this

.nomargin {
font-family: verdana, arial, helvetica, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
padding: 0;
margin: 0.1em;
}

Suzy

added: brucec you can use 0 margin/padding with no problems on an <h> element..

[IppTak]

Un-friggin'-believable! Damn semicolons!

and to think that I didn't use semicolons as a Java guy is almost a disgrace. :)

Thanks a ton everyone! I don't know how much <h1> tags will help me in SEO, but I will apply this to my website.

[wuzexin2000]

no so complex,
<h1 class="a.css">h1</h1>
then confine the font size in the CSS

[swinglow]

H1 has been in the past very important to inktomi, looks to me to still be important to the new Yahoo!

[grandpa]

Maybe a final comment about the use of <h1>

I don't use it on my widget sales pages, they have layout that doesn't need H tags. On pages where I describe the widgets, the <h> family tags get used they way they were intended; a topic leading into descriptive content, arranged by importance.

Nothing unusual to report about the sales pages or the description pages. SE's seem to list most of the better ones.

[webnewton]

Use this inside the h1 tag
style="margin-top;0; margin-bottom:0"

your problem is solved ipptak

Moreover H1 used to be important before florida. i don't think they help anymore. well they dont' hurt eithere so you can keep using them. the key is with you now.

[SlowMove]

Normally a page will have a main heading (your <h1>) and then sub-headings (your <h2>) and then possibly sub-sub-headings (your <h3>).

That's what I use. That's three levels. As far as the search engines are concerned, is there any way to sneak another level in there?

[claus]

The H tags have a total of six levels, afaik:

<h1> <h2> <h3> <h4> <h5> <h6>

[Yidaki]

Side note: you don't need a class attribute to style <h>'s:

h1 {font-size: 24px; font-family: Times;}
h2 {font-size: 18px; font-family: Times;}
...

<h1>Headline</h1>
<h2>The sub headline here</h2>
...

[SlowMove]

The H tags have a total of six levels, afaik:
<h1> <h2> <h3> <h4> <h5> <h6>

Right, but how much weight would the search engines give text inside the <h5> or <h6> tags since the text is often smaller than paragraph text? Suppose there were two levels of <h2> tags, and the first was bolded. Would the search engines see the bolded text as being more important?

[Yidaki]

>Suppose there were two levels of <h2> tags, and the first was bolded.

Two levels of h2 tags = h2 + h3. Afaik, h tags are allready bolded so why boldbold? If you need two levels, why not use h2 + h3?

[pageoneresults]

Right, but how much weight would the search engines give text inside the <h5> or <h6> tags since the text is often smaller than paragraph text?

I wouldn't worry too much about the search engines. If your page layout requires

<h>

tags that go that deep, then use them. If they don't, then don't use them.

If you keep looking at this from the SE point of view, you may end up with something that is not semantically correct. I see very few pages that utilize

<h4>

through

<h6>

. When I do see those levels being used, it is usually at the W3 or some other authoritative site on the use of proper markup.

If you find your self needing those deeper levels of

<h>

tags, then it might be time to rethink the content on that page and break it down into additional pages with a sub-navigation for those pages.

One example of using all of the

<h>

elements would be on a site map. That is usually where you are breaking things down to the nth degree.

Heading Tags

At least one heading tag <h1> should appear at the top of your page and be well written using prime keywords and keyword phrases.

You can use CSS to control the appearance of the heading tags. I prefer using external style sheets (file.css).

Make sure your Heading Tags are relevant to the content on the page.

References

• W3C - Use <h1> for top-level heading [w3.org]
  
• W3C - Use headings to structure your document [w3.org]
  
• W3C - 7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements [w3.org]

[edited by: pageoneresults at 3:27 pm (utc) on April 17, 2004]

[SlowMove]

Maybe three levels are enought for each page.

[honolulu]

a simple way to get a h1 without extra BR is the following :

<H1 style="display:inline;">your title</H1>

[tedster]

I have some vague tug on my shoulder that says H2 is actually a better tag to use.

I once posted something like that, over a year ago. There was a period back then when H1 tags had been so misused by quick-fix optimizers that it seemed Google had to ignore them completely as an indicator of relevance.

At that same time, on well formed page structures that included both H1 and H2, H2 still to be giving a bit of a boost -- apparently still a dependable sign of relevance for the included text. Back then. Over a year ago.

Neither H1 or H2 have ever been a silver bullet in any way. And my comments on them are now well over a year old, and things have shifted and shifted again in the mean time.