Main Menu

XHTML
CSS Basics
CSS Properties
CSS Layouts
Finally
XHTML Articles
CSS Articles

XHTML


What is XHTML?
XHTML stands for EXtensible HyperText Markup Language. It is a reformulation of HTML in terms of XML, with stricter rules designed to make the web pages interoperable with different browsers.

A brief history of XHTML.

All of us have heard of and used HTML. It is the language of the web, the language web pages are written in.
When the web was in its infancy, HTML was a great language. It was easy to learn and use. The tags were limited in number. However as HTML grew in popularity a number of tags were added to control how the web pages looked. The <font> tag was introduced to change fonts. The bgcolor attribute was added.
This increasing number of tags added on the overhead of browsers. Different browsers displayed the pages differently.
An unrelated problem with HTML was that browsers were very forgiving of sloppy coding. So, to the browsers <b><i>some text</b></i> was same as <b><i>some text</i></b>. If the designer missed some closing tags even then the page was displayed correctly.
This might seem a very useful feature, but this meant a lot of work for the browsers. As the web got more pervasive, browsers came with smaller computing platforms such as mobiles. HTML had to be simplified for these browsers.
W3C, the standards body bought a new recommendation for HTML called XHTML.

How XHTML is different from HTML?
XHTML is extended hyper text markup language. It is a reformulation of HTML with stricter rules so that a XHTML document is valid XML as well. If you have previous knowledge of HTML, most of XTML is known to you. The places where XHTML differs are,

  1. Every element and attribute must be written in lower case.
  2. Each element must be closed.
  3. Elements must be nested in correct order.
  4. All attributes must have a value and all values must be in quotes.
  5. The <html> tag must be root of all tags.
  6. The document must contain a document type declaration.

In case you are wondering, element is other name for a tag.
Let us look at what each of these differences mean.

 

Every element and attribute must be written in lower case.
In HTML the tags can be written in either uppercase of in lower case. But a XHTML document must have all the tags and attributes written in lowercase. So while <H1> is a correct tag for HTML, it is wrong for XHTML.

Each element must be closed.
Many HTML browsers allowed the closing tags to be omitted. When a new <p> tag or <li> tag started the previous one was assumed to be closed. As a result the following code is valid HTML.
<ul>
<li> one
<li> two
<li> three
</ul>

To make it XHTML compliant we need to modify it as
<ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
</ul>
Some elements like <br>, <hr>, <img> do not need a closing tag. These tags need to explicitly tell that no closing tags are needed by adding a / to the end of the tag. So correct XHTML tags are <br />, <hr /> and <img />

Elements must be nested in correct order.
If one element start within any other element, it must end within that element. So <b><i>some text</b></i> is incorrect XHTML as <i> must be closed before <b>.

All attributes must have a value and all values must be in quotes.
HTML allowed attribute minimization. So you could skip the attribute values in specific cases. To create a check box, which was checked you could have used,
<input type=”checkbox” checked />. Since the checked attribute does not have a value, this must be modified to be valid XHTML.
The correct XHTML tag will be,
<input type=”checkbox” checked=”checked” />
All attribute values must be inside quotes.

The <html> tag must be root of all tags.
The <html> tag must be root of all other tags in the document.

The document must contain a document type declaration.
W3C defined three types of XHTML documents, xhtml-strict follows all the rules of XHTML and has no tags which were removed from HTML. Xhtml-transistional was designed to be compatible with HTML and tags which are illegal in HTML such as the <applet> can be used. Xhtml-frameset is XHTML recommendation designed to be used with frames. At the top of each document a DTD declaration must specify the type of document. If the document is xhtml-strict the dtd is
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Advantages of XHTML.

  1. XHTML has stricter rules and structure which makes the pages interoperable with different browsers.
  2. XML tools can be used with XHTML pages.
  3. It enables easier programmatic access, to data.

Validating XHTML pages.
Once you create XHTML pages, it is important to validate them so that they are compliant with XHTML recommendations. An online validator can be found at http://validator.w3.org/ which allows validating web pages.

Summary.
You learnt about creating XHTML pages, the difference between XHTML and HTML and the advantages you get from converting to XHTML.