XHTML
Why follow standards?
Coding to a well defined standard has several advantages over everyone doing their own thing.
- Easier to find errors (can use validation against the standard)
- Easier maintenance
- Future-proofing; your pages will not break on new technology that implements the standard
- Professional product, our code is a client deliverable
These standards should be followed wherever possible when building a site. There may be some technology used which might prevent complete standards compliance.
Notes:
HTML emails standards will be dealt with in another document (to do)
Accessibility guidelines will be dealt with in another document (to do)
XHTML 1.0 Standard
The standard to which we should code is XHTML
1.0 . This is a W3C standard that replaces
HTML 4 while retaining backwards
compatibility with existing browsers if a few simple guidelines
are followed.
There are a number of good online references for XHTML:
The definitive XHTML documentation
is hosted at the W3C web site.
Another good source of information is www.w3schools.com
An easy to follow introduction from Macromedia with specific reference to Dreamweaver can
be found here.
XHTML Overview
Here is a brief outline of the main points of the XHTML standard. Refer to the
W3C site for the complete documentation.
- Documents must be well-formed
- Tags and attributes must be in all lowercase
- For non-empty tags (<a>, <td> and <p>, for example), end
tags are required
- Attribute values must always be quoted
- Attribute minimization is not supported
- Empty elements (<hr> and <br>, for example) must be properly closed
- The id attribute must be used instead of the name attribute
- All images must have alt attributes
1. Well Formed Documents
To be well formed, you need to add the correct XML headers and make sure that all your tags are correctly nested.
An empty XHTML document should look like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
</head>
<body>
</body>
</html>
NB: notice that the DOCTYPE directive doesn't have a closing tag and uses mixed
case. This is because it is part of the XML spec not part of XHTML.
The <?xml tag can cause problems with PHP files. If short tags are enabled
in the PHP config. It is better to have short tags turned off, but in the case
of a site hosted elswhere the solution is to leave out the xml declaration.
2. All tags and attributes must be lower case
XML is case sensitive, so in XHTML <TABLE> is not the same as <table>.
Therefore all tags and attributes must be lower case.
3. For non-empty tags, end tags are required
A non-empty tag is any tag with content between the start and end, such as <a> or <p>. In XHTML these must all contain proper end tags.
4. Attribute values must always be quoted
All attributes in XHTML documents must be properly quoted. Leaving the quotes out will invalidate the document.
5. Attribute minimization is not supported
Attribute minimization happens when only the value of the attribute is added to
the tag, without the attribute's name, such as "checked" or "selected"
for form elements.
6. Empty elements must be properly closed
Empty elements are those tags that don't contain any content. Examples include
<br>, <hr> and <img>. In order to properly close these tags,
just add a space followed by a "/" directly before the closing ">."
This ensures that older browsers that don't support XHTML (such as Netscape 4.x)
can still display the tags correctly. They'll just ignore the extra space.
7. The id attribute must be used instead of the name attribute
The name attribute for referencing elements on your page is officially deprecated and may be removed in future XHTML specifications. To plan for this, use the id attribute in its place.
For compatibility with older browsers you should put a name and an id attribute with the same value.
How do I check my documents?
Once you have completed a document you will need to use a validator to check it
conforms to the XHTML standard.