Creating XHTML Compliant Code
This article contains a few simple pointers to make sure all your HTML code is XHTML compliant. This will be an evolving document as there will periodically be new ideas and methods of doing things.
It’s amazing that despite how simple and fundamental all of these things are, very few people coding HTML get them right.
- Code will be well-formed and be easier maintained, as certain aspects will always be consistent.
- More chance of your document being correct. If your HTML isn’t well-formed, sometimes browsers have to make a guess as to how it should be rendered. It may work fine now, but maybe browsers will change how they guess.
- When combined with using valid CSS, your documents will generally load a lot quicker, and render properly on a wide variety of browsers.
- Goes a long way to improving accessibility (although don’t make the mistake of thinking your pages are accessible just because they are valid XHTML).
There are three different document types you can use for XHTML. You must specify which kind of document right at the top.
- XHTML 1.0 Strict – This is a well-formed XHTML document that uses no deprecated tags such as basefont, center, font, s, strike and u. It also does not allow deprecated attributes such as bgcolor, align, valign. A fairly comprehensive list can be found at http://www.style-sheets.com/articles/css_equiv.html.
- XHTML 1.0 Transitional – This is by far the most widely used document type. It allows the use of the deprecated tags listed above. It doesn’t allow usage of frames.
- XHTML 1.0 Frameset – This is the same as the transitional document, but allows frames.
It is recommended that you use XHTML 1.0 Strict whenever possible.
To use XHTML 1.0 Strict, place the following code at the very top of your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
To use XHTML 1.0 Transitional, place the following code at the very top of your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To use XHTML 1.0 Frameset, place the following code at the very top of your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
This one is fairly simple – make sure all tag names and attribute names are in lower case. XML is case-sensitive, which means
<BODY> is different to
The same applies to all attributes within tags.
<!-- Invalid: --> <DIV class="foo"></div> <div CLASS="foo"></div> <DIV CLASS="foo"></DIV> <BR /> <!-- Valid: --> <div class="foo"></div> <br />
You must put quotes around all attribute values, even if it seems like they don’t need them. Personally, I recommend you use only double quotes (
"), but single quotes are also valid. It’s best to be consistent.
<!-- Invalid: --> <div class=foo></div> <!-- Valid: --> <div class="foo"></div> (recommended) <div class='foo'></div> (not recommended)
All tags that have been opened must be closed. Sometimes tags won’t contain any data in between and opening and closing tag, and can be shortened by ending the element with a slash.
<!-- Line breaks: --> <br> is invalid <br /> is valid (recommended) <br></br> is valid (not recommended) <!-- Images: --> <img src="..."> is invalid <img src="..." /> is valid (recommended) <img src="..."></img> is valid (not recommended) <!-- Paragraphs: --> <p>This is an invalid paragraph <p>This is a valid paragraph</p>
Finally, tags should not overlap each other – they should be nested.
<!-- Invalid: --> <p>This is some <em>invalid HTML code</p></em>. <!-- Valid: --> <p>This is some <em>valid HTML code</em></p>.
Most people won’t even bother with this one, but you will need to if you want your document to validate.
If you want to show a drop-down select box, with a certain item selected, most people use code like this:
<select name="my_select"> <option value="1">Item 1</option> <option value="2" selected>Item 2</option> </select>
Notice the second item is selected. The way this has been indicated is invalid, as there needs to be a value with the
selected attribute. It should in fact look like:
<select name="my_select"> <option value="1">Item 1</option> <option value="2" selected="selected">Item 2</option> </select>
There are a number of tags this will apply to, such as checkboxes and radio buttons.
Often you will need to pass multiple parameters in a link. This means each parameter will be separated using an ampersand (
&). If you are hard-coding these links, remember to change the
&. If you don’t do this, your document won’t validate.
<!-- Invalid: --> <a href="http://www.example.com/test.html?a=value1&b=value2">My invalid example link</a> <!-- Valid: --> <a href="http://www.example.com/test.html?a=value1&b=value2">My valid example link</a>
<![CDATA[ ... ]]> tags.
You should always validate your document! Do it when you’ve developed the initial template, do it when you make some changes to the template, and do it again when you release the site!
It’s really easy for things to accidentally break when you’re splitting files up to use in your scripts or templating engine.
- W3C XHTML Recommendation
- W3C XHTML Validator
- Style-Sheets.com list of deprecated HTML tags and attributes