Why bother with writing valid HTML or XHTML?
1. Improved cross browser compatibility
Browsers like Internet Explorer and Firefox have a relaxed attitude to the quality of your mark-up code. If you forget to close a tag, well, they will usually let you off and make assumptions about what you meant to do. This kindness is actually extreme cruelty in disguise because each browser takes a different relaxed attitude to your mark-up code. This means that if you are developing a website on Internet Explorer, everything may look fine and dandy, but when you try it on Firefox, it may well be very wrong.
So much for kindness.
The solution to many cross-browser problems comes from ensuring you code is valid, which you can do with some free tools, which teach you along the way too.
2. Better Google hits
It seems likely that Google and other search engines prefer valid code. This is unproven but their indexes need to walk over your code, so writing valid code will help them out and will probably be rewarded.
3. Better Accessibility
Valid code is inherently more accessible than non-valid code. To build an accessible website it's not enough to valid code but it is a very good start.
DOCTYPE DTD Declaration
The first step towards writing valid mark-up code is to declare the kind of code you are writing. HTML and XHTML come in different flavours and have different specifications. By stating which one you are following, your mark-up can be validated against the specification.
Here is the basic template you will need (taken from the w3c site), just so you can see where the DOCTYPE fits in...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p>... Your HTML content here ...</p>
</body>
</html>
I generally use this xhtml 1.0 strict definition. This is a little tougher than html but not too much when you get into the swing of it. If you want to use xhtml, you have the choice of 'strict' or 'transitional'. I usually strive for strict but at times I give up and switch over to transitional. As I understand it, transitional allows you to use some markup which is really out-of-date with the strict interpretation of the standard but not in a really serious way.
Strict and Transitional DOCTYPES for XHTML are...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
A perfectly acceptable alternative approach would be to stick with html. If you do that, here are your strict and transitional choices...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The W3C website has more information on Document Type Definitions (DTDs) or DOCTYPES for short
Validation Tools
When you have declared the specification your html is written against, you are ready to validate it. The W3C has an excellent markup validator. Why not try it and see how you get on. The validator gives you quite a bit of detail on any problems it finds and is quite a nice way of learning by doing.
Changing from HTML to XHTML - tips
There is not a whole lot of difference between XHTML and HTML, the former is just a little more rigourous. Here are a few tips to get you started in making the transition:
XHTML tags are always lower case
Don't mix case in your tags, just stick to lower case.
Open and Close all tags
All tags must now be closed. Mostly you already know you should close tags like <p> with </p> but there are some tricky ones:
For <br> you should now write the open and close within the same tag, like this <br />.
Same applies for <img src="photo.jpg" />.
Ampersand &
Sometimes when you paste a lump of code from somewhere else, you'll see some '&' in there. You will need to change every one of them to & instead.
Update bold and italic tags
Instead of <b> for bold and <i> for italic; <strong> is now preferred for bold and <em> for italic (emphasis). Often these will give you the same result by default, and you can use a style sheet to change their appearance too.
