Computers & ProgrammingHTML/XHTMLWeb Development

The Structure of an HTML Page

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.

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 standards.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top