XHTML 1.0 CompliantThis weekend I’m brushing up on my web design skills, so I thought I’d share. This tutorial will help someone who knows HTML to start writing XHTML. More specifically, if you’re capable of writing HTML 4.01, it’s not a stretch to write XHTML 1.0. Writing standards-compliant code ensures that all browsers will display your page properly, assuming you’re using a standards-compliant browser.
If you don’t know HTML, but want to get in on all of this XHTML/CSS/Web 2.0-type styling goodness, there are some very good articles on how to write HTML available from W3C. They’ll have you making a basic circa-1999 web page in no time. Then come back here and we’ll get you caught up to 2006. (although technically, XHTML 1.0 was last edited in 2002)
Hello World: HTML 4.01

If you know HTML, you probably know how to make a simple page. If you write it correctly and declare it as HTML 4.01 compliant in your code, then most browsers will regard it as valid HTML 4.01 and display it consistantly.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image”></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

…and it’s just that easy. That’s a generic HTML 4.01 page, like you should know how to make. If you just came out of an HTML class or something, and don’t recognize some of the markup here, it’s because you learned a pre-1999 way of making web pages. Let’s see that same page I just laid out in XHTML 1.0:

<!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” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image” /></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

It’s basically the same. The only differences are that it declares itself to be a different standard, XHTML 1.0, and that this code handles non-paired tags differently. You’ll notice that on tags like the img tag, the last bracket looks strange. XHTML is picky about every element being closed, so for tags like the img tag that don’t normally have a closer tag, that is how XHTML closes the tag out.

So who cares? It looks like we accomplished the same thing, but more hassle, right? Well, technically yes, but in the examples shown, the HTML 4.01 page is showing everything it's got to display that simple page, while XHTML isn't even breaking a sweat to do something so simple.

Basically, we're barely scratching the surface of what XHTML has to offer in terms of functionality. Yes, XHTML is able to make a simple page like this, but it is capable of so much more, and is much more capable when paired with CSS.

Now that you know the difference between XHTML and HTML in a most basic sense, go do a find/replace on those closing image tags on your site and convert them to XHTML. (I'd recommend not doing them all at one time, and searching for “> to convert it to ” />. Don’t forget the space!) Go check them for XHTML 1.0 compatibility and join me next time when we watch XHTML play nice with CSS.

Related: