You have learned about the TITLE element and have blindly copied and pasted the rest of a typical HEAD element into your pages. Now an explanation of why you have been doing that.
DOCTYPE
This element is special. Ittells the browser what type of document/page this is (HTML, XHTML, XML etc.). Without this a perfectly formatted XHTML page might not be rendred correctly. It must be at the top - even before the opening HTML tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
This particular example tells the browser that this is an XHTML version 1 document. There are very few differences between XHTML and HTML version 4 but go with XHTML as it introduces most of the principles you will need in HTML 5 (when it becomes widely used). It also provides more precise control of the page with CSS.
The DOCTYPE says that this is a transitional XHTML document which means that you are free to use some old-fashioned HTML without problems. Using the strict version of XHTML will allow you more precise control over formatting but also less freedom. The EN means the document is in English. The rest points to where information about this version of XHTML is available.
The most common choices of DTD are available for copy and paste from the W3C. Try to use strict XHTML where possible. This site uses transitional purely because of the need to open external site links (like the last one to the W3C) in new tabs/windows (target="_blank") rather than leaving the site. That assumes you want to come back to this site after looking at the external resource. W3C assume you would rather not have the new window opened for you (anyone who has experienced a torrent of popups knows why).
META tags
These are used to hold information much like the stuff above - things about the Web page and its content but which are not part of the page itself. The first one is the only essential one in modern pages.
Character set
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
This says that the file contents are text (HTML) but also chooses a character set. This is the set of letters, numbers and symbols which the browser should use to display the page. Behind the scenes characters are actually codes in binary. Depending on the character set the code 01011110 could be different things. Getting the correct character set is essential if you are using anything other than American English as otherwise special symbols will not show correctly (like the Euro symbol €)
Put a Euro symbol in a paragraph on a page without any tags in the HEAD. You could copy the symbol from above and paste it in. View that in your browser. It will probably not look right without the character set being stated. Now paste in the META tag from the box above (anywhere in the HEAD section). Save it again and view in a browser and you should see the Euro. UTF-8 is fine for showing the characters in most Western languages but it also still works on ancient data which only uses the original 127 ASCII characters from the early days of computers.
Keywords and description
These were once widely used by search engines to index your page. The main engines now ignore them as site owners abused them too much. You could still use them if you want:
<meta name="description" content="A page about koalas" />
<meta name="keywords" content="koala, Phascolarctos cinereus, cuddles" />
Author
If you want people to know about you and when you created the page you can record that with META tags:
<meta name="author" content="Fred Bloggs" />
Others
There have been plenty of other meta tags widely recognised in the past but most are no longer used. Here a few:
- meta http-equiv="content-language" content="en-UK" (the main language used)
- meta name="copyright" content="Fred" (information about who owns the copyright of the page)
- meta name="generator" content="Arachnophilia" (the software package used to create the page)
- meta http-equiv="refresh" content="10; url=fred.html" (reload the page or another page after the time stated)
- meta name="robots" content="NOFOLLOW" (should search archive, index or follow links on this page by using NOARCHIVE, NOINDEX and NOFOLLOW)
- meta name="expires" content="31 July 2010" - tells search engines and browsers when the page should change (and be re-downloaded rather than using the cached copy)
There are better ways to do most of these but they might come in useful sometime.
LINK
For CSS you should already be using LINK elements to attach external stylesheets:
<link rel="stylesheet" type="text/css" href="./styles/default.css" title="default" />
REL shows the relationship of the linked file to this page.
Styles and scripts
Embedded stylesheets and many scripts are also kept in the HEAD section.
HTML tag attributes
<html xmlns="http://www.w3.org/1999/xhtml">
The HTML opening tag needs to include information for the browser. This is done with an attribute.
