Learning HTML - The HEAD tag

The TITLE tag

If you look at the top of the browser window of this page (I am assuming you use a "graphical" browser, as most of them are, not a text-only one), you will see, along with the browser's brand, the title of the page. If, however, you look at the page we have made so far, as outlined in the introduction, you will only see the path to the file. This is because we have not written a title tag for this page. There are many pages on the web without a title, or even worse, (if a WYSIWIG - what you see is what you get - editor was used like Microsoft Frontpage Express) with titles like "Untitled" or "New page 1".
If this is bad, imagine how it will look on a search engine, where the title of the page is the text for the link to that page.

To use the TITLE tag, just enclose it in the HEAD tag, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Welcome to my Web Page
</title>
</head>
<body>
</body>
</html>

META Data

The HEAD element contains a number of what are called META DATA. These are elements without an end tag. You don't have to include any meta data in your head element, except for the definition of the character set.

The rules for meta data are not so strict, so many web authors devise their own. The basic syntax for all meta data is the following (words inside quotes to be modified accordingly):

<meta name="property" content="value/s of the property">

The character set

This is in my opinion the absolute essential for the display of your page, no matter what your language.

You might not see any problem, if your page is in English and you view it from your own computer, whose operating system uses the English character set (or both French or Greek or Chinese or Russian for that matter). In all other cases, not using a character set tag is asking for trouble. You will most likely see a page of gibberish, and so might the visitors to your page. It can be rectified by the browser, by choosing a different encoding (in Windows view->encoding), if you know the character set the page is using, but how many of the visitors to your page would know that?

This element is usually written as an HTTP equivalent, which has a different syntax than the rest of the other meta data, because it seems that some browsers have problems with the general meta data syntax outlined above, if used for the character set. (they redraw the page twice).

Anyway, if the previous paragraph did not make any sense to you, just copy the text below and put it inside your HEAD elelment:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

The only thing to notice is this "iso-8859-1". This means English. You might also see in other web pages the character set defined as "windows" plus some number. It is best to use the ISO number - not all people have Windows. Greek is "iso-8859-7". The rest of the ISO codes can be found at unicode.org and w3c.org.

Other useful META tags

These meta tags are not absolutely necessary, but most people find them useful in having their page found and displayed correctly in most search engines, or at least those that use meta tags.

Description
This contains a brief description of your page and will be seen in the search results of most search engines under your title. The syntax is:
```
<meta name="description" content="This is Helen's first web page.
It contains my favorite links, personal information and some pictures.">
```
If the description is too long, only part of it will be quoted in the search engine's results. Search engines that don't use meta data, might quote the first words of your page content, which might not look good.
Keywords
This contains the keywords (or phrases) that you believe people would type to find your page in a search engine.
You must not repeat the same keyword, because a search engine might omit to list your page believing you were spamming. The keywords are separated by each other by commas. Example syntax:
```
<meta name="keywords" content="Helen,links,pictures.">
```
Author
A posterity for your name? You can include your name in a meta tag. It will also help someone searching for the pages you have published in the web. Syntax:
```
<meta name="Author" content="Helen Triantafillou">
```
There are many more tags you can use, like GENERATOR, which lists the program you used to create your page. Some software programs do this automatically, but you can safely delete this if you don't want it. There is also the ROBOTS tag which says to the search engine robots to index or not your page, the PICS-LABEL which is used by rating organizations to rate whether or not your site is suitable for children, or contains violence etc and should be blocked by blocking devices (content advisor software). Rating organizations give you the complete code to copy and paste to your page.

Other head tags

In the HEAD section of your page, you can put other things too, such as:

A STYLE tag, to describe the style for the present page.

A link to an external style sheet. Syntax:

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

The first part of javascript.

So, after we have added all of the above, we have this page. There is not much difference from the previous one (meta tags are invisible anyway), but look for the title at the top of the browser window! This is definitely an improvement.
And now that we have, so to say a "a full head", it is time we try to do something with the body in the next page