Incorporating XHTML

Part III, an application

By Tyler Downer
2/23/08

For the last two weeks, we have looked at how XHTML came about, and why, what the specifications are and how to fulfill them. Now we will work on a real example of a working website. Get ready; this will be a long article!

Dirty, old markup

<HtML> <head> <title>Dirty Markup</title> <body bgcolor=#003366> Welcome to the Web site This is an example of dirty markup. notice that tags are not nested properly Also, notice how some attributes are not quoted As well, there is no ending P tag or DOCTYPE. <img src=fitzroy.jpg >Here is an image, notice there is no ending backslash. Again, no ending p or font.

Now for analysis, you can download this page by clicking here and saving this text document on your computer and following the steps as I do them. Or, you can click here to view how this page looks.

Line by Line

I am sure that you have already noticed several things wrong with the above example, even just going off of HTML 4.01. There are no ending head, body, or html tags, some of the fonts and none of the paragraphs are properly closed either. Needless to say, this page does not validate as either HTML or XHTML. So, let’s first add the missing ending tags.

A bit better

<HtML> <head> <title>Dirty Markup</title> </head> <body bgcolor=#003366> Welcome to the Web site This is an example of dirty markup. notice that tags are not nested properly Also, notice how some attributes are not quoted As well, there is no DOCTYPE. <img src=fitzroy.jpg > Here is an image, notice there is no ending backslash. This page is only slightly better. </body> </html>

Now, let's work on making the document XHTML compliant.

Xing the HTML

First, let’s add in a XHTML Transitional DOCTYPE. This identifies it as XHTML. I picked the Transistional DOCTYPE because we are going to be using font tags, which are deprecated in XHTML Strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Notice that we are not adding in an XML namespace. This is optional and can cause problems in some browsers. Next, we will add in the html namespace and make html all lower-case.
<html xmlns="http://www.w3.org/1999/xhtml">

After the HTML, we will add a meta tag, identifying the content of the page, what encoding it uses and so forth. It looks like this:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

The head and title are fine as is the body opening tag, but we will change the title to say Clean Markup. Always remember to check your titles before publishing a page. Next, we will add an h1 tag to the header. This identifies it as a header and not just plain text. We can take out the P tags as well. Now the header looks like this:
<h1> Welcome to the Web site </h1>

Now the top half of the site looks like this:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Clean Markup</title> </head> <body bgcolor=#003366> <h1> Welcome to the Web site </h1>

Do you notice how much cleaner this is? Everything is closed, nested and declared.

The last half

Now for the rest of the page. The designer made some of the letters upper case and some lower-case, but they should all be lower-case. Let’s change that right now in the whole document. Also, put quotes around the font colors. Next, up, the strong and em tags. These should be like this,
tags are nested properly

Now, we need to put in quotes around the next font tag. Then comes the image tag. This is not quoted, and it needs to be ended, like this:
<img src="fitzroy.jpg" />

We should also put an alt attribute there, but we wont worry about that now. Here’s the home stretch. Double check to make sure that your copy looks like this, ignoring the text:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Clean Markup</title> </head> <body bgcolor=#003366> <h1> Welcome to the Web site </h1> This web site looks exactly the same as the Dirty Markup page, but it is now XHTML Transitional compliant. All attributes are quoted and properly nested. This page also makes use of a h1 header for the welcome text, making use of some simple SEO. . <img src="fitzroy.jpg" /> Notice that there is an ending backslash on the img tag. </body> </html>

You can compare these two pages by clicking here for the old site and here for the compliant one. Also, here is the source code for the clean page in a text document. You will notices that the two pages look almost exactly the same, but the underlying markup is vastly different. Next week we will discuss some more benefits of XHTML and what the future of XHTML looks like.

Click Here to go to Part 4

Enter our new Contest today!