Layout ] Multimedia ] Programming ] Scripting ] Communicate ] Navigation ]

HTML Document Structure

Up ] [ HTML Document Structure ] Standard Tags ] Forms and Tables ]

Here is a skeleton HTML document, containing the fewest tags necessary:

<HTML>
<HEAD>
<TITLE>Your title</TITLE>
</HEAD>
<BODY>
Your content
</BODY>
</HTML>

The things in angle brackets <...> are called tags or elements.  Tags begin with <tagname> and end with </tagname>.  The entire document is enclosed in a HTML tag.  The document consists of a HEAD and a BODY.   The HEAD contains various information about the document, but in this case, only the title.  The TITLE doesn't show up in the body of the document, but it is usually shown in the browser's title bar.  Note that HTML is case-insensitive.  It doesn't case whether you use uppercase or lowercase for tags.  <HTML> <html> and <HtMl> should all be viewed the same.

There are several tags which can be used in the HEAD.

The most common are TITLE, which simply includes the title for the page, and the META tag.  There are two general ways to use the META tag:

<META NAME="keywords" CONTENT="html, web, internet">
<META HTTP-EQUIV="refresh"
CONTENT="0; URL=forwardto.html">

The first version, using NAME="" provides information for other people, search engines, or people reading your HTML source.  The two most commonly used by search engines are "keywords" and "description".  The second version, using HTTP-EQUIV="" can be used to send special messages to the browser.  The one above forwards the browser to another page, forwardto.html, after 0 seconds.

The SCRIPT tag is allowed in the HEAD, for scripting, as well as the LINK and STYLE tags for stylesheets.


The BODY tag has several attributes.  They are:

  • TEXT: The color for the main text.
  • LINK: The color for links which have not been visited.
  • VLINK: The color for links which have been visited.
  • ALINK: The color for the currently selected link.
  • BGCOLOR: The color for the background.
  • BACKGROUND: The path and filename to an image to be used for the background of the page.   The image is tiled, so that if it is not large enough to cover the page, it will repeat over and over until it does.

Those that require a color can be specified using either a color name from the list below, or a color in RGB hexadecimal.  Here is a small color utility to help you with hexadecimal colors.  If you specify a color with a value from 0 to 255 in the three boxes, it will create the hexadecimal code for you.

The 16 Browser Independent Color Names
Aqua #00FFFF Navy #000080
Black #000000 Olive #808000
Blue #0000FF Purple #800080
Fuschia #FF00FF Red #FF0000
Gray #808080 Silver #C0C0C0
Green #008000 Teal #008080
Lime #00FF00 White #FFFFFF
Maroon #800000 Yellow #FFFF00

Inside the body, perhaps the most common elements are paragraphs and headings.   Paragraphs use the <P> tag, which has one attribute, ALIGN.  The values for align are center, left, and right.  This determines where the paragraph is placed horizontally.  The end tag for a paragraph, </P>, is optional, but may be required in some cases for scripting or stylesheets.

Headings use the tags <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>.  H1 is the most important of headings, and thus is the largest, while H6 is smaller than regular text, but usually bolder.  H4 is about the size of normal text.  The headings also support the ALIGN attribute, but the end tag for them is required.

PS: The HTML for the navigational bar below is:
<H5 align="center">...</H5>

Up ] Next ]
Layout ] Multimedia ] Programming ] Scripting ] Communicate ] Navigation ]
[ HTML Document Structure ] Standard Tags ] Forms and Tables ]

The Web Wizard's Spellbook © 1998, Team WWS