Page Structure

This page describes the basic structure of an HTML document. Both the header and body of an HTML document are considered.

Overview

Proper HTML documents begin with a DOCTYPE declaration, which indicates what type of document is being parsed. For example, this page claims to be an "HTML 4.0 Transitional" document, that is, one that conforms to the HTML 4.0 Transitional standard. This can aid the webserver and webclient in formatting the page. While technically required, for the sake of this tutorial, do not worry about including a DOCTYPE declaration. To see a DOCTYPE declararion "in action", view the source of this page.

The document is then followed by an opening <html> tag, which indicates that an HTML document is beginning. The first section of the document is the head, indicated by the <head> tag. Within the head tag, one can often find the page title as well as meta-informatin about the page. The head tag requires a closing tag. Following the head of the document is the body, indicated by the <body> tag. What follows is the content of the page, whish is displayed by the webbrowser. When the body is finished, a closing tag is provided, and what follows is the closing html tag. In short, each HTML document contains a head and a body; the head provides information about the page, and the body provides the content.

We can summarize the structure of a typical webpage as follows:

DOCTYPE declaration
<html>
<head>
- <title> and </title>
- <meta> tags
- CSS declarations
</head>
<body>
- Page title and section headers (<h1>, <h2>, etc.)
- Page content
  - Paragraphs
  - Lists
  - Tables
  - Graphics (photos, charts, etc.)
- Navigation and links
</body>
</html>

The Head

While the head of an HTML document is required, all tags contained within it are optional. The most common tag in the head is the <title> tag, which gives the title of the page, often in the title bar of the browser window. It is also used when greating bookmarks. A variety of <meta> tags can also be used to indicate the author of a page, keywords for search engines, a page description. For examples of such tags, see the source to this page. Such tags are never required.

If a page uses Cascading Style Sheets (CSS), the CSS are often indicated in the head, either by being included directly, or by way of providing a link to another page. This is an advanced topic, but for an example of how this achieved, please see the source to this page.

The Body

The body contains the content of a page. The most common elements of the body are:

Paragraphs (p)
Section Headers (h1, h2, h3, h4, h5, h6)
Blockquotes (blockquote)
Lists (ul, ol, dl, plus list items: li)
Tables (table, tr, th and td)
Images (img tag, see later in this chapter)
Horizontal rules/lines (hr)

The body tag itself can take a number of attributes, including bgcolor (background color), background (a background image), text (text color), link (link color), vlink (color of visited links), and alink (color of active links). All attributes are given with an equal sign. It is best to put quotation marks around the attribute, and this is required if the attribute does not consist entirely of a string of letters or numbers. Just just " ". An example of a body tag is:

<body bgcolor="white" text="black" link="#17549e" vlink="#666666">

Here the page color is set to white, and no background image is provided. Normal text is black, links are light blue and visited links are grey. Colors can either be given by terms such as "red", "blue", "green", etc. (within limits), or by way of six hexidecimal numbers (0-15). The first pair gives the amount of red, the second pair green, and the third blue. Allowable values for each digit are 0-9 plus A-F (total of 16 values), with 0 being a lack of that value, and F being the highest value. Hence, #000000 is black (no color) and #FFFFFF is white (all color). Each pair represents a number between 0 and 255 inclusive. Experiment to see which values result in what color.

After the body tag, the page content begins. When it is finished, it must be followed by a closing body tag. This is normally followed immediately by a closing html tag.

Contents	Chapter 2	Previous	Next