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:
Listing 1 listing-1.html



To use XHTML 1.0 Transitional, place the following code at the very top of your document:
Listing 2 listing-2.html



To use XHTML 1.0 Frameset, place the following code at the very top of your document:
Listing 3 listing-3.html



This one is fairly simple – make sure all tag names and attribute names are in lower case. XML is case-sensitive, which means is different to .

The same applies to all attributes within tags.
Listing 4 listing-4.html

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.
Listing 5 listing-5.html

(recommended)

(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.
Listing 6 listing-6.html



is invalid

is valid (recommended)


is valid (not recommended)


is invalid
is valid (recommended)
is valid (not recommended)

This is an invalid paragraph

This is a valid paragraph

Finally, tags should not overlap each other – they should be nested.
Listing 7 listing-7.html

This is some invalid HTML code

.

This is some valid HTML code

.

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:
Listing 8 listing-8.html


Item 1
Item 2


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:
Listing 9 listing-9.html


Item 1
Item 2


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 & to &. If you don’t do this, your document won’t validate.
Listing 10 listing-10.html


My invalid example link


My valid example link

If you include JavaScript directly in your document (as opposed to using an external file), chances are that the code won’t validate. To get around this, you need to escape the JavaScript code with the tags.
Listing 11 listing-11.html




Of course, including external JavaScript files is the preferred method.
Listing 12 listing-12.html




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.