H1, H2 Tags - What are they?

Do they really make a difference

[Liane]

Some months ago, NFFC mentioned in passing that I should change some of my html to include H1 and H2 tags. Since I don't know what they are (she writes looking like a puppy who just peed on the carpet) ...I have no idea what they do, their value, why or where I should use them.

I know this is webmaster 101 stuff ... but there you go. That's where I am at!

[oilman]

H tags are size specifiers for fonts. H1 is the largest and it goes to H6 which is the smallest. The idea is that H1 is seen as heading type stuff and there may be a boost if your keywords are in H1.

All things being equal H1 tags are generally too large for conventional web development. They can be controlled via CSS. For instance you can specify that anything in an H1 tag show as smaller font.

>>I know this is webmaster 101 stuff
It took me forever to remember which was the big one and which was the small one ;)

[Liane]

So if all my body copy is currently size 2 (regular font sizes specified in Dreamweaver) and all of my Headers are size three and bold ... this won't be seen as a header?

Geeeze, I guess I have to learn what CSS is and then do a LOT of changing on my sites!

[agerhart]

You can also override the H1 tag by specifying what the font size should be.....this will acheive the desired effect from the SEO aspect as well as the design aspect.

[mivox]

Personally, I think most "H" type looks goofy either way. The spacing and sizing is all wrong... so if you don't want to spend time making custom CSS specifications for each "H" size you're going to use, I wouldn't bother with them.

[heini]

