HTML to XHTML in 8 Steps

HTML to XHTML in 10 Steps

There is very little difference in HTML and XHTML so if you are familiar with HTML then making the change to XHTML is very easy. There are a few syntax rules that you should obey and your documents should then have no problem being validated as XHTML.

They are:

Add a Doctype Declaration
The Document Root Element Must be HTML
Designate the XHTML 1.0 namespace.
All Tags and Attribute Names are Lowercase.
Every tag Needs an End Tag
Elements Must be Properly Nested
Add the "id" Attribute to Elements that have the Name Attribute
Attribute Minimization
Encode ampersands.
Specify Alt Image

Add a Doctype Declaration

The Doctype tag provides information ( Usually to html validator programs) about the HTML/XHTML on the web page and is optional in html but is mandatory for xhtml (xhtml). The Doctype is used by validation programs when checking your html for valid code (see validating web pages) and by browsers to render web pages.

The doctype should be the very first line of your document and comes even before the HTML Tag. It should be the only thing on that line and is case sensitive.

There are three versions of XHTML and each one has an associated DTD (Document Type Definition)

XHTML 1.0 Strict: Is the same as HTML 4.01 Strict, but follows XML syntax rules.
XHTML 1.0 Transitional: Allows some common deprecated elements and attributes not found in XHTML 1.0 Strict to be used, such as <center>, <u>, <strike>, and <applet>.
XHTML 1.0 Frameset: Allows the use of HTML framesets.

The Doctype declaration for each is:

XHTML 1.0 Strict

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

XHTML 1.0 Transitional

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

XHTML 1.0 Frameset

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

The Document Root Element Must be HTML

Immediately following the DTD, state the document root element as HTML. This is combined with the designation of the namespace.

Designate the XHTML 1.0 namespace

The root element (opening html tag) of the document must designate the XHTML 1.0 namespace.
The html tag should loook like:

All Tags and Attribute Names are Lowercase

In HTML <html> and <HTML> where identical in XHTML they are different. In XHTML then <html> is correct and <HTML> is incorrect

Every tag Needs an End Tag

In HTML a line break was simply <BR> and didn't need a closing </BR> tag. in XHTML every tag needs a closing tag. See below:

<p> This is an incorrect document as the paragraph is not closed.

<p> before beginning another one.

It also doesn't have an end tag for line breaks<br>

<p> This is an correct document as the paragraph is closed.</p>

<p> before beginning another one.</p>

It does have an end tag for line breaks <br></br>

Tags like the break tag which are empty tags as nothing goes between the start tag and end tag are usually more often written as: <br/> as a shortcut to <br></br>

Elements Must be Properly Nested

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

In the example above the paragraph tag is closed before the bold tag.

<p><b>This is correct</b></p>

Attribute Values Must Always be Quoted

<td rowspan="2"> is correct whereas <td rowspan=2> isn't.

Add the "id" Attribute to Elements that have the Name Attribute

Tags such as the a, applet, form, frame, iframe, img, and map tags can also have a name attribute. e.g.

<h1><a name="intro">Introduction</a></h1>

The name attribute is being depreciated and is being replace by the id attribute. In XHTML this becomes:

<h1><a id="intro">Introduction</a></h1>

The syntax of the id attribute is similar to that of the name attribute and is written as id=”value” . However, for backward compatibility, it is best to use both attributes by adding the id attribute.

So normally we will use this form:

<h1><a name="intro" id="intro">Introduction</a></h1>

Attribute Minimization

Attribute values must be written in full thus:

<dl compact="compact"> is correct and

<dl compact> is incorrect

Encode Ampersands

It is common to see ampersands as part of urls as shown in yellow highlight below

add.my.yahoo.com/content?.intl=us&url=http://www.build-your-website.co.uk/

Although not correct in HTML it was generally ignored. In XHTML the amperstand must be encoded and would appear as & and not & . The example url above would be:

add.my.yahoo.com/content?.intl=us&url=http://www.build-your-website.co.uk/

Specify Alt Image

Required in HTML but largely ignored every image should have an alt attribute. This is valid:

This is invalid:

XHTML Example

In the example below I have highlighted a section in yellow this is necessary to add if you are going to validate the page.

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

<head>

<title>This is XHTML</title>

</head>

<body>

<h1><a id="intro">Introduction</a> This is correct XHTML</h1>

<hr />

<p id="start"> XHTML looks like HTML but has stricter syntax. <b>Moving from HTML to XHTML is easy</b></p>

</body>

</html>

This is the same but incorrect. I have highlighted the errors can you see what they are?

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

<head>

<title>This is XHTML</title>

</head>

<Body>

<h1><a name="intro">Introduction</a> This is correct XHTML</h1>

<hr >

<p id=start> XHTML looks like HTML but has stricter syntax. <b>Moving from HTML to XHTML is easy</p></b>

</body>

</html>

References and resources:

Main menu

Website Resources

Subscribe To the Blog!