Creating Valid XHTML Documents
There are two things you should add to your XHTML document before you try to validate it. They are the following:
- The document type declaration
- Character encoding
The first thing we need to do is to choose which document type we will be validating against, and put this information in the document. As mentioned above, the W3C recommends that if possible, to ensure maximum forward compatibility, the strict version of HTML or XHTML be used. However there will be situations when you may have to use the transitional DTD.
Using our example from earlier we will use the strict XHTML document type.
Once we have made this decision we need to put into our document an indication of which version of XHTML it is written in, so that a browser or validator can know this information. We do this by putting at the top of our file, above all XHTML, including the <html> start tag one of the following lines of text. This is known as a Document Type Declaration. Our page will now look like this when we add the Document Type Declaration:
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Animals<title>
</head>
<body bgcolor="gray>
<p><img src="images/dog.jpg" alt="A dog"></p>
<h1>Pit Bulls</h2>
<p>I really hate dogs. Some people like them.
<h2>Poodles
< p><ahref="http://www.poodle.com">Find a poodle</a></p>
<h3>Top Dog Breeds:</h3>
<ul>
<li>Bulldog
<li>Labrador Retriever </li>
<li>Shih Tzu </li>
<li>Dachshund </li>
</ul>
</body>
</html>
The DTDs:
Strict XHTML 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional XHTML 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset XHTML 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Character Encoding
The second thing we have to do is specify what is called a character encoding. When an XHTML document is served up, it is delivered by the server as a stream of bytes. But the browser needs to convert this stream of bytes into characters. It uses a character encoding to do this. The character encoding specifies the language that the content will be in. Sometimes content might be in Japanese. So you have to tell the browser what character encoding you want it to use. You do this by placing a <meta> element in the <head> of your XHTML document. Normally it is placed after the title element. Western European langauges use this encoding:
After adding the character encoding our page should now look like this:
<!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" xml:lang="en-US" lang="en-US">
<head>
<title>Animals<title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="gray>
<p><img src="images/dog.jpg" alt="A dog"></p>
<h1>Pit Bulls</h2>
<p>I really hate dogs. Some people like them.
<h2>Poodles
< p><ahref="http://www.poodle.com">Find a poodle</a></p>
<h3>Top Dog Breeds:</h3>
<ul>
<li>Bulldog
<li>Labrador Retriever </li>
<li>Shih Tzu </li>
<li>Dachshund </li>
</ul>
</body>
</html>