Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Sun

9

DEC

2001

Fast and Easy XHTML

Wondering how to turn your HTML code into XHTML? Here are a few quick tips to teach you the very basics, a sample XHTML document, and resources for more information.

The Basics

  1. All your markup needs to be in lowercase. For example, instead of <P></P> it needs to be <p></p> for XHTML.
  2. Every tag must have a corresponding ending tag, such as <p></p> and <li></li>. Some tags don’t have a corresponding ending tag, such as <br>, <hr>, and others. Those tags, to be backward compatible will look like this instead:

    <br />
    <hr />

    (Below is an XHTML document sample that shows more of these.)

  3. Every attribute value must be in double quotes, such as:
    <img src="image.gif" height="150" width="40" alt="funny face" />

    Notice that since the <img> tag doesn’t have a corresponding ending tag that it also is closed with the extra space and slash, too.

  4. Nesting must be correct (and symmetrical). HTML also requires correct nesting, but it wasn’t always as problematic in browsers. XHTML requires it done properly, though. For example, this is incorrect:
    <p><strong>Text</p></strong>

    This is correct:

    <p><strong>Text</strong></p>

  5. Ampersands (&) within an attribute value must use its character entity reference. For example, a URL like this:

    <a href="http://www.foo.com/cgi-bin/class.pl?
    saturday
    &night&live">foo</a>

    must instead be:

    <a href="http://www.foo.com/cgi-bin/class.pl?
    saturday
    &amp;night&amp;live">foo</a>

  6. Your markup must be well-formed. (If you’ve already been writing good markup that validates with W3C, it’s no big deal. If not, it’s a good time to clean up your markup.)

A New DTD

In addition to the above is a new DTD, too. The sample below is for XHTML 1.0 transitional.

<?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">

The first line within the <? and ?> is recommended but not required. It tells the browser that your document is based upon a DTD using XML, and that it’s using a standard character encoding.

The second line with the <!DOCTYPE ....> will look more familiar to you, this time representing XHTML 1.0 transitional.

Then, the last line beginning with <html xmlns=" ....> replaces the <html> tag, telling the browser the language and the namespace.

A Sample XHTML Document

Below is a sample XHTML document. Note that all the markup is in lowercase, there are quotes around the attribute values, the new endings for the tags that don’t have corresponding ending tags, and it is all well formed.

<?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>Nifty New XHTML document</title>

<meta name="description" content="This is the coolest XHTML document on the 'Net." />

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>

<p>Content here.</p>
<p>Content here.</p>

<ol>
   <li>
List item one</li>
   <li>List item two</li>
</ol>

<dl>
   <dt>
Term
   <dd>definition</dd>
   </dt>
</dl>

<img src="image.gif" height="150&quot; width="40" alt="funny face" />

<br />

<table width="200" border="1" cellspacing="0" cellpadding="5">
<tr><td>
Green eggs</td><td>Ham</td></tr>
</table>

<form method="get" action="foo">

<select name="">
<option value="all">All Products</option>
<option value="books">Books</option>
</select>

<input type="text" name="keyword" size="10"
value=""
/>

<input type="submit" name="Search" value="Go!" />

</form>

</body>
</html>

Ready to give it a try? If you already know HTML, I suspect you can learn how to implement these markup changes within a couple of hours. If you just dig in and try it, I think you’ll be pleasantly surprised to see that it’s easier than you may have thought.

Resources

To learn lots more about XHTML, check out WebsiteTips.com’s XHTML section for annotated links to W3C recommendations, articles and tips, sites devoted to XHTML, and more.

Also highly recommended is Molly Holzschlag’s book, XML, HTML, XHTML Magic published by New Riders.

[Addendum:

These tips have also been added to WebsiteTips.com’s Tutorials - XHTML Tutorials: Fast and Easy XHTML and includes a downloadable PDF version, too.]

10:32 am, pst 9 December, 2001 Comments, Trackbacks ·

Categories: Development, Standards

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - CSS Mastery: Advanced Web Standards Solutions, by Andy Budd, with Simon Collison, Cameron Moll. Published February 13, 2006.

Cover: Dont Make Me Think, Second Edition (2005), by Steve Krug. 

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2001/12/09/fast_and_easy_xhtml/
Page last modified 14 July, 2007 - 10:23pm PDT Page load time: 0.010150 seconds.