Head Tags

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

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


<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)


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">


<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"  />








info arch

the net





be inspired

my notes