SEO : H1 tag

Following on with the library metaphor, you might open the book and flick through the index or the sub titles, to get an idea of the content.

In exactly the same way a search engine considers a page's content headings as indicative of the content. So using the H1 tag in the right way will help give certain keywords to stand out.

Example

<html>
<head>
<title>Green Widgets</title>
<META name="description" content="Green Widgets for sale from Wonderful-Widgets.com, your no.1 resource for green widgets!">
<META name="keywords" content="green widgets, widgets for sale">
</head>

<body>

<H1>Green Widgets</H1>

<p>Green widgets first made an appearance in 1920, when the first green widget was
discovered by Sir Randolf Widget III.

</body>
</html>

In the above example the search engine will detect a title containing the words 'Green Widgets'. It will therefore naturally infer that the page content is about green widgets. If we then follow up the subsequent paragraph text starting with the same keywords, we score extra points.

Making headings more attractive

If you use the H1 tag without any styling you will get this massive heading, like this:

Green Widgets

Green widgets first made an appearance in 1920, when the first green widget was discovered
by Sir Randolf Widget III.

but by adding a style to the H1 tag, we can get our headings to look more normal like this:

Green Widgets

Green widgets first made an appearance in 1920, when the first green widget was discovered
by Sir Randolf Widget III.

example (1) : inline style applied to tag

....

<H1 style="font-size:12px; color: #003399; font-weight:bold">Green Widgets</H1>

<p>Green widgets first made an appearance in 1920, when the first green widget was
discovered by Sir Randolf Widget III. </p>

<p>Green widgets first made an appearance in 1920, when the first green widget was
discovered by Sir Randolf Widget III. </p>

.....

example (2) : external stylesheet applied to tag using class

<head>
....

<link href="/mystylesheet.css" rel="stylesheet" type="text/css">

....
</head>

....
<H1 class="myHeading">Green Widgets</H1>

<p>Green widgets first made an appearance in 1920, when the first green widget was
discovered by Sir Randolf Widget III. </p>

.....

where you have a style called myHeading in an external CSS file located in the root of your website, containing this code:

.myHeading

{
   font-size:      12px;
   color:            #003399;
   font-weight:  bold;
}

	Do... use the class method where possible, which enables you to change all headings across your website in a few seconds
	Don't... over-use the <H1> tag on a page have no more than 3 or 4 headings on a page don't go putting ALL your content in <H1> tags !!!!! It will be detected as spam. (use H2 and H3 if needed, to infer prominence)