The Structure of an HTML Page

Thursday, February 02, 2012

An HTML 4 document should begin with a DOCTYPE declaration that declares the version of HTML to which the document conforms. If the declaration is not made, the browser will do its best to render the page accordingly. If you've been designing web pages for a while now, you are aware of the difficulty in developing a page that looks the same in all browsers. By setting the DOCTYPE, you can ensure that your web pages will be rendered in a similar format, because this instructs the browser exactly how to handle the elements it finds in the document.  Here is a list of DOCTYPEs that you can use if you want to set your document type to that of HTML 4.01 or XHTML 1.0 (more about DOCTYPE later).

HTML 4.01

[Strict DTD]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[Transitional]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[Frameset DTD]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

[Strict DTD]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[Transitional]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[Frameset DTD]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

After the DOCTYPE, the HTML element follows and contains the HEAD and BODY. The HEAD contains information about the document, such as its title and keywords, while the BODY contains the actual content of the document, made up of block-level elements and inline elements. A basic HTML 4 document takes on the following form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>The document title</title>
  </head>
  <body>
    <h1>Main heading</h1>
    <h2>Sub-heading</h2>
    <p>A paragraph.</p>
    <p>Another paragraph.</p>
    <ul>
      <li>A list item.</li>
      <li>Another list item.</li>
    </ul>
    <h2>Another heading</h2>
    <p>Another paragraph</p>
  </body>
</html>

If you follow some simple tips such as adding a DOCTYPE, making sure that all of your tags are properly closed, and your tags are in lower case, you'll find that your users using modern browsers will have a similar experience. If you are new at HTML coding, it is recommended that you follow stricter XHTML coding standars.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS: The Complete Reference HTML CSS and JavaScript Editor