Categories:
Partners
Web Hosting
We've partnered with HostGator for reliable, affordable hosting starting at $3.95/mon. Use coupon code "javascriptkit25" for 25% off any package.

XHTML Examples

As you can probably guess by now, XHTML code looks very similar to plain old HTML code, with just a couple of syntactic differences. Three examples of valid XHTML documents are shown below. They were validated using the W3C’s XHTML validation tool, located at http://validator.w3.org/.

Example 1:

This example used the strict DTD, meaning that every single tag must be closed properly, all attributes assigned values, etc:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Strict DTD XHTML Example </title>
</head>
<body>
<p>
Please Choose a Day:
<br /><br />
<select name="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
</select>
</p>
</body>
</html>

Example 2:

This example uses the transitional DTD, which provides support for older browsers that don’t recognize style sheets. You can see it uses several attributes within the <body> tag, which aren’t allowed when using the strict DTD:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Transitional DTD XHTML Example </title>
</head>

<body bgcolor="#FFFFFF" link="#000000" text="red">
<p>This is a transitional XHTML example</p>
</body>
</html>

Example 3:

This example uses the frameset DTD, which allows us to split one XHTML page into multiple frames, with each frame containing an XHTML page within it:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Frameset DTD XHTML Example </title>
</head>

<frameset cols="100,*">
<frame src="toc.html" />
<frame src="intro.html" name="content" />
</frameset>
</html>

Conclusion

XHTML documents look more professional and eradicate sloppy coding habits. They still allow us to develop pages for older browsers, however, by using the transitional DTD declaration.

One of the hardest things to do with your site is to modify its pages to conform to the XHTML strict DTD. If you play around with the XHTML validator at http://validator.w3.org/check, then you will see what I’m talking about.

In my opinion, XHTML is a very good idea. I like the idea of using an XML parser to navigate through XHTML files. I also like the idea of mixing HTML with XML… they are the two most popular markup languages in the world and should compliment each other well. Hopefully, XHTML will deprecate HTML over the next couple of years.

Although we’re along way from every site on the web becoming XHTML compliant, it’s good to know that there are standards set in place that we can follow as professional web developers.


Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.