Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

XHTML Quick and Dirty

Last updated Oct 17, 2003.

Making the transition from HTML to XHTML is a breeze. The first thing to do is to ensure having the DOCTYPE declaration (DTD) at the top of the Web page. Just think of it as declaring the document as "so and so" prior to the show starting. Before doing that, decide which flavor of XHTML to use. Instead of chocolate, vanilla, and strawberry, we have strict, transitional, and frameset.

Strict is for super clean structural mark-up that has no mark up associated with layout such as <:font>. Transitional takes advantage of XHTML's features and CSS, but leaves a little breathing room to use legacy tags for those using old browsers that are not compatible with style sheets or for converting old documents to XHTML. Frameset allows the use of frames to split the browser window with multiple frames.

For strict, use the following first in the document:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For transitional,

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For frameset,

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

The next line is an xmlns declaration for the XHTML namespace. In most cases, it looks like this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The rest of the document is the typical HTML stuff with <head>, <title>, and <body>, except all tags must be in lower case and closed including the hard line-break, image tag, paragraph, and meta tags.

XHTML cares whether you use <P> or <p>. Actually, <P> means nothing to XHTML. Attribute values can be capitalized, however. Here's an example:

Correct:

<img src="Texas.jpg" height="65" width="35" alt="Picture of Texas" border="0" />

Incorrect:

<IMG src="Texas.jpg" Height="65" Width="35" ALT="Picture of Texas" border="0" />

Img, height, width, and alt must be lower case. The items within the quotes are not an issue.

The paragraph tag has a closing </p> tag. That's all there is to it. The others don't have a second closing tag. Instead, they open and close within one tag like this: <br />. The space forward slash before the bracket is the closer.

Correct:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<img src="picture.jpg" height="65" width="35" alt="Picture" border="0" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

Incorrect:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<img src="picture.jpg" height="65" width="35" alt="Picture" border="0">
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>

Notice all the attribute values in the previous examples have quotes. This is another XHTML requirement.

Correct:

<img src="picture.jpg" height="65" width="35" alt="Picture" border="0">

Incorrect:

<img src=picture.jpg height=65 width=35 alt=Picture border=0 />

Some browsers are forgiving of when elements are not properly nested, but XHTML will whip the page and declare it invalid.

Correct:

<p>This is a <strong>bolded</strong> word.</p>

Incorrect:

<p>This is a <strong>bolded word.</p><strong>

The document will most likely validate when the DOCTYPE declaration, case sensitivity, tag closing, quoting attribute values, and nesting are all addressed. There are other rules to follow, but these are the biggies. See how well you did by validating the page.