Head Tags
What's in Your Head
There is a variety of information that can go into the head tags of your web page and some that goes above the head tags. We are just going to cover the basics at the moment.
DTD, Document Type Declaration
First we need to include the DTD this is not actually part of the code and actually is placed above the head tag. The DTD lets the browsers and validators know that the page is written in XHTML and which version you are using. There are three DTDs for XHTML we are going to use STRICT at the moment.
We will place the dtd at the top of the page and then open the "html tag"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Language Attribute
(within html tag)
Within the html tag we will include a lang attribute which will define for the browser the language that we are using for the text. English is defined by using en
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Head Tag
Next we actually open the head tag
<head>
The head tag can be used to store a variety of information that relates to the web page but this information does not actually show up on the web page. It might and often does effect how the information is displayed on the page.
Meta Tags and Self Contained Tags
Meta tags are also placed within the head tag. Meta Tags can include a variety of meta data but at this time we are not going to address all possible data. Meta Tags are self contained tags which means that rather than having opening and closing tags, we just use one tag. As XHTML requires all tags to be closed you need to include a closing slash within the one tag:
<meta> incorrect
<meta information /> you place the information within the tag then create one space after which you place the closing slash.
Character Encoding
(within a Meta Tag)First we will include the data for character encoding this should ensure consistent encoding.
More on encoding can be found at: http://www.w3.org/QA/2008/03/html-charset.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Title of Page
The information that you include the the "title tags" will be displayed at the top of the browser not on the page
<title> the name of your page goes here</title>
Information For Search Engines
Next we will include three Meta Tags that include data used by Search Engines (we will fully address Search Engines in a later entry)
- Description of your Web Page
Include a description of the web page. Keep it to about 20 words.
<meta name="description" content="A description of your web page would go here" />
- Keywords
Keywords that relate to the web page. About 20 words each followed by a comma. (Googel no longer uses keywords
<meta name="keywords" content="Keywords relating to your web page go here" />
- Author
You can include your name to show that you are the author of the page.
<meta name="author" content="your name goes here" />
CSS Styles
(link tag)The last item that we want to places in the "head tag" is the "link" which you will use to link to your style sheet.
In the example below the CSS style sheet is named "name.css".
<link rel="stylesheet" type="text/css" media="all" href="name.css" />
Finally we close the "head tag" and this is what you have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Name of the Page or Site</title>
<meta name="description" content="A description of your web page would go here" />
<meta name="keywords" content="Keywords relating to your web page go here" />
<meta name="author" content="your name goes here" />
<link rel="stylesheet" type="text/css" media="all" href="name.css" />
</head>
share / bookmark