XHTML/XHTML Documents

Basic XHTML documents

All XHTML documents follow a minimal pattern for document layout:

<!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">

The <!DOCTYPE> tag is the document type definition (described in the previous chapter) that identifies the standard being used.

The <html>...</html> tag pair is the root tag that specifies an XHTML document. It requires two tags: the xmlns is the namespace tag that restates the specific context of the standard, and is normally a URL to the W3 specification. The xml:lang tag specifies the language of the document.

<head>
  <title>My Document's title</title>
</head>

The <head> tag pair of the document concerns the meta data of the document. It must contain the title of the document enclosed within the <title tags.

<body>
  <p>Hello World!</p>
</body>

The <body> tag pair indicates the main content of the XHTML document. Within this tag, it encloses additional sub-tags to indicate paragraphs and other formatting information that is presented to the user.

XHTML Structure

Within the body of the html document, content is broken into a discrete structure. The most common form of separation involves the <p> tag pair, which marks a section of text as a paragraph. A paragraph is a section of text, and may also also include quotes, listings or other components that are contained in nested tags. However, it does not directly contain another paragraph.

Headers of text are identified the numbered series ranging from <h1> through <h6>. They may also be identified by <h> tag pair, in combination with the <section> tag pair; the sections may contain additional headers or paragraphs.

Additional structure to the document can be created using the <div. This tag pair is used to aid layouts within the document, and may contain additional paragraphs or headers within the container.

To separate two parts of the document, the <separator /> is places between two paragraphs or elements.

Other structure tags

<address> is used to mark contact information, normally with the href attribute.
<blockcode> is used to mark a block of code where whitespaced layout is important.
<blockquote> is used to identify a large quotation.
<pre> is used to identify preformatted text.

Inline text tags

A set of text within text may have tags to describe modifiers to the text.

Element	Description
<a [href="(link)" \| id="#tag"] >	Defines an anchor for an explicit link or tag location. In XHTML, the `href` and `id` attributes can be placed on almost any tag as desired.
<abbr full="#tag">	Defines an abbreviation. The full attribute references an id within the same document as the abbreviation.
<cite cite="(source)">	Provides a citiation, where the cire attribute references the source material.
<code>	Refers to computer code.
<dfn>	Refers to a definition
<em>	Puts emphasis on the text, such as italics. Less important than <strong>.
<kbd>	Refers to user input.
<l>	Refers to a line of text.
<q>	Refers to quoted text, but does not add quotation marks. May use the cite attribute.
<samp>	Refers to sample output from a computer program.
<span>	A generic container for use with styling.
<strong>	Puts emphasis on the text, such as bolding. More important than <em>.
<sub>	Indicates a subscript.
<sup>	Indicates a superscript.
<var>	Indicates a variable in a computer program.

Lists

Outer list tag	Innter list tag	Description
<ol>	<li>	An ordered list. `<li>` may contain a value attribute.
<ul>	<li>	An unordered list.
<dl>	<di>	A definition listing.
<dl> or <di>	<dt>	A word being defined. May appear multiple times to indicate separate spellings.
<dl> or <di>	<dd>	The definition of a word. May appear multiple times to indicate separate definitions.
<nl>	<li>	Entry in a navigation listing.
<nl>	<label>	A label for a navigation listing. Labels may appear in other types of lists.

Hyperlinking

Hyperlinks work in XHTML in the same manner as HTML. An href attribute is added to the an anchor element:

<a href="http://www.example.com/">Example</a>

In XHTML 2.0, hyperlinks be placed directly on any element without the need of an anchor tag. As such, elements such as images can be used for a hyperlink.

Image maps

A more advanced form of hyperlinking involved navigation maps. This requires an element to use an image, and to include the usemap attribute to reference an id of a navigation map. Within the navigation list, there are two additional attributes to use: shape, and coords. The coordinates are comma-delimited.

shape	Description	coords
default	Specifies the entire region.	N/A
rect	Specifies a rectangle, with the two corners.	Two X-Y coordinate pairs.
circle	Specifes a circle with a given radius.	An X-Y pair, and a radius.
poly	Specifies an arbitrary shape.	Multiple X-Y pairs outlining the polygon.

Within the navigation list, items apparing first within the list take priority if they overlap with another entry in the navigation map. In addition, navigation lists that do not include an href attribute will be inactive.

If ismap="ismap" is used on the image attribute, the image map is treated as a server-side map. The client will automatically append the coordinates to the URL sent to the server on this form of map (or "0,0" if they are unable to do so.)

Tables

Tables are created in an XHTML document using the <table> tag pair. A table is a grid of cells that is displayed.

Within a table, the <colgroup> and <col> tags are used to specify a formatting or class to a set of columns. These two tags, which allow the span attribute, will cause a given column of cells to obtain a specific format (such as background colour or style sheet).

The <summary> tag pair is used to provide a summary of the table. This is usually a caption about the table, such as a brief description about the table itself.

The <tbody> tag pair identifies the body of the table. It will enclose the row and cell tags that will be described shortly.

The <tr> tag pair identifies a row within the table. Each pair of this tag will contain the cell definitions, whether they are a header or content cell.

The <td> tag pair identifies a cell within a table. The <th> tag pair identifies a cell within a table, which is treated as a header and given emphasis. Cells may span multiple columns or rows with the colspan or rowspan attribute. Some cells may require uting an abbreviation, which is performed using the abbr attribute.

The <thead> tag pair identifies the table's header.

The <tfoot> tag pair identifies the table's footer.

Stylesheets

Style sheets give a description on how to render an XHTML document. Style sheets are not a direct part of the XHTML standard, but are extremely important for determining the layout or display of the document.

They are declared using an empty <style tag, and use the src attribute for the document source and type to specify the type of style sheet (usually "text/css"). An inline style sheet omits the src attribute and contains the affected text within the main element.

External stylesheets may also be included by using <?xml-stylesheet ?> with the href and type showing the source and type of stylesheet.

If desired, a style can be included directly within an HTML element using the style attribute.

Metadata

The <head> tag pair contains the initial description of the document. In addition to the basic title, this section of the document contains metadata useful for categorizing the document.

Meta data has the following attributes available:

Attribute	Description
about	An about URL for the page.
content	Specifies meta data for the associated content. By default, it uses the content within the tags.
datatype
rel	Used with about; specifies relationship.
property	Identifies a property with the XHTML document (see below)

Metadata also provides properties that describe additional information in the document. When the property attribute is set to an entry in the following table, it has the following effect or result:

Property	Description
description	Provides a description of the resource.
generator	Identifies software used to write the resource.
keywords	Comma separated list of keywords for search engines.
reference
robots	Advises robots on behaviour; specific to web crawlers.
title	Specifies a title for the resource.

Meta hyperlinks

In the head tag, you can include hyperlinks to provide information about the next and previous documents. This is done using an empty <link tag, with the href and rel attribute.