XHTML Tutorial

Alakazam · #1 08-06-2007

XHTML or Extensible HyperText Markup Language is a combination of HTML and XML (eXtensible Markup Language). XHTML consists of all the tags in HTML 4.01 combined with the syntax of XML. HTML will not be developed any further. XHTML 1.0 is what you need to learn.

We have reached a point where many pages on the internet contain "bad" HTML. XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents. XML was designed to describe data and HTML was designed to display data.
By combining the strenghts of HTML and XML, 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.

XHTML 1.0 specifies three XML document types that correspond to three Document Type Definitions (DTD): Strict, Transitional, and Frameset, the most common being Transitional. The DTD should be placed at the first line of every document, above the <html> tag.

XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Used when the XHTML document is devoid of all formatting tags like and Cascading Style Sheets (CSS) are used for controlling all presentation aspects.

XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This XHTML DTD allows use of presentation tags in the document. This is a safer mode since most of our pages contain many presentation tags.

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

The most important differences between HTML and XHTML:

XHTML tags must be properly nested

XHTML documents must be well-formed

Tag names must be in lowercase

All XHTML tags must be closed

Tags Must Be Properly Nested

In HTML some tags can be improperly nested within each other like this:
This text is bold and italic

In XHTML all tags must be properly nested within each other like this:
This text is bold and italic

Documents Must Be Well-formed

All XHTML tags must be nested within the root tag. The basic document structure is:
<html>
<head>
</head>
<body>
</body>
</html>

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>
Example: Width="100" and WIDTH="100" are wrong; only width="100" is correct.

All XHTML Tags Must Be Closed

Non-empty tags 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 Tags Must also Be Closed

Empty XHTML tags should be ended with /> instead of >. The commonly used empty tags in XHTML are:
<meta />: for meta information (contained in the head section)
<param />: parameters for applets and objects.
<link />: to specify external stylesheets and other references.
<img />: to include images. Attributes 'src' for the source URI and 'alt' for alternate text are mandatory.
 : used for forced line break.
<hr />: for horizontal rules.
<area />: used inside image maps. Attribute 'alt' is mandatory.
<input />: used inside forms for input form elements like buttons, textboxes, textareas, checkboxes and radio buttons.
The space before the slash is important. If it is not there, the page may not work properly in older browsers.

Declare the Default Namespace

Do this by modifying the tag at the top of the document to read:
<HTML xmlns="http://www.w3.org/1999/xhtml">

Enclose Attribute Values in Single or Double Quotes

Example, border="0" or border='0', not border=0.

Remove All Redundant White Spaces from Tags

 is not allowed, whereas is correct.

XHTML Validation

Type your page's URL into the W3C's validator, click the validate button and wait for the results (it's pretty fast). If there are any error's, fix them and submit again, correcting errors each time until it passes validation.