HTML 4.01 to XHTML 1.1

Tech Ads

Back to Article List

Originally published December 2003 [ Publisher Link ]

HTML 4.01 has evolved into a new markup language dubbed XHTML, based on the XML standard developed by the W3C. If you have never used XML, don't fret; you only need to break a few bad habits to move from HTML to XHTML. If you want your Web pages to be compliant with future browsers, XHTML is the way to go. XHTML is provisioned to be the markup language for other user agents, including mobile phones, PDAs, pagers, and set-top boxes. XHTML could bulletproof your documents for various users and devices for years to come.And you may be able to use an application that helps in the conversion process, such as HTML Tidy or Altova's XMLSPY

Even if you don't plan on converting existing HTML documents to XHTML, it's well worth changing your markup habits so your documents are assured future compliance. XHTML markup is backward-compatible with current and older browsers, so you can start using it right away.

The three faces of XHTML 1.0

XHTML 1.0 version has three subsets:

XHTML 1.0 Transitional: As its name implies, this specification probably will be your first step from HTML to the XHTML world. The spec is intended to work with browsers that do not support Cascading Style Sheets. The restriction is intended for maximum backward compatibility on older browsers -- those circa 1999 and earlier. Nonetheless, this subset is the shortest and least painful way to XHTML.
XHTML 1.0 Strict: Compliance with this spec requires that the end user have a CSS-capable browser, which nowadays is usually true. This subset builds on the aforementioned transitional spec, so you gain right of passage going through that spec first. But migrating existing HTML documentation to this spec could be painful, as you will see in the following paragraphs.
XHTML 1.0 Frameset: XHTML Frameset is the same as XHTML Transitional but with support for designs that partition the browser window using the <frame> element. Once you go through XHTML Transitional, you can start building your documents to this spec.

Starting out with XHTML 1.0 Transitional

To begin moving from HTML to XHTML 1.0 Transitional, add an HTML DTD to the top of your document before your root <html> tag:

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

Next, you need to change several HTML elements and attributes to make them XHTML compliant.

No upper case XHTML is as case-sensitive XML.
Close every tag, in reverse order from where they were opened This is an easy habit to adopt since the majority of HTML tags already require you to close them properly. Only a handful of HTML tags, such as <p> and <li>, are commonly left unclosed. HTML elements that don't have any content, like <br>, or that just contain attributes in their structure, like <meta> tags, also have to be closed by placing a backslash at the end of each element.
Quote every attribute Besides having every attribute in lower case, you also need to make sure every attribute is enclosed within quotes, and this also includes the shortcut attributes primarily used in HTML forms; for example, <form method="post" action="process.jsp">. For attributes which commonly do not have a value assigned to them, like "selected" in form elements like <option>, you need to replicate the element name within quotes. For example, selected is declared as selected="selected", and this same procedure applies to attributes like nowrap, multiple, and checked, among others.
So long name, hello id The name attribute used to assign a value to an object for later referral is deprecated in XHTML. In its place the id attribute takes over. This change will probably have a minor effect on your current HTML coding practices since the name attribute was used only in the HTML 4.01 elements a, applet, frame, iframe, img, and map.

The W3C provides an XHTML validator tool to validate your XHTML documents.

Going the distance with XHTML 1.0 Strict

OK, so your document is now in XHTML Transitional, but you want to go the distance to XHTML Strict. For starters, change the DTD of your document to the following:

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

CSS, like it or not

If you have never used Cascading Style Sheets, now is a good time to start, because they are the cornerstone for making a document XHTML 1.0 Strict-compliant. CSS elements can be declared in two ways in an XHTML document, the same as they can in HTML.

Importing a whole style sheet to take effect on a document:

<html>
  <head>
   <link href="/css/mystyle.css" 
       rel="stylesheet" type="text/css" />

  </head>
<body>
 ...
</body>
</html>

Declaring all the style sheet elements in-line with the document:

<html>

  <head>
   <style type="text/css">
    <!--
       **** Your CSS elements here ****
    -->
   </style>
  </head>
<body>

 ...
</body>
</html>

These two declarations have the same effect on a document. In the latter case you place the style sheet declarations directly in the document, while in the former you centralize all your style sheet declarations in an external document which can be reused by other XHTML documents.

So long <font> The <font> element generally used when the bold, italic, or current letter size tags are not enough to get a point across an HTML section is deprecated in the XHTML Strict specification. Discarding <font> may be the toughest habit to adopt for an HTML warrior, as it allowed you to alter a section of content for color format, font type, or font size on the fly. With XHTML Strict, you need to define CSS class attributes to change these.

Invalid XHTML (Strict)

<p>
<font size="2">
    Please note that XHTML Strict is
       <font color="#FF0000"> 
                not for the faint of heart 
       </font>,
    only the brave

</font>
</p>

Valid XHTML (Strict) CSS

[*****
   Placed the Style Tags here 
   CSS can't be floating in HTML
   need to be enclosed in Style Tags  

   <style type="text/css">
    <!--
    .mynotes { font-size: 2pt }
    .red { color: #FF0000 }
    -->

   </style>
***** ]

<p class="mynotes">
     Please note that XHTML Strict is
       <span class="red"> not for the faint of heart </span>,
     only the brave
</p>

So long inline style attributes This XHTML rule is closely linked to the previous one, and prohibits any type of style to be specified in the attributes of an element directly. This includes all the typical formats specified in <table>, <body>, and <img>, among other elements.

These style attributes include align, bgcolor, width, and border, as well other values that allow you to alter the final display of an element. Instead, attributes are replaced by CSS class definitions.

Some HTML style attributes can be confusing when used in XHTML Strict. Border, for instance, is deprecated in the image tag but completely valid for a table tag. In general you should avoid placing any type of style attribute directly in a tag, but when in doubt you should consult XHTML Strict DTD.

All these illustrations barely scratch the full potential of CSS, so check other references to complete your style sheets for XHTML.

XHTML 1.1: The future

Now you've got through XHTML 1.0 Strict only to find out that XHTML 1.1 already exists. Quoting the specification by the W3C, "XHTML 1.1 represents a departure from both HTML 4 and XHTML 1.0," thus its full potential cannot be appreciated in any current browser or user agent. The closest thin today to a 100% XHTML 1.1 implementation is a W3C browser/editor called Amaya .

Although XHTML 1.1 is a departure from XHTML 1.0, it still builds on it, so changing your habits is still worth it if you want to stay up-to-date.