Technologies

XHTML

XHTML
eXtensible HyperText Markup Language, or XHTML, is a markup language that has the same expressive possibilities as HTML, but has a stricter and cleaner syntax. Eventually it will replace HTML entirely, and all browsers offer full support, even older ones. XHTML 1.0 became a World Wide Web Consortium (W3C) recommendation on January 26, 2000.

The need for a more strict version of HTML was felt primarily because the World Wide Web Consortium content now needs to be delivered to many devices such as mobile devices, not only from conventional computer machines, where extra resources cannot be devoted to support the additional complexity of HTML syntax.

XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML.

But why XHTML? as website design became complicated, we reached a point where many pages on the WWW contain "bad" HTML.

For exmaple, the following HTML code will display fine in browser, even if it has invalid HTML, that is, it dows not follow the HTML rules:

<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>

(Note that <h1> tag has no closing tag </h1>, and yet it si displayed correctly in a browser)

To help you better understand XHTML, let us introduce XML (Extensible Markup Language). XML is also a markup language where everything has to be marked up correctly, which results in "well-formed" documents, unlike HTML which works fine even it has "bad tags."

Basically, here is the difference of XML with HTML. XML was designed to describe data and HTML was designed to display data.

And so what?

Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language.

Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.

XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible!

How To Get Ready For XHTML
XHTML is the next generation of HTML, but it will of course take some time before browsers and other software products are ready for it.

First thing you can do right now is to write your HTML code in lowercase letters, and NEVER make the bad habit of skipping end tags like the .

Elements Must Be Properly Nested
In HTML some elements can be improperly nested (the "first in - last out" principle) within each other like this:

This text is bold and italic

In XHTML all elements must be properly nested within each other like this:

This text is bold and italic

Note: A common mistake in nested lists, is to forget that the inside list must be within a li element, like this:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>

This is correct:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.

Documents Must Be Well-formed
All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:

Tag Names Must Be In Lower Case
This is because XHTML documents are XML applications. XML is case-sensitive. Tags like and are interpreted as different tags.

This is wrong:

<BODY>
This is a paragraph
</BODY>

This is correct:

<body>
This is a paragraph
</body>

All XHTML Elements Must Be Closed
Non-empty elements must have an end tag.

This is wrong:

This is a paragraph
This is another paragraph

This is correct:

This is a paragraph
This is another paragraph

Empty Elements Must Also Be Closed
Empty elements must either have an end tag or the start tag must end with />.

This is wrong:

This is a break 
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">

This is correct:

This is a break 
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />

IMPORTANT Compatibility Note:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: , and this: <hr />.