XHTML 1.0 crib sheet - XHTML 1.0 document structure

2. XHTML 1.0 document structure

Before going through the overall structure of an XHTML document, let's briefly define some of the terms we will most often encounter.

DTD

A DTD (Document Type Definition), is a collection of XML markup declarations that, as a collection, defines the legal structure, elements, and attributes that are available for use in a document that complies to the DTD.

Document

A document is a stream of data that, after being combined with any other streams it references, is structured such that it holds information contained within elements that are organized as defined in the associated DTD.

Element

An element is a document structuring unit declared in the DTD. It is delimited by a start and an end tag. The start tag is made up of an element name enclosed in angle brackets ("<" and ">", e.g. <h1>) as well as any attributes. The end tag, instead, doesn't contain any attribute and precedes the element name with a forward slash ("/", e.g. </h1>). XHTML is case sensitive and all element names are lower-case. The content of an element is everything between the start and end tags; it can be made up of other elements, text or both.

Attribute

An attribute is a parameter (key-value pair) to an element declared in the DTD and provides additional information about the element it belongs to. An attribute's type and value range, including a possible default value, are defined in the DTD.

2.1 Strictly Conforming Documents

The first element of an XHTML document is the XML declaration. It is not required (though strongly recommended by the W3C recommendation) if the character encoding is the default (UTF-8 or UTF-16) or was determined by a higher-level protocol. In all other cases, it is mandatory:

<?xml version="1.0" encoding="UTF-8"?>

Note: though recommended, the XML declaration may have odd "side effects" in Internet Explorer. Therefore, if you need absolute control over the page layout, don't use it.

After the XML declaration, there must be the DOCTYPE declaration, which must reference one of the three legal DTDs using the respective Formal Public Identifier. Legal DTDs are the following (they are identical to HTML 4 DTDs except for changes due to the differences between XML and SGML):

Strict DTD

It defines all the elements that are not deprecated in the HTML 4 standard and that don't belong to the Frameset DTD (see below); it allows for very clean documents, relying on CSS presentational hints. The document type declaration to use is:

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

Transitional DTD

Besides all strict elements, it defines the HTML 4 deprecated attributes and elements. It makes source code look more cluttered but allows you to take advantage of HTML's presentational features and support non-CSS-compliant browsers. The document type declaration to use is:

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

Frameset DTD

It supports all transitional elements plus frames. The document type declaration to use is:

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

Finally, the last requisites of a strictly conforming document are:

its root element must be html;

the root element must contain an xmlns declaration for the XHTML namespace;

the namespace for XHTML is defined to be http://www.w3.org/1999/xhtml.

Therefore, the root element of the document looks like:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  [...]
</html>

So, to recap, the overall structure of an XHTML 1.0 document looks like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <!-- Headers -->
  </head>
  <body>
    <!-- Document body -->
  </body>
</html>