Click here to Skip to main content
15,868,016 members
Articles / Web Development / XHTML
Article

8 simple rules to transition from HTML to XHTML

Rate me:
Please Sign up or sign in to vote.
4.17/5 (9 votes)
1 Feb 20045 min read 51.9K   29   3
8 simple rules to transition from HTML to XHTML

Contents

Requirements

This article assumes that you have at least a fair idea of HTML

Introduction

By now, you must have a fair idea of what XHTML is and why it should be adopted. If not, read Paul Watson’s article on XHTML, from an HTML starting point.

Most articles on the web are currently authored in HTML, and not very good HTML at that. So, how do you go about transforming poorly written HTML into XHTML?

This was the question I was faced with while doing a redesign of a Federal government website. The website was huge (40,000 pages) and I was working on the top 30 page templates. This is what I learnt from this challenging and exciting project:

One, add the DOCTYPE

The DOCTYPE is the SGML declaration of the version of the current document. The DOCTYPE should be the first line of your XHTML document unless you use an xml declaration such as the one below to specify character encoding, in which case the DOCTYPE should immediately follow the xml declaration. The default character encoding is UTF-8 or UTF-16.

XML
<?xml version="1.0" encoding="UTF-8"?>

There are three types of Document Type Definitions or DTDs: Strict, Transitional and Frameset.

The Strict DTD should be referenced when the markup in the document follows all HTML rules to the letter.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The Transitional DTD is the best to use when moving from HTML to XHTML.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The Frameset DTD is referenced when the page layout uses frames.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Two, specify the namespace

For the document to be a valid (more on that later) XHTML document, it is necessary to specify the namespace – browsers use the default in the absence of a specified namespace.

Change your opening html (<html>) tag to look like this:

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

There is no change to the closing html (</html>) tag.

Three, Change all tags to lowercase

You may be used to writing your HTML tags in uppercase to differentiate the tags from your data, but XHTML requires that all tags be written in lowercase. XHTML is case-sensitive, so

<HTML> is not considered the same as

<html> which is the correct way of writing it.

Four, Close every tag you open

We know that in HTML, certain tags have to be closed and others like the <img> tag, don’t. In XHTML, all tags have a closing tag. Tags like <br> (empty elements) should now be written as <br /> with a space between the tag and the forward slash and no space between the forward slash and the angle bracket. The space between the tag and the forward slash allows backward compatibility with older browsers. Tags with data such as the <p> tag can be closed by using the </p> tag. The img tag is considered as an empty tag and is closed as below:

<img src=”myimage.jpg” alt=”The author with the Pope” />

Five, Make sure all elements are properly nested.

That means the innermost tag should be closed first, followed by the one opened before it, and so on.

XML
<p> <b> This is wrong </p> </b>

It should be correctly written as:

XML
<p> <b> This is right </b> </p>

Six, Quote all attribute values

In XHTML, it is mandatory that all attribute values are listed within quotes. This means the following is wrong.

XML
<img src=myimage.jpg />

The correct way to do it is as below. Also, for every image on the screen (except for spacers and non-informative, decorative images), it is a good practice to have meaningful, interpretive text listed in the alt tag.

XML
<img src="myimage.jpg" alt="The author with the Pope" />

Seven, add the id attribute to elements that have the name attribute.

The name attribute is being deprecated and the id attribute is taking its place. However, for backward compatibility, it is best to leave in the name attribute and to add the id attribute. The id attribute should be added wherever name attributes are used, such as the a, applet, form, frame, iframe, img, and map tags. The syntax of the id attribute is similar to that of the name attribute and is written as id=”value”.

Eight, Validate

Now that you are done, how do you know that you got it all right? That’s where validation comes in – remember I said I would talk about it later? Now that you have an XHTML document, it is time to check that it really follows all the rules listed above. One way to do this is to go over the entire document and look at each and every line of code. Two things – a) This is boring and, b) It doesn’t guarantee anything.

So, the next best thing to do is to use a validator, such as the one provided by the W3C at http://validator.w3.org. You may upload a file from your local machine or provide the url to be validated.

Another easy way to do it is to save the file as an xml file – filename.xml and to open it in your browser. If it displays correctly, it is valid XHTML. If not, you will be able to tell immediately where the problem lies. There you go – its so simple, you have no excuse to put it off anymore.

Reference

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionmissing something? a solution? Pin
Derek Read6-Feb-04 7:38
Derek Read6-Feb-04 7:38 
AnswerRe: missing something? a solution? Pin
Subha Subramanian9-Feb-04 11:10
Subha Subramanian9-Feb-04 11:10 
AnswerRe: missing something? a solution? Pin
Maciek Niedzielski3-Mar-04 8:29
Maciek Niedzielski3-Mar-04 8:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.