XHTML Tutorial

What is XHTML?

XHTML 1.0 is a variant of HTML 4.0 which consists of the same set of elements (for example, paragraphs, headings, image, etc.), however, XHTML has a slightly different syntax. XHTML has a strict set of rules that uses the syntax of XML. XHTML is an XML application which allows it to be used by other XML tools with it, for example, XSLT (a language for transforming XML content). XHTML is a W3C recommendation.

When designing HTML web pages, it is important to use the correct XHTML syntax.

Before learning XHTML 1.0, you should be familiar with HTML 4.0.

DOCTYPE Declarations

XHTML documents must always begin with a DOCTYPE declaration A DOCTYPE declaration is the first line of the document and is used to indicate what version of the XHTML the document uses.

An XHTML Document Type Declaration describes the allowed syntax of XHTML markup.

There are 3 versions of XHTML documents: XHTML 1.0 Strict, XHTML 1.0 Transitional and XHTML 1.0 Frameset.

XHTML 1.0 Strict DOCTYPE Declaration

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

Documents that begin with a XHTML 1.0 Strict DTD includes elements and attributes in the HTML 4.01 specification that have not been marked deprecated. The XHTML 1.0 Strict version does not support frames.

XHTML 1.0 Transitional DOCTYPE Declaration

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

Documents that begin with an XHTML 1.0 Transitional DTD includes elements and attributes in the HTML 4.01 specification, and allows the use of deprecated tags and attributes. The XHTML 1.0 Transitional version does not support frames.

XHTML 1.0 Frameset DOCTYPE Declaration

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

Documents that begin with an XHTML 1.0 Frameset are the same as XHTML 1.0 Transitional versions, except that they allow the use of frames.

<XHTML> xmlns Attribute

XHTML documents require the xmlns attribute in the <html> root element. The xmlns attribute specifies the xml namespace for a document.

<html xmlns="http://www.w3.org/1999/xhtml">

lang Attribute and xml:lang Attribute

Use both the lang attribute and the xml:lang attribute when specifying the language of an element.

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

Mandatory XHTML Document Elements

All XHTML documents must have a DOCTYPE declaration and the <html>, <head>, <title> and <body> elements.

The code below shows you the mandatory elements in an XHTML document.

<!DOCTYPE Doctype> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> </head> <body> </body> </html>

Closing Tags and Empty Tags

All HTML elements in an XHTML document must have a closing tag. For example, a <p> tag must have a corresponding closing </p> tag.

HTML elements that do not have a closing tag, such as <img> tags, <br> tags or <input> tags, must be closed by adding a blank space followed by a forward slash (/) before the final greater than bracket (>).

NOTE: The DOCTYPE declaration is not part of the XHTML document itself so it does not require a closing tag or have to be closed.

Case Sensitivity

In HTML, it does not matter wether tags and attributes are uppercase or lowercase. In XHTML, all tags and attributes must be in lowercase.

Attribute Quotes

In HTML, attribute values do not have to be in quotes. In XHTML, attribute values must be enclosed in quotes, either single quotes or double quotes.

Nesting

In XHTML documents, tags must be nested properly.

<parent tag><child tag>content</child></parent>