Well here come the designer folks... :)
CSS specifications arenīt time consuming IMHO, theyīre time savers. You donīt have to write those <font> tags every time, but just once.
Also I am still under the impression proper structuring via <h1>, <h2>, <p> not only helps SEs finding out whatīs important, but also yourself while building a page.
But then perhaps I`m more the writer type than the designer type

[Liane]

agerhart, could you please expand upon that? Not quite sure how to go about doing that. Could you give me a "for instance". Say if I have a heading like this:

<p><font size="3" color="#000066" class="ContentText"><b>ASA BASIC KEELBOAT SAILING STANDARD</b> </font></p>

How would I write the new tag?

Thanks Mivox. I feel more encouraged now ... but I *want* that keyword advantage to pay off for me wherever I can do it without breaking any accepted rules of the various SE's.

[paynt]

Liane,

You may have guessed by now that I like to research this wonderful search feature we have here at Webmaster World. I discovered some information that may benefit you from previous discussions. You're all gonna start thinking I'm a nut. I only have 300 posts in over a year because I spend an hour or so on each one. Call me crazy but I love it and I hope this helps.

Remember, there's no such thing as a dumb question just dummies that don't ask!

H1 tags with NO margin-bottom, cross browser [webmasterworld.com]

optimization - hidden layers [webmasterworld.com] hidden H1 tags

CSS Cascading Style Sheets [searchengineworld.com]

Heading Tag [searchengineworld.com]

[mivox]

Your new tag would be:

<h1>BIG HEADLINE HERE</h1>

And then your style sheet would have a decent looking specification for the appearance of the H1 tag...

Sine "H" tags are spaced on their own lines, the <p> tag isn't needed.

[Liane]

heini,

I am definitely the writer type rather than the designer type ... I just don't know how to accomplish the task. Any help gratefully rec'd!

[agerhart]

<h1><font size=3 face="Arial"><b>YOUR KEYWORD HERE PLEASE</b></font></h1>

[tedster]

Some search engines place significant importance on H tags, because their assumption is that a "true" heading means that all the paragraphs up until the next heading will be about that particular subject. This idea goes back to Information Science and HTML's parent language, SGML. So you can see why the academic minds who design search engines might value a word in an H tag very highly.

Once I got the hang of it, I didn't find the CSS to be much of a hassle. You can make H tags render exactly the same as plain-old bold headings. Here's a thread that covers how to eliminate the extra line under the H tag [webmasterworld.com].

[Liane]

Thanks guys! I am going to give it a shot on a test page and see if I can't really screw something up royally.

[NFFC]

>not only helps SEs finding out whatīs important, but also yourself while building a page.

Great point heini, that's how I use them too.

[Marcia]

The <H> tags automatically generate a line break after. Is there a way to over-ride that?

[Liane]

Hi Marcia,

Apparently yes there is. See the post by Tedster above.

[tedster]

Well, my method does get rid of the extra space, but not the line break. I don't know of any way to do that -- I think it's part of the W3C standard for browsers.

[Marcia]

I'm not absolutely convinced it's 100% necessary to use <H1>. I generally use <H2> and instead of Verdana use Arial font in just the heading, since it's naturally smaller and more closely spaced.

With <H> tags and modifying font tags, I was told long ago to keep the font tags nested outside the <H> tags, rather than within them. DW puts them inside, but when I hand code I put them outside and sometimes modify the DW code.

[Eric_Jarvis]

you can't get rid of the line break...but you can add a span to the latter part of the text to alter its appearance...this will effectively look the same as having no line break...conceptually it isn't ideal though

[tedster]

Eric, could you give a sample line of code for that span technique? Even though my morning caffeine is well on it's way to the brain, I'm not getting it.

[Mike_Mackin]

Guess it's time to bring up the point that controlling H tags via CSS might be put in a separate file.
< link rel="stylesheet" href="text.css" type="text/css" >
to cut down the junk SEs have to read.

[heini]

Mr Mackin, Sir, thatīs why I said with CSS it only has to be writen once.

[Eric_Jarvis]

<h1>This is a heading. <span class="something">The rest of this line is not.</span></h1>

then simply set h1 and .something the way you want them in the style sheet...voila! no line break at the end of the header (or so it appears)

[Travoli]

You know, I remember seeing this question somewhere, but I forget the answer...

Are there any drawbacks to using CSS? For example, can a SE tell that the H1 you added is demoted to a smaller size with CSS? Also, are H1's better than H2's in your opinion?

[mivox]

AFAIK, there are no search engine spiders currently requesting external .css files, so your secret should be safe. ;)

[Marshall]

Just a reminder on the accessibility issue. <H> tags should follow a proper sequence otherwise it can confuse Braille readers and speech synthesizers.

[Travoli]

thank you Mivox :)

[Marcia]

<H> tags should follow a proper sequence

Marshall, can you elaborate a bit on that for accessibility/usability issues?

[Marshall]

Gee Marcia, must I do everything?!?!?

Seriously, Braille readers and speech synthesizers emphasize things depending on the tag. As such, <b> has a different connotation than <strong>. They see <b> as a bolded word and <strong> as an important word.

With the <H> tag, they should follow a specific order within the category they cover. Say your category has header section and four subsections and your first <H> tag is <H2>. The next for the subsections should be <H3> or something smaller: <H4>, <H5> or <H6>. All the subsections can be the same <H> tag, but you shouldn't go <H3> then <H4> then back to <H3> because it will interpret the <H4> as a new section. Make sense? Since I tend to give visual examples - I use to be a teacher among other things - it goes like this:
TOPIC-
<H2>
<H3>
<H3>
<H4>
NEW TOPIC -
<H2>
<H3>
<H4>
<H5>
and so on....

WAI also emphasizes not to use <H> tags merely to bold things.

[netcommr]

Heading tags are some of the most important things to use on a page.

Heading tags have nothing to do with size, they signify the importance of the text which follows. The size thing comes from browser companies, not specifications. Headings should be used to headline the text which follows. For example:

<h1>Heading Main Topic</h1>

This is the area of the page which is most important to what the page's main topic is.

<h2>Sub Heading of the Page</h2>

This is where supporting topcs would be for the page.

<h3>Related Heading</h3>

Put some stuff related to your topic for this page here

--------------

Never put them out of order, such as using an H1 and H3 only skipping the H2.
Never use more than 1 instance of any heading on a page.

Don't ever nest any tag inside a heading before your keywords you want to get relevance for! For instance:

<h1><font>some text</font></h1>

the above code just got relevance for being in a font tag, not in a heading. Besides, it breaks the rules for html specifications.

Never put a heading on a page without any text following it. Such as:

<h1>spamming keywords</h1>
<h2>more spam</h2>
<h3>smaller size heading</h3>
this is the body of my page.

The H1 and H2 tags will basically be ignored and you got boned for bad code.

Your headings and the body sections which follow the headings should be in a logical structure. You need to think of headings as part of the structure of a page, not a text portion. Your headings are the break points in the structure of your body section. Your headings need to summarize your text sections, as this is why a search engine gives weight to the words in them (logically). If you follow W3C specifications for writing pages, rankings at search engine are much easier. When a search engine writes an algo, they start with the specifications!!!

"Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions"

The above quote is talking about style sheets, use them and use them often.

Quoted from
[w3.org...]

(edited by: Marcia at 6:18 am (gmt) on Oct. 11, 2001