HyperText Markup Language/Head and Body

From Wikibooks, the open-content textbooks collection

Jump to: navigation, search

An HTML file is divided into two basic sections: the header and the body. Each of these sections are demarcated by their respective tags. Thus, the essential structure of an HTML document looks like this :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="..."> 
   <head>
        ...
   </head>
   <body>
        ...
   </body>
</html>

[edit] The HEAD element

All data in the header section of an HTML document is considered "meta-data", meaning "data about data". The information in this section is not normally displayed directly. Instead elements such as style affect the appearance of other elements in the document.

The head element must contain a title element. This element is used to set the title of the HTML document, which is commonly displayed by the web browser in the title bar of the window. Here is an example of the use of the title element:

<head>
   <title>This is the Title</title>
</head>

There can only be one title in the header section.

There may be any number of the following elements inside the head element:

style 
Used to embed style rules in a document. In web sites where consistent look across multiple web pages is required, style should better be specified in a separate stylesheet file, linked using the link element.
link 
Used to link the page to various external files, including a style sheet, or the location of the RSS feed for the page. The type of link is set using the rel attribute. The type attribute specifies the MIME type of the document found at the location given by the href attribute. This allows the browser to ignore links to MIME types it does not support. Examples: 
<link rel="stylesheet" type="text/css" href="style.css">

<link rel="alternate" type="application/rss+xml" href="rss.aspx" title="RSS 2.0">
script 
used to link to an external Javascript file or to embedded Javascript in the page. Linking to an external file is the preferred technique in real web pages though many examples embedded the script for simplicity.
meta 
used to set additional meta-data properties for the HTML document, such as related keywords, etc. Examples: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content="web, HTML, markup, hypertext">
object 
embeds a generic object. This element is not commonly used in the header section. It is normally used in the body section.

There may also be a single base element. This element sets the base URI for resolving relative URIs. It is rarely necessary to use this element.

[edit] The BODY element

Unlike the head element, any plain text placed between the <body> tags will be displayed on the web page by the browser.

What to avoid. The following example is better avoided:

<body text='black' link='red' alink='pink' vlink='blue'
      bgcolor='#DDDDDD' background='wallpaper.gif'>
   ...
</body>

The text, link, alink, vlink, bgcolor and background attributes have all been deprecated in HTML 4. This means that they should not be used in new documents. They have been superseded by the CSS rules given below (using these rules is discussed in a later section HTML Programming/CSS). The values from the previous example have been used as examples in these rules.

text 
body { color:black }
bgcolor 
body { background-color:#DDDDDD }
background 
body { background-image: url(wallpaper.gif) }
link 
a:link { color:red }
alink 
a:active { color:pink } (an active link is a link that is being clicked or has the keyboard focus)
vlink 
a:visited { color:blue }
hover (not an html attribute) 
a:hover { color:green } ('hover' is the style of a link when the mouse pointer is over it)
Retrieved from "http://en.wikibooks.org/wiki/HyperText_Markup_Language/Head_and_Body"
In other languages