XHTML
From JumbaWiki
Note: This article has been taken in part from the Wikipedia entry, but was found to be useful in explaining the topic.
Contents |
Validating XHTML documents
An XHTML document that conforms to the XHTML specification is said to be a valid document. In a perfect world, all browsers would follow the web standards and valid documents would predictably render on every browser and platform. Although validating XHTML does not ensure cross-browser compatibility, it is a recommended first step. A document can be checked for validity with the W3C Markup Validation Service.
DOCTYPEs / XML Namespaces / XML Schemas
For a document to validate, it must contain a Document Type Declaration, or DOCTYPE. A DOCTYPE declares to the browser what Document Type Definition (DTD) the document conforms to. A Document Type Declaration should be placed at the very beginning of an XHTML document, even before the <html> tag. These are the most common XHTML Document Type Declarations:
- XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">- XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">- XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">- XHTML 2.0
XHTML 2.0 currently (Oct 2005) defines its DOCTYPE as
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
In addition to the DOCTYPE, all XHTML elements must be in the appropriate XML namespace for the version being used. This is usually done using an xmlns declaration in the root element.
For XHTML 1.x this is
<html xmlns="http://www.w3.org/1999/xhtml">
XHTML 2.0 requires a namespace and an XML Schema instance declaration, which might be declared as
<html xmlns="http://www.w3.org/2002/06/xhtml2/"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/ http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd">
The system identifier part of the DOCTYPE, which in these examples is the URL that begins with "http", need only point to a copy of the DTD to use if the validator cannot locate one based on the public identifier (the other quoted string). It does not need to be the specific URL that is in these examples; in fact, authors are encouraged to use local copies of the DTD files when possible. The public identifier, however, must be character-for-character the same as in the examples. Similarly the actual URL to the XML file can be changed, as long as the URL before it, e.g., the XHTML 2.0 namespace, remains the same.
Character encoding may be specified at the beginning of an XHTML document in the XML declaration and within a meta http-equiv element. (If an XML document lacks encoding specification, an XML parser assumes that the encoding is UTF-8 or UTF-16, unless the encoding has already been determined by a higher protocol.)
Common errors
Some of the most common errors in XHTML are:
- Not closing empty elements (elements without closing tags in HTML4)
- Incorrect:
<br> - Correct:
<br/>
Note that any of these are acceptable in XHTML:<br></br>,<br/>and<br />. Older HTML-only browsers will generally accept<br>and<br />. Using<br />gives some degree of backward and forward compatibility.
- Incorrect:
- Not closing non-empty elements
- Incorrect:
<p>This is a paragraph.<p>This is another paragraph. - Correct:
<p>This is a paragraph.</p><p>This is another paragraph.</p>
- Incorrect:
- Improperly nesting elements (elements must be closed in reverse order)
- Incorrect:
<em><strong>This is some text.</em></strong> - Correct:
<em><strong>This is some text.</strong></em>
- Incorrect:
- Not specifying alternate text for images (using the
altattribute, which helps make pages accessible to users of devices that do not load images and to the visually impaired)- Incorrect:
<img src="/skins/common/images/poweredby_mediawiki_88x31.png" /> - Correct:
<img src="/skins/common/images/poweredby_mediawiki_88x31.png" alt="Powered By MediaWiki" /> - Correct (XHTML 2.0):
<img src="/skins/common/images/poweredby_mediawiki_88x31.png">Powered By MediaWiki</img>
- Incorrect:
- Putting text directly in the body of the document (this is not an error in XHTML 1.0 Transitional)
- Incorrect:
<body>Welcome to my page.</body> - Correct:
<body><p>Welcome to my page.</p></body>(or any block element other than <code>p</code>)
- Incorrect:
- Nesting block-level elements within inline elements
- Incorrect:
<em><h2>Introduction</h2></em> - Correct:
<h2><em>Introduction</em></h2>
- Incorrect:
- Not putting quotation marks around attribute values
- Incorrect:
<td rowspan=3> - Correct:
<td rowspan="3"> - Correct:
<td rowspan='3'>
- Incorrect:
- Using the ampersand outside of entities (use
&to display the ampersand character)- Incorrect:
<title>Cars & Trucks</title> - Correct:
<title>Cars & Trucks</title>
- Incorrect:
- Using the ampersand outside of entities in URLs (use
&instead of&in links also)- Incorrect:
<a href="index.php?page=news&style=5">News</a> - Correct:
<a href="index.php?page=news&style=5">News</a>
- Incorrect:
- Using uppercase element or attribute names
- Incorrect:
<BODY><P ID="ONE">The Best Page Ever</P></BODY> - Correct:
<body><p id="ONE">The Best Page Ever</p></body>
- Incorrect:
- Attribute minimization
- Incorrect:
<textarea readonly>READ-ONLY</textarea> - Correct:
<textarea readonly="readonly">READ-ONLY</textarea>
- Incorrect:
- Using
document.write()in scripts instead of node creation methods- Incorrect:
document.write() - Correct:
document.createElementNS(); document.getElementById().appendChild();
- Incorrect:
- Using comments in embedded scripts and stylesheets. In XHTML the contents of the comment block are invisible to the browser. Consider
<style type="text/css">
<!--
p { color: green; }
-->
</style>
- In XHTML this is equivalent to the following because the content of the comment is removed from the parse tree.
<style type="text/css"> </style>
- Whilst in HTML it is equivalent to the following, which is probably what was intended.
<style type="text/css">
p { color: green; }
</style>
- Instead, the above should be written using the
<![CDATA[ ]]>syntax.
- Instead, the above should be written using the
<style type="text/css">
<![CDATA[
p { color: green; }
]]>
</style>
This is not an exhaustive list, but gives a general sense of errors that XHTML coders often make.
See also
External links
- Wikipedia XHTML Article - http://en.wikipedia.org/wiki/XHTML
- Official W3C document - http://www.w3.org/TR/xhtml1/
- XHTML Transitional/Strict - what's the difference? - http://brainstormsandraves.com/archives/2003/10/21/xhtml/
