Menu
XHTML Basics

Most webpage coders are familiar with HTML (HyperText Markup Language), but when they see the term XHTML many of them say "what the heck is XHTML". Well, you may have noticed that HTML and XHTML (Extensible HyperText Markup Language) look very similar. They both use tags that are delimited with < and > characters.

But HTML was designed long before XHTML and therefore is less rigorous. In other words, HTML does not require the coder to follow strict rules, while if you don't strictly follow the rules while coding XHTML, it just plain won't work. XHTML is an attempt to make HTML as rigorous as XML. In fact an XHTML webpage IS an XML document.

Here are the rules your code must follow to become XHTML:

Tag Names Must be in Lower Case

Okay, first grade is over for the Internet. Stop using capital letters in your code. With XHTML (or should I say xhtml) all tag names need to be in lower case. This is wrong:

<UL>
<LI>Use lower case
<LI>Use the id attribute
<LI>Properly nest tags
<LI>Close all tags
</UL>

Instead do it this way:

<ul>
<li>Use lower case</li>
<li>Use the id attribute</li>
<li>Properly nest tags</li>
<li>Close all tags</li>
</ul>

Attribute Names Must be in Lower Case

Again, first grade is over. Stop using capital letters in your code. With XHTML all attribute names need to be in lower case. This is wrong:

<table WIDTH="400" BGCOLOR="blue"><tr>
<td>Use lower case</td>
<td>Use the id attribute</td>
<td>Properly nest tags</td>
<td>Close all tags</td>
</tr></table>

Instead do it this way:

<table width="400" bgcolor="blue"><tr>
<td>Use lower case</td>
<td>Use the id attribute</td>
<td>Properly nest tags</td>
<td>Close all tags</td>
</tr></table>

Attribute Values Must be in Quotes

With XHTML all attribute values must be in quotes. This is wrong:

<table width=400 bgcolor=blue><tr>
<td>Use lower case</td>
<td>Use the id attribute</td>
<td>Properly nest tags</td>
<td>Close all tags</td>
</tr></table>

Instead do it this way:

<table width="400" bgcolor="blue"><tr>
<td>Use lower case</td>
<td>Use the id attribute</td>
<td>Properly nest tags</td>
<td>Close all tags</td>
</tr></table>

Attribute Shorthand is Not Allowed

In HTML, some attributes need only to be named, as shown below.

<select multiple>
<option selected>Use lower case</option>
<option>Use the id attribute</option>
<option>Properly nest tags</option>
<option>Close all tags</option>
</select>

With XHTML you must use name=value pairs. as shown below.

<select multiple="multiple">
<option selected="selected">Use lower case</option>
<option>Use the id attribute</option>
<option>Properly nest tags</option>
<option>Close all tags</option>
</select>

Use the id attribute instead of the name attribute

In XHTML the name attribute is deprecated. Deprecated means don't count on it to work future versions. It has been replaced with the id attribute. Instead of the following code:

<div name="div1">XHTML is more strict than HTML</div>

You should use:

<div id="div1">XHTML is more strict than HTML</div>

XHTML has one thing in common with HTML in that if it can't identify an attribute, it just ignores it. Therefore, to remain compatible with older browsers you can use both the name and the id attribute, with identical values, like this:

<div id="div1" name="div1">XHTML is more
strict than HTML</div>

Tags Must Be Properly Nested

HTML does not require the coder to follow strict rules. Examine the placement of tags in the line of code shown below:

<div><p>Here is some <b><i>bold and
italic text</b></i></div></p>

An XHTML coder would be surprised that this line of code actually works. Examine the placement of opening and closing tags in the line of code shown below. Tags are closed in the opposite order in which they were opened. The placement of the tags is symmetrical. This proper nesting of tags is a requirement of XHTML.

<div><p>Here is some <b><i>bold and
italic text</i></b></p></div>

All Tags Must Be Closed

HTML does not require the coder to follow strict rules. I find code like that shown below all over the Internet.

<p>This is paragraph one
<p>This is paragraph two

In XHTML, tags are required to be closed, as shown below.

<p>This is paragraph one</p>
<p>This is paragraph two</p>

That includes single tag elements like the ones shown below.

<br> (line break)
<hr> (horizontal rule)
<img src="filename.gif" alt="Image tag"> (image tag)

How do you close a single tag element? You do it as shown below.

<br />
<hr />
<img src="filename.gif" alt="Image tag" />

Note: I have seen code where the space before the closing slash is missing. It may still work without the space, but it's considered bad coding practice.

The Web Page Must Have Proper Structure

In order to have proper structure, all XHTML elements must be nested within the <html> root element. Elements within the root element can have child elements, and these child elements themselves can have child elements. Child elements must be correctly nested within their parent elements.

The bottom line is that XHTML IS XML, and XML requires a well-formed document. Shown below is an example of a well-formed document.

<html>
<head><title>A Well-formed Web Page</title></head>
<body>
<h1>This is a Well-formed Document</h1>
<p>In a <i>well-formed</i> document,
all elements are correctly nested within their parent
elements, and all tags are closed.</p>
</body>
</html>

The Web Page Must Have a DOCTYPE Declaration

A DOCTYPE declaration defines the structure of the document. In this case you don't actually code a complex DOCTYPE declaration. With a Web page, the DOCTYPE declaration actually specifies a link to an official W3C DOCTYPE declaration.

The Web browser uses the DOCTYPE declaration to determine the level of markup of your Web page. Without a DOCTYPE declaration the Web browser assumes that your Web page is old HTML and it may not properly render the latest XHTML or CSS elements correctly.

The Web browser does not actually reference the official W3C DOCTYPE declaration, that would be a waste of time. It has the requirements of each document type built-in to its programming.

At this time there are three different Document Types: Strict, Transitional, and Frameset.

XHTML 1.0 Strict:

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

Use the Strict DOCTYPE declaration only when you have perfect XHTML code. That requires following all the rules set forth in this article.

XHTML 1.0 Transitional:

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

Use the Transitional DOCTYPE declaration when you have good XHTML code. Use this document type when you want to use the features of the latest XHTML or CSS specification, but you may not have converted all your code to perfect XHTML yet. If you are pasting code provided by an ad networks into your Web page, don't count on them using perfect XHTML code, use the Transitional DOCTYPE declaration.

XHTML 1.0 Frameset:

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

It seems that nobody likes frames, not even the W3C. So when they created the Strict and Transitional document types, they left out frames. Use the Frameset document type when you want to use frames.

The DOCTYPE declaration should always be the first line in an XHTML Web page document. The DOCTYPE declaration itself is not an XHTML element, so it should not have a closing tag.

Validate Your XHTML

The W3C (World Wide Web Consortium) provides a free Validator that you can use to check your Web page code. There are three ways to use the validator: You can type or paste your code into a text box; upload a document from your computer; or enter the URI of a Web page currently on the Internet.

The validator will test your code against its DOCTYPE declaration and inform you of any errors. It's a good idea to start using XHTML and validating it, because at some point in the future, Web browsers may stop supporting the old HTML. I wish you luck, but for a Web site like this one, started in 2000, hosting 5000 pages, and using lots of code provided by an ad networks, its pretty much hopeless.


Learn more at amazon.com

More HTML Code:
• Using col and colgroup to Apply Attributes to a Table Column
• When to Use the nofollow Attribute value
• Keywords Meta Tag Generator
• The HTML BODY tag
• Easiest HTML Calculator Eample Code
• Web Page Template
• HTML Linking Basics
• HTML dfn Tag
• The Heading Tags
• HTML title Tag