Online Web Design Course » The Head Section

CMS

Content

HTML

Images

Monetizing

Home » HTML

The Head Section

Saturday, 27 March 2010 ·

Print This Post No Comment

Setting The Title Of Your Pages

We set the title of an HTML document by using the <title> and </title> tags. Note that the title of your document is very important for search engine rankings – the first few words of your title HAVE to be the keywords you are targetting in order to get a good ranking. For example if you have a company called “Kitchfur” that sells kitchen furniture, your title is better off as “Kitchen Furniture – Find Kitchen Furniture @ Kitchfur.com” rather than “Kitchfur – A Kitchen Furniture Company”.

In order to add a title to your HTML documents, you need HTML code like the one below:

<title>Online Web Design Course</title>

</head>
<body>

Web design course contents…

</body>
</html>

This will modify the title bar of your web browser, so that it will display whatever is stored inside the <title> tag.

Setting Page Description

Did you notice that whenever you conduct a search on a major search engine, the engine displays a short snippet of description for each site. That description is set by the webmaster of each website by using a <meta> tag with the name=”description” and content=”[Description of your web page]“ attributes. There is an example HTML code below:

<title>Online Web Design Course</title>

<meta name=”description” content=”The BEST Online Web design Course On The Net – 100% FREE!”>

</head>
<body>

Web design course contents…

</body>
</html>

Sidenote: It is not a good idea to use the same description for all of the web pages in a website. Using the same description throughout your website will cause search engines to ignore the tag altogether. Therefore, it is advisable to use a unique description for each of your web pages.

The <meta> tag is a multi-purpose tag used to keep important information about the web page it is used in, such as description, keywords, character set, language, etc. The information is generally stored in the “name” and “content” attributes, as well as “http-equiv”, “lang” and “scheme”.

Defining Keywords

Defining page keywords in the meta tag was popular practice until almost all of the major search engines decided to ignore these keywords because of abuse by search engine spammers. Therefore, defining keywords in the meta tag is redundant most of the time; but in case the search engines change their minds, we’re going to learn how to do it. Below is some sample code:

<title>Online Web Design Course</title>

<meta name=”keywords” content=”online web design course, HTML tutorial, free website design lessons, CSS, SEO, website promotion”>

</head>
<body>

Web design course contents…

</body>
</html>

As you see, keywords (or keyphrases) need to be separated by a comma. Sometimes only leaving spaces between the words is enough, though. Google ignores keywords in meta tags, but defining them do you no harm – other than taking up a small bit of bandwidth.

Defining Document Language

It is possible to define the language of your web pages in the “head” part in order to help search engines index them under the appropriate language category. You can use the http-equiv=”content-language” and content=”[Language Code]“ attributes inside the <meta> tag to define your web page language. Below is an example code:

<title>Online Web Design Course</title>

<meta http-equiv=”content-language” content=”en”>

</head>
<body>

Web design course contents…

</body>
</html>

You can define the language fo your HTML documents with the “lang” attribute of the <html> tag as well:

<html lang=”en”>
<head>

<title>Online Web Design Course</title>

</head>
<body>

Web design course contents…

</body>
</html>

They both do the same job. However the “lang” attribute of the <html> tag overrides the meta language attribute in case of a conflict, so we can say that the former is more important than the latter.

Sidenote: If you do not know the language code of the language you have used to create your web page, there is a comprehensive list found at this location.

Setting The Character Set

A “character set” is a group of characters such as “A,a,B,b,1,5,7,@,$,~” and so on. Different languages require different character sets, so if you design a web page in Chinese, you have to set the “Chinese character set” as the character set of your web page. If you fail to define a character set for your website, the content of your website is going to be rendered by the default character set of the web browsers of your visitors, which might be a different character set than what is required by the language you have used on your web page.

For instance, Online-web-design-course.com is entirely in English, right? That’s why I have defined a character set that covers all the characters required by the English language. If I hadn’t specified a character set, a person living in Japan would not be able to view my website as it is supposed to be viewed, because their web browser would try and interpret Online-web-design-course.com with the Japanese character set by default, which does not contain English language characters.

I know all of this is confusing, but suffice to say that it is VERY IMPORTANT that you define an appropriate character set for every web page you create.

