Making Web Pages XHTML Compliant

Best Practice:

As the Web moves away from HTML and toward XML, Department of Commerce Web developers should consider how to respond to this changing environment. XHTML, being XML that works like HTML, is an important step to consider and thus the reason for this Best Practice.

Purpose:

  • Unlike HTML, XHTML works as expected in most internet devices such as palm pilots, Web phones, and screen readers. Its behavior is more predictable than HTML and it conforms to logical mark up rules thereby avoiding errors that make other pages fail in some browsers.
  • XHTML eliminates the need to make multiple versions of a Web site so that it will be viewed the same in different browsers.
  • XHTML helps avoid accessibility problems
  • XHTML is also the current recommended mark up language, replacing HTML 4
  • It is easy to learn and use because it follows simple rules

Discussion:

XHTML is the reformulation of HTML as an XML application. It has the same tags as HTML but follows the XML grammar (structure). It combines the benefits of both HTML and XML.

Is there more than one type of XHTML?

No, but there are three different document types (DOCTYPE) within XHTML. There is the "Strict" DocType that adheres "strictly" to XHTML specifications. There is "Transitional" XHTML that combines elements of HTML 4.01 and XHTML. Then there is "Frameset" XHTML that combines transitional XHTML with frame capabilities. We recommend you use the Transitional XHTML document type.

What are the simple rules a Web developer needs to follow in order to make a page XHTML compliant?

A. Open the document with the proper DOCTYPE and NAMESPACE.

XHTML documents must begin with tags that tell the browser how to interpret them. As mentioned earlier there are three XHTML DOCTYPES (Strict, Transitional, and Frameset). The one closest to HTML is the Transitional and this is the one we recommend using. The code for this is shown below and may be typed or cut and pasted directly into your Web document.

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

The XHTML 1.0 Transitional DOCTYPE must be followed by the NAMESPACE declaration. Namespace is a collection of specific elements and attributes used for a specific application. The code for this is shown below and may be typed or cut and pasted directly into your Web document.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

If it is helpful to you, here is the code for both the DOCTYPE and NAMESPACE combined that you can use in your XHTML documents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Using the appropriate DOCTYPE tells the viewer's browser how to parse the page. If you don't include it, the browser will attempt to display the page in a backward-compatible fashion. If you want to check the XHTML compliance of your pages you can use the W3C mark up validator [http://validator.w3.org/]

B. Make sure all tags are in lowercase type.

Unlike HTML and just like XML, XHTML is case sensitive. This applies to all tags incuding the code in JavaScripts (e.g., onMouseOver becomes onmouseover).

C. Make sure you quote all attribute values within the document.

For example

<img src="Images/NecTeci3TN.jpg" alt="Slide 3: Why TECI?" width="200" height="136" border="1">

is correctly coded while

<img src=Images/NecTeci3TN.jpg alt=Slide 3: Why TECI? width=200 height= 136 border= 1 >

is not.

D. Make sure you close all tags.

In HTML many tags do not require closing tags in order for the page to display correctly. Examples of this are the use of the paragraph tag <P> and the <Li> tag. In XHTML all open tags must have a closing tag. So <p> This paragraph is not compliant, becomes <p> This paragraph is compliant </p> when a closing tag is added!

E. Make sure all "empty tags are also closed.

There are a number of tags used in HTML that do not have closing tags. The line break <BR> and horizontal rule<hr> tags are just two examples. In order to make them XHTML compliant you can use <br /> and <hr />. Another example are image tags <img src="DOC_Web_Image.jpg" alt="image of the main department of Commerce building" />.

How do I know if my page is XHTML Compliant?

If you follow the five basic rules shown above your Web pages should be XHTML compliant. However, it is always a good practice to check them. You can used the W3C validator [http://validator.w3.org/] by simply putting in the URL of the page you want checked. It will verify whether the page you constructed is XHTML compliant.

Are there other issues?

Some XHTML pages and reference sources will tell you to use the optional prologue <?xml> before the DOCTYPE. Use of the XML prologue declaration <?xml> should not be included in XHTML 1.0 TRANSITIONAL or FRAMESET documents as it can cause problems with page display in many browsers. This prologue should only be used if you are using the "STRICT" doctype (XHTML 1.0 STRICT).

Department of Commerce Web Advisory Council (WAC)
U.S. Department of Commerce

Send questions and comments about this page to WAC@doc.gov
Page last updated October 12, 2010