The HTML Document Structure

Using the correct HTML document structure when creating a web page is important. If the HTML document structure is incorrect the web page can break or the search engine spider may not be able to read the page.

We'll review each section of the HTML document structure in this article.

Note:  The following coding examples are for HTML 4.01. If your web page is coded using XHTML you will have to make the appropriate changes.

Starting with the very first line in your HTML document:

DOCTYPE Declaration

The DOCTYPE declaration is the first part of coding that you should enter in your HTML document. This is required if you wish to validate your document with the W3C's validation service.

Web browsers need to know what version of HTML/XHTML your page is written in to process the code correctly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

The HTML Tags

All HTML documents contain a <html> and </html> pair of tags. These tags identify the document's contents as HTML to the browser. The <html> tag goes in the line right under your DOCTYPE declaration. </html> is the last line of coding in your document.

Opening html tag:


The Head Tags - Opening Head Tag

The <head> and </head> tags identify the document's head area. The information between these two tags is not visible on your page.

Opening head tag:


Character Encoding

The character encoding meta tag tells the browser which character set the web page uses.

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

Title Tag

The title tag creates the page title that is seen in the title bar of the web page.

<title>Title of the document</title>

Meta Tags

The meta tags provide information about your web page.

<meta name="Description" content="Your description">
<meta name="Keywords" content="first, second, third">
<meta name="Author" content="Author Information">
<meta name="Copyright" content="Copyright Statement">
<meta name="Distribution" content="Global">
<meta name="Expires" content="Tue, 01 Jun 1999 19:58:02 GMT">
<meta name="Robots" content="index,follow">

Link Tag

The link tag is used to link other documents to this one.

This example shows linking to an external stylesheet.

<link rel="stylesheet" type="text/css" href="styles/stylesht.css">

Script Tag

The script tag defines what type of script the browser is to execute. This tag can also be included in the body of your page.

<script type="text/javascript">
<!--Your script -->

Style Tag

The style tag is used to set the style of your document elements. It is better to use an external style sheet using the link tag so if you wish to change something you only have to change it in one spot.

<style type="text/css">
Your style types

Closing Head Tag

The closing head tag defines the end of the document's head section.


The Body Tags

The body tags surround the body (contents) of your web page.

The body of the document

Closing HTML Tag

The closing HTML tag is the last line in your HTML document. Don't put anything after this tag! Your page will not validate if you do.


The above descriptions are excerts from the HTML Basics Simplified ebook.

HTML Document Structure Related Articles

If you found this web page a useful resource for your own website please link as follows:

HTML Basic Tutor -

Correct HTML document structure when creating a web page is important. If HTML document structure is incorrect web pages break or search engine spiders may not index page.