![[Skip to main content]](./images/a.gif){kind=small}
Article #3
Taking the Mystery Out of XHTML
By Leta Labuschagne, December 2006.
Some authors find coding in XHTML 1.0 Strict (Extensible Hypertext Markup Language) a frustrating experience, since suddenly things that worked before in lower standards, are no longer working as expected. However, it can be plain sailing if the following 10 rules of XHTML are kept in mind:
- Well-formedness
Well-formedness is a new concept. Essentially this means that all elements must either have closing tags or be written in a special form, for example stand-alone tags are closed by adding a space and / before the end angled bracket, like this:
<img href="..." width="..." height="..." alt="..." /> - Properly nested tags
All the elements must nest properly, e.g.
<p>This is a paragraph with <span class="bold">some text in bold</span>.</p>
Note that the start and end tags of <span> are both inside the <p> start and end tags. - Lower case code
XHTML documents must use lower case for all HTML element and attribute names, and for character entity references. - Properly closed tags
All elements must be properly closed with an end tag, for example:
<p>This is a paragraph.</p> - Quoted tag attributes
All attribute values must be quoted, even those which appear to be numeric, for example: <td rowspan="3"> - Closing empty element tags
Empty elements must end with /> (and there must be a space before the slash). For example: <br />, <img ... /> or <hr />. - No spaces in attribute values
Strip leading and trailing white space from attribute values, For example: rowspan="3" is correct, but rowspan=" 3 " is not. Also, avoid line breaks within attribute values. These are handled inconsistently by browsers. - Name attribute deprecated
Note that in XHTML 1.0, the name attribute of elements is formally deprecated. Use the id attribute instead for the elements a, applet, form, iframe, img, and map. There can only be a single attribute of type id per element in one file (page). If the same element needs to be identified repeatedly on one page, use the class attribute.
NOTE: Many existing HTML browsers don't support the use of id-type attributes, so identical values may be supplied for both of these attributes to ensure maximum forward and backward compatibility, for example: <a id="foo" name="foo">...</a>. - Script or style element
In XHTML, the script and style elements are declared as having #PCDATA content. Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of the < and & entities. Thus:
<script type="text/javascript">
/* <![CDATA[ */
... unescaped script content ...
/* ]]> */
</script>However, it is even better to reference the script from an external file. Then the syntax is
<script type="text/javascript" src="some_file.js"></script>Scripts contained in the HTML file often give rise to validation errors due to the strict rules of XHTML 1.0.
- Character entity codes
Authors should use ' instead of ' for an apostrophe to work as expected in browsers. Beware of hyphens and dashes, these often fail in browsers. Use - for a hyphen, – for a short dash, and — for a longer dash. Beware: – and — are not included in the ISO-8859-1 character set!
Here is an example of the syntax and structure of an XHTML document with the most commonly-used meta tags included:
<!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>
<meta http-equiv="content-language" content="en" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="keyword 1, keyword 2" />
<meta name="description" content="Short description of the website." />
<meta name="author" content="Author name" />
<meta name="rating" content="general, 14 years" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="animated_favicon1.gif" type="image/gif" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Page title</title>
</head>
<body>
... page content ...
</body>
</html>
Further examples of Document Type Definitions (DTDs) can be found at www.w3.org/QA/2002/04/valid-dtd-list. Read more about the XHTML 1 standard at www.w3.org/TR/xhtml1.
About the author: Leta Labuschagne studied web design at the University of Otago, New Zealand, and is the Director of Goose Tree Web Design. This article may be freely copied and re-used as long as the author credit and this copyright statement remains intact.