Tutorial: XHTML code
Even when XHTML is still compatible with it's previous versions, some considerations should be taken to make it work in some old user agents. Below is a list with the compatibility issues in XHTML 1.0 and the solutions.
The XML declaration may cause some user agents to identify your document as unrecognized instead of HTML. This may result in a bad representation of your document. To solve this problem you should avoid using the XML declaration and, as the character encoding for XML documents is specified in it, replace it with a meta declaration in the header:
Code begin<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Code end
- The abbreviated closing for empty elements should be written with a space before the trailing slash. Old browsers will consider this slash as an unidentified attribute and simply ignore it.
- Compatible:
<br />
- Not compatible:
<br/>
- The non abbreviated form for empty elements may cause some user agents to produce unexpected results. Use the abbreviated form.
- Compatible:
<br />
- Not compatible:
<br></br>
Any script or style sheets code containing characters like "&" or "<" or "]]>" or "--" will be processed by an XML parser, which will also completely ignore comented text (e.g., "<!-- comment -->"). The best solution, given that CDATA blocks may be unrecognizable syntaxis in old browsers, is to declare scripts and style sheets code on external files. Remember that to point to these files you should use these statements in the head of the document:
Code begin<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="common.js"></script>
Code end
- Multiple white spaces and line breaks within attribute values may cause problems in many user agents. Avoid using them, specially because they are not necesary.
- The "xml:lang" attribute is introduced in XHTML and is intended to replace the "lang" attribute. As some user agents may not recognize this new attribute use them both for compatibility (the "xml:lang" attribute takes precedence).
- Compatible:
<a href="en.html" lang="en" xml:lang="en">
- Not compatible:
<a href="en.html" xml:lang="en">
- In XML, URIs pointing to bookmarks in a page (e.g., xhtml.html#compatibility) refers to "id" attributes instead of "name" attributes like in HTML 4. So, to have a full forward and backward compatibility (with HTML and XHTML) you should specify both attributes with the same value.
- Compatible:
<a name="the-basics" id="the-basics">
- Not compatible:
<a name="the-basics">
- In XML, the characters available for composing "name" and "id" attributes are more than those permitted in HTML 4. To build backward-compatible names and ids, use only: letters from A to Z (upprecase and lowercase), numbers from 0 to 9, hypens "-", underscores "_", colons ":" and periods "." (the value should always begin with a letter).
- Compatible:
<a name="the-basics" id="the-basics">
- Not compatible:
<a name="0-the;basics" id="0-the;basics">
- The named character reference ' (the apostrophe) is introduced in XML 1.0 and therefore valid, but for HTML 4 it's unrecognized. For backward-compatibility use the representation ' instead.
- Compatible:
it's ok
- Not compatible:
it's ok
This list enumerates the differences between XHTML 1.0 Strict and XHTML 1.1.
- The "lang" attribute have been completely replaced by the "xml:lang" attribute.
- Valid:
<span xml:lang="en">Text</span>
- Invalid:
<span lang="en" xml:lang="en">Text</span>
- The "name" attribute have been completely replaced by the "id" attribute for the elements "a" and "map".
- Valid:
<a id="bookmark1">Anchor</a>
- Invalid:
<a name="bookmark1">Anchor</a>
- The "ruby" collection of elements have been added. Read more about the Ruby annotation
As you may note, XHTML 1.1 is no longer backward-compatible due to the imposibility to use "name" and "lang" attributes. Unless you don't need to use them, your documnet will not be fully compatible with HTML 4 and some user agentes.
You can always validate your XHTML documents (as many other documents) to check that your hard work is 100% correct. You can do so at the W3C markup validation service where you can choose to validate by URL, file upload or direct input. When the result is shown, the list of errors and warnings (if presents) will let you know what and where to correct.
