Forum Moderators: open

Message Too Old, No Replies

Using <H1> Header Tags

header tags

         

pchristensen

8:45 pm on Aug 8, 2003 (gmt 0)

10+ Year Member



After three painstaking days, I updated my site such that each page has its own unique title page and meta information.

Now, I found an opportunity to use header tags on each text page. In order for the header to scale properly, I need to issue a <H5> header tag command...anything less is just too large for the page.

And now my question...does Google differentiate between header sizes? In other words, if Google is supposedly assigning "points" for header tags, will it assign more credit to a <H1> tag versus a <H5> tag?

jbinbpt

2:23 pm on Aug 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's believed that Google assigns more weight to the info in your <H1> tag. Treat it like your page title. Good,important stuff.

You can use CSS on inline style to adjust the Header tags to how you want them to look.

As an example.....

h1{font-family : Arial;font-weight : bold;font-style : normal;text-align : center;font-size : 24px;}

ericjunior

3:09 pm on Aug 9, 2003 (gmt 0)

10+ Year Member



Define H1 tages in the css but keep an eye on Netscape as it still places a larger space beneath the text compared with IE.

tedster

4:27 pm on Aug 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks for pointing that out, I hadn't noticed it -- but I guess that's because I always explicitly declare margin for H1 as well as font-size. Easily done.

killroy

5:11 pm on Aug 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



By adjsuting margins and padding you can eliminate or creat any spacing you wish.

In fact I've noticed by sticking to a

<html>
<head>
<title>Wdgets'R'Us</title>
</head>
<body>
<h1>Wdgets'R'Us</h1>
<h2>What's them widgets?</h2>
<p>Pretty pretty Widgets</p>
<p>More Pretty pretty Widgets</p>
<h2>Why Your widgets?</h2>
<p>Super Widgets</p>
<p>Better Super Widgets</p>
</body>
</html>

structure, and doing EVERYTHING else in CSS I get GREAT results in google and it's accessible too!

SN

seekanddestroy

5:31 pm on Aug 9, 2003 (gmt 0)



You can make H1 any size you want by assigning a standard fixed size to it no problem.

No CSS required.

g1smd

9:42 pm on Aug 10, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




Use the HTML validator at [validator.w3.org...] and tick the boxes for "Show Source", "Verbose Output", and especially for "Show Outline".

Scroll down past the list of errors (if there are any), to the section marked "Document Outline". If the result there does not look like an outline of your document then you are abusing the tags.

pchristensen

10:29 pm on Aug 12, 2003 (gmt 0)

10+ Year Member



I have now tried using the H1 tag as referenced in a style sheet. However, I now have a large gap under header. Are there any fixes for this?

NickH

11:42 pm on Aug 12, 2003 (gmt 0)

10+ Year Member



Try, for example:

h1 {margin-bottom: 1em}

Authoritative reference: CSS1 box properties [w3.org] -- see sections 5.5.1 - 5.5.5.

Nick

pchristensen

12:12 am on Aug 13, 2003 (gmt 0)

10+ Year Member



Nick:

That works great. Looks like 0em works as well to bring the margin right down to the edge. Thanks!

wackybrit

12:14 am on Aug 13, 2003 (gmt 0)

10+ Year Member



I was going to post this as a separate message.. but hopefully it'll get seen here too :-)

There is a legitimate new technique going around that uses H1 tags to display header IMAGES on your site. So, you'll use an H1 tag with text inside, but then it'll load up a graphic and 'hide' the text, so that you can have a cute 'designed' title rather than a plain text one. The way this works is that inside the H1 tag is a SPAN, and this is set to display:none.. then an image is loaded as the CSS background for the H1 tag.

All legitimate and works wonderfully in practice, but would Google ever ban a site for using display:none, over areas of text, particularly headings? This is a legitimate use, but one that could be misinterpreted. Some sites implement this scheme by using font-size: 0px or similar, which again looks like a scam, but isn't.

Any thoughts?

alexandrahan

2:17 am on Aug 13, 2003 (gmt 0)

10+ Year Member



yes, I noticed the tricks wackybrit mentioned, and also found one site they are doing so. They have a very good ranking at google. But I think google should punish such spam. what do you think?

Also with regard to H1 tag, I am wondering how google treat such H1 tage if I change the size and color directly without CSS?

wackybrit

2:42 am on Aug 13, 2003 (gmt 0)

10+ Year Member



It's not spam unless you use it in a deceiving way, and IMHO should not be punished in this case. There should be nothing wrong with me substituting an image in for the H1 text and hiding the H1 text if the image says the same thing (or similar).

Of course, I can see the danger in that idiots will use it, stuff their H1 full of keywords, and then just show an image of something totally irrelevant. But people already stuff areas of their pages with nonsense without CSS (the TITLE tag, for example, or their hyphenated domains). Ah, what a bizarre game this is :-) That said, perhaps someone will find a better method for it.

Allergic

2:48 am on Aug 13, 2003 (gmt 0)

10+ Year Member



<H1> Tags specific for Google News?
WebmasterWorld have HTML and Browsers Forum and also a CSS Forum!

bekyed

9:24 am on Aug 13, 2003 (gmt 0)

10+ Year Member



So is it ok to include your most important keyword/phrase in each of the heading tags - or is this considered spam?

Bek

pchristensen

5:51 pm on Aug 13, 2003 (gmt 0)

10+ Year Member



Well, I am making some good progress on the method that Wackybrit suggested.

In essence, the H1 tag is swapped-out with an image file and you then specify what the H1 header text should be. It works wonderfully in IE 6.0 but the image does not pull in Netscape 7.1. The page in question fully validates under W3C 4.01.

Has anyone encountered this in Netscape?

Arnett

2:56 am on Aug 14, 2003 (gmt 0)

10+ Year Member



You can make H1 any size you want by assigning a standard fixed size to it no problem.

I read somewhere here that Google penalizes putting anything but text in between <H1> & </H1> saying that it is H1 "spamming".

wackybrit

3:28 am on Aug 14, 2003 (gmt 0)

10+ Year Member



Arnett: One of the methods allows H1 tags to remain as they were, just text between the H1 tag, like so:

<h1 class="image1">Headline for screen readers + Lynx people</h1>

And then in your CSS file you can make it so that it shows an image, rather than the text, for people running CSS compliant browsers, but Lynx/robot/screen reader users will see the H1 text. This is accessibility at its best. I hope Google doesn't condemn it (except in the cases where people are using it to cheat).

PChristensen: I run Mozilla Firebird 95% of the time (I use IE6 occasionally to check the stuff still 'works' though) which uses the same underlying engine as your Netscape, and I have had no problems. If you could stickymail me the URL to a particular page where you have implemented the method, I can check it out and see if anything's wrong, if you like.

Raymond

6:38 am on Aug 14, 2003 (gmt 0)

10+ Year Member



N.T.

NickH

12:45 pm on Aug 14, 2003 (gmt 0)

10+ Year Member



I read somewhere here that Google penalizes putting anything but text in between <H1> & </H1> saying that it is H1 "spamming".

That's quite worrying. Do you have a source? I'm planning to do this quite legitimately: the h1 will be an anchor for a "Skip to main content" accessibility link; example below. I wonder if Google would penalize this...?

Nick

<a href="#main">Skip to main content</a>

... navigation bar...

<h1><a id="main">Main heading</a></h1>