In your (X)HTML page, after your opening doctype and html tag, the next tag should be the opening of your document header using the head tag.
The Head section contains all of the header information for the page. Besides the content of the title tag, the rest of the information is usually not shown visually on the screen, but instead either gives certain readers (eg. screen readers, search engine spiders) additional information about the page, and also specifies how the page will work e.g. a call to a stylesheet, a call to a JavaScript etc.
The Page Title
The page title is set via the title tag. Anything that’s within this tag will be displayed in the top bar of your browser window. This is created with the code
<title>The HTML Document Head</title>
This is the title of the document and will tell everyone (and everything) what the page is about so it should be short but descriptive of the page, and ideally each page on your site should have a unique title.
There should only be one instance of the title tag, and a title tag requires both an opening and closing tag.
The Meta Information
The meta tag allows you to add additional information about the page without displaying this information on screen. The information is machine readable, and can be read by specific software and scripts such as search engine spiders.
A meta tag usually has 2 attributes. The second attribute is always ‘content’ however the first attribute can either be ‘http-equiv’ or ‘name’. You can have any number of meta tags in your header, however the more common ones are listed in the code below
[sourcecode language="html"]
[/sourcecode]
As you can see above, we have 5 meta tags, the first uses the http-equiv attribute and sets the content type for the page (in plain text but served as HTML – text/html) and defines the character set (utf-8 above), the next 4 give additional information about the page, the author of the page, who owns the copyright, the description about the page and some keywords relevant to the page.
Unless the Content Type is set elsewhere the Content Type meta is a requirement (for example, it could be set by your web host but I would recommend you keep this tag in at all times). The other 4 meta tags are optional. You don’t need any of this information however to give additional information to the document, it’s a good idea to include them if possible.
Meta tags do not have a closing tag. In XHTML this means they need to be self closing ie. a forward slash goes at the end of the tag before the greater-than diamond bracket (as per the code above). For HTML 4.01 code, this forward slash shouldn’t be used.
The Link Tag
The link tag isn’t for anchor links (ie. typical clickable links), before you wonder! The link tag allows you to link to external files and include them into the site. Last week we covered how to link to a CSS Stylesheet e.g.
<link rel="stylesheet" href="http://www.yourdomain.com/path-to-css/style.css" type="text/css" media="screen" />
The link tag can accept a number of attributes however the most common of these are ‘rel’, ‘href’, ‘type’, and in the case of stylesheets, ‘media’. The link tag is used to link to a number of different files, the more popular ones are
- Stylesheets are the most common
- Favicons (Favourite Icons – this appears next to the URL in the address bar)
- RSS Feed files
- Pingback URLs (usually used on Blogs)
An example of each of these is
[sourcecode language="html"] [/sourcecode]
Here, the first line references the main stylesheet style.css. The second line is telling the browser where the favourites icon is, the third tells the browser and other software that may access the site, where the RSS feed can be found, and the last line contains the pingback URL.
You can have any number of links to different documents in your header, although typically you will only have one favicon link and one pingback link.
Link tags do not have a closing tag so should be self closing for XHTML. Link tags are also confined to the Header section. They should not be placed in the Body section of the document.
Internal Stylesheets
As explained last week, you can include an internal stylesheet in the header of your document using the style tags eg.
[sourcecode language="css"]