Since the inception of the world wide web, HTML has been the get all and be all. But, as a webmaster and as a person who has been in this industry since the .com bubble burst, HTML has been slowly losing luster. A probable reason for this phenomena would be “Browsers”. If you had to anything with HTML, a good three to four years back, you must have come across the rendering problems between IE5.x and Netscape 4.x, for e.g. some tags would be rendered perfect in IE since Microsoft came up with such tags, these would render in a very different way or style or not render at all in Netscape4.x!

Well, this still happens today, you might add. But if you are one of the types who does more than say, then you would want to support the W3C and its first recommendation for XHTML. Enter XHTML 1.0

XHTML, what is?

XHTML, is an extension of HTML 4.01 or more so inculcation of it into XML. XHTML combines the sheer power of XML and strength of HTML into one. XHTML is the first such change in HTML standards, since the release of HTML 4.0 in the year 1997. XHTML was released as an industry standard by W3C, keeping in mind the many and ever increasing web browser platforms that exist as mobile devices, pdas, laptops, pcs, etc; and it was released with a single sight, to make web pages more richer, more interactive, more phun!

Where to XHTML?

If you are a newbie in the webmaster world or have limited knowledge of HTML and would like to stray into XHTML and keep yourself updated, read on.

To start, HTML and XHTML have very limited differences. With XHTML being the same as HTML, but only as a Stricter bigger brother, where usage and standards are concerned.

XML or eXtensible Markup Language, is not a markup language like HTML, it is more so a language that defines standards that are to be followed by such Markup Languages like HTML. This is achieved by using something that is known as a DTD or Document Type Definition.  So, yes, when you conclude that HTML would have a DTD associated with it, you are righto! So does XHTML. But, in case of XHTML, there are not one, but three DTDs and you can use any one, depending on how you would want your HTML to be rendered!

The 3 DTDs that make the XHTML sphere

1. Frameset: Frameset DTD for XHTML, is one that is a little lax, and would allow use of all deprecated tags, like the <FONT> tag, etc. and replaces the document body with a frameset body.
2. Transitional: Transitional DTD is the same as Frameset, but for a document body.
3. Strict: Strict DTD, as the name suggests, is the stricter of the three. It does not allow use of deprecated tags.

Assuming that you are a newbie to XHTML, you would want to start with the Transitional DTD, as it is far more forgiving and would allow use of deprecated tags that you might have a habit of using often.

So, whats the difference?

HTML 4.0, is considered to be the most forgiving markup for the internet, with small mistakes, like not closing container nested tags, forgetting to close table tags, etc, would still render the page one would expect it to be rendered. Come, XHTML this is now NOT tolerated.

The new standard or DTD specification provided by the W3C, requires that your XHTML code or tags, be “well formed”. Just a heads up, a well formed HTML page goes a long way where SEO is concerned too.

Step 1: Clean the Code

First step to make the transition from HTML to XHTML is to clean up your code. As stated above paragraphs, the below mentioned example would not work where XHTML is used.

<b><p>Something lives…</b></p>  - This is OK, Notice how the tags are closed, where HTML is concerned, but certainly NOT allowed where XHTML is concerned would definitely fail the W3C’s validation service.

So, you would have to correct the above code, as stated below

<b><p>Something lives</p></b>

Step 2: Case of XHTML

Contrary to the belief, HTML tags could be used in both Upper Case and Lower Case or a combination of both. This would not hinder anything.  In case of XHTML this is a big no-no and standards only allow for all lower case tags and attributes. Have a look at the example below

<A Href=”1.html”>1</a> - This, again would be OK in HTML, but surely will be dealt with, by the W3C XHTML validation service.

A quick fix to the above would be,

<a href=”1.html”>1</a>

Step 3: Ending or Closing Tags. All Tags.

More often than not, HTML coders, webmasters, leave out some tags open. These tags, as a habit are not closed. This was fine during the reign of HTML. But certainly wont work with XHTML.

You will have to close all tags, this includes the <br>, <li>, <p>, <th> and other tags, that were taken for granted before.

Step 4: XHTML attribute values and quotes

Every single attribute used within HTML tags, while adhering to XHTML standards, would require to be enclosed in double quotes - “double quotations”. This also is true for attributes that have no value, for e.g.

<input type=”text” readonly />

In the above mentioned example, the stand alone attribute ‘readonly’ would be used as shown below, where XHTML is concerned.

<input type=”text” readonly=”readonly” />

Step 5: Special care for Special Characters

Where, XHTML comes in, so does a bit of security. Most injection based attacks can be simply put a full stop on, by adhering to this step. But then again, as a webmaster, I personally feel it is a crack in the behind where this step is concerned.

Special characters appearing in text would have to be replaced by their HTML counter parts. For e.g. you would not be directly allowed to write - & - within text content, and would have to replace it with &amp;(its HTML equivalent)

Step 6: Use the id attribute instead of the name attribute in tags.

Simple enough, this one. Replace the  name attributes within your tags with id attributes. You can use both, thought.

So… XHTML?

Alright, finally we are finished with some of the main dos and donts. Lets look at a live XHTML page and dissect it briefly, to get you guys up and running with XHTML in no time!

1:<?xml version="1.0" encoding="UTF-8"?>
2:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3:"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 5:lang="en">
6:<head>
7:<title>Got XHTML?</title>
8:</head>
9:<body>
10:<hr />
11:<p>After reading the above dos and donts, just remember that you 12:will be fine as long as you follow them<br /> I hope this article has 13:been some help if not more and only consider this as quick start 14:guide!</p>
15:<hr />
16:</body>
17:</html>

Line 1: This line actually informs the browser that we will be using XHTML instead HTML to render our webpage with UTF-8 character coding.
Line 2 to 5: informs the browser about our choice of the DTD, out of three available we are using Transitional DTD for the above document.

Rest of the lines, if you see they are clean and every tag is closed and every attribute has a value associated with it. And rest they say is history!

XHTML Conclusion

So now that you are familiar with XHTML and know that is not that different from HTML, I think you are ready to start with your own page building. Do write in and let us know how this article was!

XHTML Resources

XHTML School@ http://www.w3schools.com/xhtml/default.asp
Overview of XHTML@ http://hotwired.lycos.com/webmonkey/00/50/index2a.html?tw=authoring
XHTML Blueprint@ http://www.webreview.com/2001/03_02/designers/index01.shtml
W3Cs Validation Service@ http://validator.w3.org/
W3C HTML info@ http://www.w3.org/html/wg/
W3C XHTML info@ http://www.w3.org/TR/xhtml1/

XHTML Update

Readers would be interested to know that, W3C has already chartered the XHTML2 Working Group, that would set standards for XHTML2. You can read more @ http://www.w3.org/MarkUp/