6.2 The HEAD Element

6.2 The HEAD Element

Basic HTML documents have two elements, <head> and <body>. The <head> portion of this type of document can define the document and contain information about it that may not be displayed in the browser. Search engines often use the contents of the markup in the <head>. Also contained in the <head> element are references to other documents and objects that may be used in the document but not contained in the <body>. The following shows the basic elements of the <head> element:

<meta />
<base />

6.21 The TITLE Element

The <title> is the page header in the browser window. This element is required in all HTML documents. This markup has a start tag and end tag and is never empty. The <title> in the <head> element is different from "title" attribute, often used within other elements.

<title>This is my document!</title>

6.22 The META Element

The <meta> element has many attributes and provides information about the document. The name attribute is used to specify values such as keywords, author, copyright, and date. Search engines that index your web page may use the name attribute. Other values for the name attribute are: author-corporate, author-email, author-personal, description, generator, htdig-email, htdig-email-subject, htdig-keywords, htdig-noindex, htdig-notification-date, publisher-email, and robots. Instead of name, the http-equiv attribute is used to send a message to the browser with values such as expires, refresh, and Content-Type. Other http-equiv values are: cache-control, content-language, content-script-type, content-style-type, PICS-Label, pragma, vary, and set-cookie. The attribute content is required and used with the name or http-equiv attributes. The <meta> element is always empty, as seen in Listing 6.1, so include the space and slash characters ( /) at the end of the element to make it XHTML compliant.

Listing 6.1: META element examples
Start example
<meta name="keywords" content="HTML, XML, XHTML" />
<meta name="author" content="Beverly Voth" />
<meta name="copyright" content="2001" />
<meta name="date" content="2002-01-01" />
<!-- to force the browser to reload a page -->
<meta http-equiv="expires" content="" />
<!-- to redirect the browser to another page -->
<!-- the content specifies the seconds to wait before going to the URL -->
<meta http-equiv="refresh" content="5;URL=theNextPage.html" />
<meta http-equiv="Content-Type" content="" />
End example

The document "HTML 4.01 Specification W3C Recommendation 24 December 1999," http://www.w3.org/TR/1999/REC-html401-19991224, states in section 4.3 that the Content-Type for an HTML document is text/html. It is strongly recommended that charset is included.

<meta http-equiv="Content-Type" content="text/html; charset=Latin-1" />

6.23 The LINK Element Can Replace STYLE and SCRIPT

In HTML, you can specify stylesheets and JavaScript. These elements can be placed within the <head> element or the <body> element. The first example below shows the placement and format of these elements. If an external document is used, then the source of the document is provided instead of the code shown in the second example below.

<!-- EXAMPLE ONE -->
<style type="text/css">
      <!-- list your Cascading Style Sheets description here -->
<script type="text/javascript">
      <!-- list your JavaScript here -->
<!-- EXAMPLE TWO -->
      <style type="text/css" src="myStyles.css" />
      <script type="text/javascript" src="myJavaScript.js" />

If you include the <style> and <script> elements within your XHTML document, you must make them CDATA (character data). Characters such as "<," ">," and "&" are used by XML and XHTML. If you include them in your stylesheet or JavaScript references, the XML processors and browsers may process them incorrectly. The code below shows the correct method of formatting in XHTML.

<script type="text/javascript">
... unescaped script content ...

Using external references to stylesheets and JavaScript is a very good way to separate the content from the presentation of your document. Since the HTML, XHTML, and XML documents may be displayed on various devices, a separate stylesheet may be used for each device.

STYLE and SCRIPT in external documents can also be replaced with the single element LINK. This element is always empty and always placed within the <head> element. The attributes for the <link> are described in Table 6.1. An advantage of using <link> is the ability to include more than stylesheets and external script documents.

Table 6.1: LINK attributes


The relationship from this page to others. The values of rel can be Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark. An example of <link> attributes is shown below:

      <title>Page 2</title>
      <link rel="Index" href="index.html" />
      <link rel="Prev" href="page1.html" />
      <link rel="Next" href="page3.html" />


The content type of the document. Some of the values for the type attribute can be any of the MIME types such as text/css, text/javascript, or application/msword.


The location of the referenced document.

Other attributes for the <link> element are rev (reversed link to this document), id, class, lang (language), dir (direction of language), title, style, src (location of stylesheet document), onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onkeypress, onkeydown, onkeyup, target (used with href if using windows and frames), tabindex (tab order), accesskey, media (such as screen, TV, print, Braille), and charset. You can read more about some of these attributes as they apply to other elements listed here.

6.24 The BASE Element

The final element in the <head> element is the <base> element. <base> is a way to specify the location of the particular document containing the BASE element. This element is also used by any internal references by the current document to external sources. Rather than include a full path to each reference (absolute path), you can include the relative path to the <base> path of the document. This resolves possible confusion with these relative resources. The sample code for this element is shown below. <base> should be listed in the <head> element and above any relative paths, including any that might be in <style>, <script>, <meta>, and <link>.

      <base href="http://mydomain.com/anotherFolder/thisDocument.html"
        target="_top" />
      <link rel="Next" href="page3.html" />