Clan Themes, We Make Clans Look Good!

Tutorials Main
Latest Tutorials
Popular Tutorials
Top Rated Tutorials

Fast and Easy XHTML

Description: Learning the ins and Outs of XHTML can be very tricky and hard for some to understand. Here are a few tips.

Version: 1.0

Added on: 23 May 2007

Author: Shirley E. Kaiser, M.A.

Difficulty Level: Very Easy

Views: 341

Rating: 10.0 (1 Vote)

Detailed Profile •

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 give it a try, I think you'll be pleasantly surprised to see that it's easier than you may have thought.

Ready to give it a try? Let's go....

The Basics

1. All your markup needs to be in lowercase. For example, instead of

Code:

it needs to be

Code:

for XHTML.

2. Every tag must have a corresponding ending tag, such as

Code:

and

Code:

Some tags don't have a corresponding ending tag, such as

Code:

, <hr>

, and others. Those tags, to be backward compatible will look like this instead:

Code:

<hr />

3. Every attribute value must be in double quotes, such as:

Code:

Notice that since the 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:

Code:

Text

This is correct:

Code:

Text

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

Code:

must instead be:

Code:

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.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!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">

The first line, beginning with

Code:

<?xml version= ...

is the xml prolog, and it's recommended but not required. Note that using the xml prolog will trigger IE6 Quirks Mode, so you might want to leave it out or learn more about it before deciding. The xml prolog 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, beginning with

Code:

<!DOCTYPE ....>

, will look more familiar to you, this time representing XHTML 1.0 transitional.

Then, the last line beginning with

Code:

replaces the element, telling the browser the language and the namespace.

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.

This tutorial was written by http://websitetips.com

Submitted by floppy

You can syndicate our news using the file backend.php or ultramode.txt

Distributed by Raven PHP Scripts

Page Generation: 0.09 Seconds