The document structure

This tutorial studies the organization of information in an HTML document, analizing its basic structure, how it's divided and what type of content corresponds to each section.

The basic structure

Before you can start adding content to your document, there's a basic structure you need to set up in your file. This structure isn't only required for your document to be compliant but will also allow you to provide useful information about your document. The basic structure of any HTML document consists of the following sections or elements:

The !DOCTYPE declaration

Every HTML document must begin with a basic declaration that identifies its type. This is a very useful measure that inform browsers beforehand, what type of document they are about to process, allowing them to adjust their processing mechanisms accordingly.

The DTD is inserted usign a special tag (!DOCTYPE) that takes a particular form for each document type. This declaration can only be present at the begining of the document. The following example shows the DTD for an HTML5 document:

<!DOCTYPE html>

Unless you're writing documents for a very particular scenario, this is the declaration you're going to use. With the arrival and establishment of HTML5 as the web standard, other DTDs have lost importance and sunk into oblivion. To see other DTDs go to the !DOCTYPE declaration reference.

The main container: html element

After having placed the DTD right at the top of the document, it's time to create the main container: a place where the whole document (except the DTD) will fall into. This container is inserted with the html element, and besides acting as a container, it provides a good chance to define the default language used by the document, through the global attribute lang.

Declaring the language used in a document is particulary important for users relying on speech synthesisers, as it provides key information for determining the correct pronunciation.

The following example shows the structure of the main container (including the language used in the document) and indicates where all the elements of the document should be placed.

<html>
  ...Document's elements...
</html>

The content of this element can be further divided into two sections: the head and the body.

The document's head

The head section is a container for metadata about the document. This metadata can be classified in five categories according to the element used.

  • The document's title: describes briefly the subject treated in the document. This is a required item and is inserted with the title element.
  • Style declarations: groups style definitions used to set presentational attributes for the elements in the document. It's inserted with the style element.
  • Client-side scripts: inserts programs that provide functionality and interactivity. It's declared with the script element.
  • Meta statements: define custom attributes and values. They're inserted with the meta element.
  • Relational information: indicates resources that are somehow related to the document. It's inserted with the link element.

The following example shows the declaration of the head block of a document with some of the elements described above.

<head>
  <title>Eppur si muove</title>
  <meta name="keywords" content="Galileo Galilei, heliocentrism, geocentrism">
  <meta name="description" content="This document approaches briefly the works of Galileo Galilei about the Heliocentrism...">
  <meta name="Author" content="Mark Rottenberg">
  <style>
    table {
      width: 100%;
      border-color: black;
    }
  </style>
  <script>
    result = 0;
    function increment(amount) {
      result += amount;
    }
  </script>
  <link rel="index" href="../index.html">
  <link rel="alternate" media="print" href="printer-version.html">
</head>

It could be beneficial to consider that the information declared in this block will be loaded, because of the order of precedence, before the elements in the body. This is a good opportunity (usually exploited) to pre-load elements like scripts or style definitions.

12Next