XHTML syntax rules

There are certain syntax rules in XHTML that must be followed.

XHTML syntax rules are not the same as the tag rules discussed in the differences between HTML and XHTML tutorial, though some of the information from that tutorial is repeated here.

The syntax rules presented in this tutorial mostly revolve around tag attributes.

Quick list of syntax rules

Attribute names must be in lower-case
Attribute values must be quoted
Attributes cannot be minimized
The name attribute is replaced by the id attribute
Some elements are mandatory

Attribute names must be in lower-case

Not just attributes, but tags as well must all be in lowercase in XHTML.

Example with uppercase tags and attributes:

<html> <head> <TITLE>Tags properly closed</TITLE> </head> <body> <TABLE> <TR> <TD ALIGN="CENTER">Cell 1</TD> <TD ALIGN="CENTER">Cell 2</TD> </TR> </body> </html>

The above example fixed to conform to XHTML standards:

<html> <head> <title>Tags properly closed</title> </head> <body> <table> <tr> <td align="center">Cell 1</td> <td align="center">Cell 2</td> </tr> </body> </html>

Attribute values must be quoted

Attributes should always be quoted. Even though a page may appear as you intend it to even if you don't quote attributes, the page will not validate with an XHTML validator. Also, if the value given to the attribute that is not quoted has at least one space, the page may actually not appear as you intend it to.

Attributes not quoted:

<html> <head> <title>Quoting attributes</title> </head> <body> <input type="button" value=I am a button /> <br /><br /> <a href=http://www.yahoo.com target="_blank"> Yahoo search engine </a> </body> </html>

Output:

Yahoo search engine

In the above example, we omitted quotes from the value attribute of the <input> tag which in this case displays a button. The text that is supposed to be displayed on the button is "I am a button", but only "I" is displayed since it cuts off after the space. For the href attribute in the <a> tag, we omitted quotes as well, but it still works as intended.

The above example fixed to conform to XHTML standards:

<html> <head> <title>Quoting attributes</title> </head> <body> <input type="button" value="I am a button" /> <br /><br /> <a href="http://www.yahoo.com" target="_blank"> Yahoo search engine </a> </body> </html>

Output:

Yahoo search engine

Attributes cannot be minimized

There are some attributes in HTML that in the past have been minimized. With XHTML, this cannot be done.

A list of attributes that are minimized in HTML, and how they should be coded in XHTML:

Minimized attributes correct format
HTML	XHTML
compact	compact="compact"
checked	checked="checked"
declare	declare="declare"
readonly	readonly="readonly"
disabled	disabled="disabled"
selected	selected="selected"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"
noshade	noshade="noshade"
nowrap	nowrap="nowrap"
multiple	multiple="multiple"
noresize	noresize="noresize"

Example with minimized attributes:

The above example fixed to conform to proper XHTML syntax:

The name attribute is replaced by the id attribute

In HTML 4.01, there are certain tags which contain a name attribute including <a>, <applet>, <frame>, <iframe>, <img>, and <map>. The name attribute is deprecated in XHTML, and the id attribute should be used instead.

NOTE: Even though the name attribute is deprecated in favor of the id attribute, use both attributes for backwards compatibility -- for older browsers like in this example:

Example using only the name attribute:

The above example fixed to conform to proper XHTML syntax:

Some elements are mandatory

XHTML documents must contain a doctype declaration as well as some mandatory elements. Mandatory XHTML elements include the html, head, body, and title elements. The title element must be located inside the head element.

A basic XHTML document with the mandatory elements (including the doctype declaration):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>XHTML is cool</title> </head> <body> XHTML is used to display content on webpages </body> </html>

NOTE: The doctype declaration is NOT an XHTML element, and not part of the XHTML document. The doctype declaration is used to declare which document type the XHTML document is.

The doctype declaration as well as the different document types you can have in XHTML are covered in the XHTML document types tutorial.

The lang attribute

The lang attribute takes a value specifying the language of the content within an element. For example, "en-us" for US English, "PL" for Polish, or "JP" for Japanese. For a full list of language codes, visit our ISO language codes reference page.

The lang attribute should be used together with the xml:lang attribute and they should both have the same value.

Example:

<div lang="pl" xml:lang="pl">Jestem Jaka Jestem</div>