In order to set the character set of your web pages, you are required to use the http-equiv=”Content-Type” and content=”text/html; charset=[Character set id]“ attributes inside a <meta> tag. Like the example below:

<title>Online Web Design Course</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

</head>
<body>

Web design course contents…

</body>
</html>

In the above example, the character set used is “iso-8859-1″. This is the character set that contains all of the characters required by Western European languages – such as English. Below is a list of character sets based on language:

Afrikaans (af)	iso-8859-1, windows-1252
Albanian (sq)	iso-8859-1, windows-1252
Arabic (ar)	iso-8859-6
Basque (eu)	iso-8859-1, windows-1252
Bulgarian (bg)	iso-8859-5
Byelorussian (be)	iso-8859-5
Catalan (ca)	iso-8859-1, windows-1252
Croatian (hr)	iso-8859-2, windows-1250
Czech (cs)	iso-8859-2
Danish (da)	iso-8859-1, windows-1252
Dutch (nl)	iso-8859-1, windows-1252
English (en)	iso-8859-1, windows-1252
Esperanto (eo)	iso-8859-3
Estonian (et)	iso-8859-15
Faroese (fo)	iso-8859-1, windows-1252
Finnish (fi)	iso-8859-1, windows-1252
French (fr)	iso-8859-1, windows-1252
Galician (gl)	iso-8859-1, windows-1252
German (de)	iso-8859-1, windows-1252
Greek (el)	iso-8859-7
Hebrew (iw)	iso-8859-8
Hungarian (hu)	iso-8859-2
Icelandic (is)	iso-8859-1, windows-1252
Inuit (Eskimo) Languages	iso-8859-10
Irish (ga)	iso-8859-1, windows-1252
Italian (it)	iso-8859-1, windows-1252
Japanese (ja)	shift_jis, iso-2022-jp, euc-jp
Korean (ko)	euc-kr
Lapp	iso-8859-10
Latvian (lv)	iso-8859-13, windows-1257
Lithuanian (lt)	iso-8859-13, windows-1257
Macedonian (mk)	iso-8859-5, windows-1251
Maltese (mt)	iso-8859-3
Norwegian (no)	iso-8859-1, windows-1252
Polish (pl)	iso-8859-2
Portuguese (pt)	iso-8859-1, windows-1252
Romanian (ro)	iso-8859-2
Russian (ru)	koi8-r, iso-8859-5
Scottish (gd)	iso-8859-1, windows-1252
Serbian (sr) Cyrillic	windows-1251, iso-8859-5
Serbian (sr) Latin	iso-8859-2, windows-1250
Slovak (sk)	iso-8859-2
Slovenian (sl)	iso-8859-2, windows-1250
Spanish (es)	iso-8859-1, windows-1252
Swedish (sv)	iso-8859-1, windows-1252
Turkish (tr)	iso-8859-9, windows-1254
Ukrainian (uk)	iso-8859-5

(The above list has been retrieved on October 27, 2004 from http://www.w3.org/International/O-charset-lang.html)

Sidenote: The above list is almost obsolete, because there’s a character set that includes every single character in every language and it is called “UTF-8″. I advise you to use the UTF-8 character set instead of any of the character sets above, whenever possible.

Embedding Copyright Information

You can also embed copyright information into any web page by using the <meta> tag. All you have to do is assign name=”copyright” and content=”[Your Name]“ attributes, and your copyright info will be set. Below is an example:

<title>Online Web Design Course</title>

<meta name=”copyright” content=”Onur Özcan”>

</head>
<body>

Web design course contents…

</body>
</html>

Keeping The Bots Away

If you wish to prevent your site from being indexed by search engine spiders (and not be included in the search results) for whatever reason, you can do it with the name=”robots” content=”noindex, nofollow” attributes of the <meta> tag. Let’s apply it:

<title>Online Web Design Course</title>

<meta name=”robots” content=”noindex,nofollow”>

</head>
<body>

Web design course contents…

</body>
</html>

If you use the bolded line in the above example, your web page will not be indexed by most search engines.

If you enjoyed this lesson, please link to it

The 11th lesson of the first stage of your free web design course is over. Let us proceed to the next lesson of our free online web design course for some useful website layout tips!