Lesson 3: The HTML HEAD Element
The TITLE Element
The least thing you must include in the HEAD section of all your webpages in order
to write valid HMTL documents is the TITLE element.
The title of a webpage appears in your browser´s title bar when you view the page.
The screenshot below shows you the title of this webpage:
<title> My first webpage </title>
The META Element
The META element is used for a couple of different functions inside the HEAD section. It´s the first empty element you are learning and as you already know by now, this means that the META element consists only of an opening tag.
The most important use for this element is to give the search engines some basic information about your HTML document such as the most important keywords that appear inside the document and a short description of the document´s content.
META tags use different attributes to specify the function for which each meta element is used. For example: to tell the search engines about important keywords inside your document, you would use the attribute name with the value keywords to define the function of this meta tag and also a second attribute content whose value is a list of comma-separated keywords (or keyphrases) - like this:
<meta name="keywords" content="keyword1, keyword2, ...">
For a short description about the document, you would use description as value for the name attribute and a short text for the value of the content attribute - like this:
<meta name="description" content="This webpage is about bla bla bla ...">
Here´s the raw HTML code for both meta tags again, so you can easily copy and paste it into your first webpage and then add the content you want - the video shows you how, using a practical example and also shows you where the content of these meta tags appears in the search engine listings.
<meta name="keywords" content=" ">
You´ve probably seen it a thousand times, but now you know where they come from: titles and descriptions of webpages listed in the search engine result pages. Google for example uses the content of a webpage´s title tag as title in the search result page and many times it also uses the content of meta description tags as the description for a webpage (especially when the description contains the searched for keywords). The screenshot below - part of the search results for "online games" - illustrates this again.
The character encoding of your webpages
Another function of the meta element is to tell a browser which character set you are using for the given document. Although not necessarily required, it makes quite sense to include it inside the head section of all your webpages, here´s the reason why:
If you do not include this tag into the head section of your webpages, a browser would use the user´s local default character set to display the content of your webpage. This doesn´t make a difference as long as your default character set is the same as your website visitor´s local default character set.
For example: The character set ISO-8859-1 (Latin-1) contains the characters for all american and most western european languages. Hence, a webpage written in the USA would be correctly displayed in North and South America and most western european countries, but visitors from the rest of the world would see pretty much garbage, as their default local character sets are different (Greece for example has ISO-8859-7).
So if you want the content of your webpages to be displayed correctly all over the world, you should tell a browser which character set you are using. To do this, simply add the following meta tag to the head section of your webpage.
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
As said, the character set in the above meta tag applies to american and western european languages, so if your native language is different and you want to build websites in your native language, then you would replace "ISO-8859-1" with your local character set. You can find the one for your language at http://www.iana.org/assignments/character-sets
That´s all you need to know for now about the HEAD section. In the next lesson
we´re going to start adding content to your first webpage. You might have already noticed that
it´s going to become time consuming if you continue building webpages with a text editor. To see the changes
you make to your documents you´d always have to save them first and then (re)load them in your browser.
Cheap Website Hosting
Multiple Site Hosting