1. XHTML intro
  2. XHTML purpose
  3. XHTML/HTML diff
  4. XHTML syntax
  6. HTML to XHTML
  7. XHTML validation
  8. XHTML modules
  9. HTML 5
  10. XHTML history
  11. XHTML summary

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>

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>

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
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:
<form> <select name="numbers" id="numbers"> <option value="8" selected>8</option> <option value="10">10</option> <option value="24">24</option> <option value="40">40</option> </select> <textarea readonly></textarea> </form>
The above example fixed to conform to proper XHTML syntax:
<form> <select name="numbers" id="numbers"> <option value="8" selected="selected">8</option> <option value="10">10</option> <option value="24">24</option> <option value="40">40</option> </select> <textarea readonly="readonly"></textarea> </form>

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:

<frame name="frame1" id="frame1" src="frame1.html" />
Example using only the name attribute:
<frame name="frame1" src="frame1.html" /> <img src="/images/pic1.jpg name="pic1" />
The above example fixed to conform to proper XHTML syntax:
<frame name="frame1" id="frame1" src="frame1.html" /> <img src="/images/pic1.jpg name="pic1" id="pic1" />

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.

<div lang="pl" xml:lang="pl">Jestem Jaka Jestem</div>
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information