The HTML document
All well written HTML documents have the same structure made up of two main elements, the head and the body. Of course, in an effort to make the browsers fool proof, there are browsers out there that will render HTML tags that are not encapsulated in either of these tags, however this is not good practice and so you should really follow the typical format as outlined below.
<HTML>
<HEAD> ... contents of the HTML header ... </HEAD>
<BODY> ... content consisting of all visible elements here ... </BODY>
</HTML>
The HTML header
The head of a HTML document contains all elements that define the attributes of that page, for example the page title or author. It is also used to pull in any external style sheets or scripts that will be effective for that page, or to embed them directly into that page.
Giving your page a title is one of the easiest things you can do, however so many people neglect this important point and their search engine listings suffer as a result. The <title> tag is often the first tag to appear inside the head of the document...
<HTML>
<HEAD>
<TITLE>The Structure of a HTML Document</TITLE>
<META NAME="description" CONTENT="A brief overview of the HTML document.">
<META NAME="keywords" CONTENT="HTML document structure, HTML overview">
Other attributes of the document are added to the header using a number of meta tags. In the example above I have given the document a description and a list, albeit short, of keywords. Adding a description and list of keywords to associate with a document is a good idea if you want to do well in search engines, as while not all search engines use them for ranking, they may use them for display.
To include scripts (usually JavaScripts) or style sheets that are saved in an external file into your Document, you may need to use the link tag. An example of how you can link a style sheet (style.css) into a page is shown just below.
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
The HTML body
Unlike the <head> or <html> tags, the body tag can take several attributes that will affect the general look and feel of the page. There are six attributes that are supported by all the browsers, as well as the odd one or two that are Netscape or Internet Explorer specific. For now, I'm only going to cover the six that are supported by both browsers.
bgcolor- sets the background colour of a page, using hexadecimal RGB values or a colour name.text- sets the text colourlink- sets the colour of all the links in the pagevlink- sets the colour of all the visited links in the pagealink- sets the colour of the active link (when clicked)background- sets the background image when the URL of a valid image file is passed to it
Here is an example of how a body tag might be used in a HTML document. Here the page would have a white background with black text, links would be blue, visited links would be purple and the active link would go red when you click on it.
<HTML>
<HEAD> ... contents of the HTML header ... </HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="blue" VLINK="purple" ALINK="red"> ... content consisting of all visible elements here ... </BODY>
</HTML>
The body of the HTML document can contain everything you want to be displayed on your page. This includes the obvious things like text and images, but also things like music, videos, scripts, forms, applets and other interactive elements that may require plug-ins.
One thing to note about the body tag is that any text inside this tag (i.e between <body> and </body>) will be rendered as HTML on the screen by the browser. The only way to keep HTML from being rendered or displayed is to comment it out by placing the comment tags <!-- and --> around the HTML tags you don't want to be displayed on the screen.