An HTML document structure

With this tutorial you will learn the HTML document structure and the way it's divided, as well as what information you can place in each one of these divisions. We'll also set the document's type and the basis to design an HTML document compatible with the XHTML standard.

An HTML document is basicly separated in two segments: the head (HTML head element) and the body (HTML body element), both contained by the html element. You add a Document Type Declaration on top of it and get the basic document structure for a web page.

The !DOCTYPE declaration

Every well written HTML document begins with a basic declaration that defines what type of document it is. This declaration is made using the HTML !DOCTYPE tag and is the very first thing in all the document. It's intended to tell the processing agent (e.g., browser, search engine, etc.) for which standard is designed the document that's about to process.

A normal declaration for a document written according to the XHTML 1.0 Strict standard (the one we recommend you to use) should look like this:

To see other document type declarations please refer to the HTML !DOCTYPE tag reference.

The main container: html element

The html element acts as a container for the whole document. With the exception of the HTML !DOCTYPE tag every single character in the document should be in between the html start and end tags. The html element can also be used to define the language of the contained document through the "lang" attribute.

When writing XHTML code there are two things to take into account. The first one is that the "lang" attribute (for every tag supporting it) receive a different denomination: "xml:lang" (the language codes are still the same). As XHTML 1.0 doesn't forbid the use of the lang attribute, we can use both for backward compatibility (this is not the case of XHTML 1.1 where the lang attribute is formally deprecated and therefore not valid). Despite this name change

The second consideration, is that the attribute "xmlns" must also be defined for the html tag. A common HTML document compatible with XHTML 1.0 Strict standard should have this basic definition:

Subsequently the content of the html element can be basically divided in two parts: the head (HTML head element) and the body (HTML body element).

The document's head

The head of an HTML document acts as a container for particular information that's defined through a set of elements. All the information contained in the document's head is loaded first, before any other thing in the document, as it's defined before the body segment. Given that everything in the head of an HTML document is non-visual information (except for the title), the head segment is loaded before the document can be shown, which can be useful to define certain characteristics that need to be pre-loaded (e.g., scripts or style definitions).

An HTML document's head is enclosed by the HTML head element and can contain some of these element definitions:

• The document's title: Describes briefly what the document is about. Read more at the HTML title element reference.
• Style declarations: Group of class definitions (style sheets) used by other tags to set visual characteristics. Read more at the HTML style element reference.
• Script functions: Set of functions declared inside the HTML script element to provide functionality to the document.
• Meta statements: Declared through the HTML meta tag, set custom attributes and values for the document.
• Global links: Defined using the HTML link tag designate resources related to the actual document.

Note that we've only described briefly the elements listed above. You can find more information about the use of them in the resources specified for each one.

Here is an example of the a document's head using the previous elements: