Header Tag

Before or after the blah blah...?

[lancer]

Hi,

Can someone advise me where the H2 tags would go in the following string of HTML code? I can't decide whether it should be after the guff:

<p style="line-height: 150%" </h2>align="left"><font face="Arial"><font color="#000080" size="3"><b></b></font><b><font size="3" color="#000080">Providing
Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites</font></b></font></p><h2>

Or before the guff:

<p style="line-height: 150%" align="left"><font face="Arial"><font color="#000080" size="3"><b></b></font><b><font size="3" color="#000080"><H2>Providing
Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites<H2</font></b></font></p>

Also, does it make any difference to the SEO exactly where the header tags are placed in the string?

[Dijkgraaf]

Well for starters, neither of those two pieces of string are valid html.

For example
1) You have the </h2> first and then the <h2>
2) This </h2>align="left"> is not valid, it should probably be <h2 align="left">
3) Not valid <H2</font>

Also if you are really intersted in SEO, use style sheets, and have all your styles, alignments and fonts in there.

[Robin_reala]

That's, uh, messy HTML. Here's how you'd do the same thing in clean HTML + CSS:

HTML

<h2>Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites</h2>

CSS

h2 {
 font: bold medium/1.5 Arial, sans-serif;
 color: #000080;
}

[Bennie]

or.

<h2 style="font:bold medium/1.5 Arial;color:#000080">Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites<h2>

[lancer]

I had no idea the html was so bad, or "messy." I didn't code it myself, I just adjusted my text in frontpage to be aligned or bolded and a certain colour etc.. I wanted to make it an H2 tag for clarity reasons. I'm not an HTML coder (I'm a copywriter!) but I know a small amount about SEO and want to have nice clean coding on my site - because I'm anal anyway.

Besides, I put my site through the W3C validation service website and found loads of "mistakes" in the code on my tiny website. Didn't want to make any more when adding an H2 tag.

So does one of the examples given by the two responders give EXACTLY the same result as what I had in my "messy" code? I'm not clear about the answer to my original question.

Instead of:

<p style="line-height: 150%" </h2>align="left"><font face="Arial"><font color="#000080" size="3"><b></b></font><b><font size="3" color="#000080">Providing
Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites</font></b></font></p><h2>

I should put:

<h2 style="font:bold medium/1.5 Arial;color:#000080">Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites<h2>

Or:

<h2>Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites</h2>

But it seems with those two examples a lot has been left out and I think the alignment, font colour etc may be missing..?

[Dijkgraaf]

Both of those examples are fine, however with one of them, the styles and formating are kept in another file called a Cascading Style Sheet (CSS) which is external to the page and which you have to put a reference to in the header of your page in the form of
<link type="text/css" rel="stylesheet" href="stylesheetfilename.css">

If you aren't familiar with it yet, go with the one with the style inline.
e.g.
<h2 style="font:bold medium/1.5 Arial;color:#000080">Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites<h2>

[lancer]

Thanks very much, Dijkgraaf, for reassuring me. :-)

[lancer]

Oh. :-( Have just tried it, but it doesn't work. It makes the *rest of the page* go into a header mode too (bold and separated). I took out this line:

<p style="line-height: 150%" </h2>align="left"><font face="Arial"><font color="#000080" size="3"><b></b></font><b><font size="3" color="#000080">Providing
Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites</font></b></font></p><h2>

And replaced it with this line:

<h2 style="font:bold medium/1.5 Arial;color:#000080">Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites<h2>

[bedlam]

Change:

<h2 style="font:bold medium/1.5 Arial;color:#000080">Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites<h2>

...to:

<h2 style="font:bold medium/1.5 Arial;color:#000080">Providing Distinctive &amp; Creative Freelance Writing for Many Types of Media, and Persuasive Online Copywriting for Websites</h2>

-b

[lancer]

Ok thanks. One tiny slash... (missing html characters can make a very big difference!)