Head Section Is the Most Important Part of Your HTML Page

Author: Ian McAllister

The first part of your page matters both to visitors and to search engines.

Start Well

The start of each page is more important than the rest. Most of the start is hidden to the visitor.

Before The HTML Head Tag

There's even something before the head section! When I started, there was only one brand of HTML. Now there are too many choices. You must tell the browser which version your page uses. If you want to learn all about doctypes this is a good reference.

Internet Explorer is used by fewer and fewer people, as they learn how insecure it is, and how easily hacked it is. But it is still used by millions of people, especially beginners, so you have to take it into consideration.

If you don't have the right doctype declaration, IE goes into quirks mode, and produces all sorts of strange arifacts. It still produces strange artifacts if you do include the declaration, but you can learn to bring them under control.

At one time it looked as if XHTML was the way of the future, so I switched over to it. Now HTML5 has come out so if you are a beginner, you should learn the rules of HTML5 and the transition declaration that goes with it.

On this site you can find out how your web design will appear in many browsers. It's a great tool for web designers.

Easiest plan for web designers

Install IE, Firefox, and Opera on your computer
Design so that it looks good in Firefox, then try to adjust it for IE.
Be super-aware of margins and borders.
If you have 3 boxes side by side, each with a margin and a border, each 100 pixels wide, what is the total width? Different browsers can't agree on that, so you have to try to cater for them all.
There are many ways to specify font size. Stick to pixels, because IE hates other ways.

The Head Tag

This starts with head and finishes with /head, which is followed by the body tag. The first thing in the head section is the Title.

Don't confuse this with the headline. The title is the bit appearing between <title> and </title> tags. It appears at the top of the page. You may think it doesn't matter because nobody actually looks up there to see it.

Search engines give words in the title much more importance than words elsewhere. And if a savvy person searches on allintitle:yourkeyword they'll only find your page if the keyword is in the title.

When search engines display the results of their search, the first line will show the title. So it makes sense to make it attractive to people as well as to search engines.

When people bookmark your page, the title is what will be shown in the bookmark. If it is boring they may never look at it again.

The place where a title tag really matters is here, in the search engine results.

META section

Just after the title comes the META section. This is mostly information for the search engines. There are many possible types of META sections but two are of special importance, the description and the keywords metatags. The description is the one shown above, and it is important because it appears just under the title in the search engine results example shown above.

If you miss the description metatag, the search engines will show the first few lines of your page, and some SEs do that anyhow, so make sure that the first few lines make sense, and are not some code garbage.

Google keep their secrets. It might help them find your page if you use your url instead of your name. Or it might not...

These lines are about my CSS file. You're probably going to have to learn CSS as well as HTML if you want to be able to modify templates to suit you, but don't learn all of it - just what you need.

This refers to Google search CSS files for the search box on my page. You'll notice that it is followed by the closing head tag. Which would be followed by the <body> tag.

You may want to prevent SEs indexing certain pages, or following links from the pages. For instance this page aims at helping YOU, not at impressing SEs, so I used to have the following bit at the top
<meta name="robots" content="noindex,follow">
That means that the robots are welcome to follow links from this page, but not to index it. Now I just use the robots.txt file to keep the robots out.

Don't confuse this with nofollow in links that say something like
<a href="" target="_blank" rel="nofollow" title=""></a> These tell robots not to follow individual links, not the whole page.

Your Heading

This comes just after the BODY tag and will be between H1 tags, so the engine assumes it is important. Get all your best keywords in there, but make sure they are attractive to visitors too. This is easy, because if you search on HTML tutorial, you will not be surprised to see HTML tutorial as the heading in large letters.

Your sub-heading

Some search engines don't use the meta description in their description. Instead, they use the first couple of hundred characters after the BODY tag. This will include the heading and sub heading, so make sure your best keywords are present.
If your sub-heading is between <h2></h2> tags, it will be given greater importance by the SEs, because you have given it greater importance.
As well as pleasing the SEs, you must please your visitors. Make the sub-headings show the benefits to your visitor, just as they would expect to see in a newspaper article.

Some search engines search the rest of the page, and some stop with just the head part, so I hope that that this html tutorial has shown you how important it is to get the head section right.