I’m assuming that you’re reading this tutorial because you’ve either seen my Validating Your HTML 4.01 WebPage tutorial and want to know more, or are curious about the differences between HTML and XHTML.
XHTML is a combination XML and HTML. Designed to be as easy to write as HTML but with the strictness of XML. That is, all tags must be closed, tags must be properly nested, tag attributes/names must be in lowercase and XHTML documents must be structured correctly. Like HTML4, there are 3 doctypes: Strict, Transitional and Frameset and the same logic applies (Frameset for pages with frames, Transitional for old pages transitioning to XHTML that need suport for older/presentational tags, and Strict … which does what it says on the tin.)
What about elements that don’t have closing tags?
This is where we employ the help of the handy forward slash. Anything which doesn’t have a ready-made closing tag needs a space (for cross-browser compliancy) and a forward slash placed before the closing >. <img>, <br> and <hr> are a few examples of tags which need to be closed with the ‘new’ technique.
<img>becomes<img /><br>becomes<br /><hr>becomes<hr />- ..and so on.
What’s this about nesting? Nesting is for birds!
Properly nesting a tag is simply the process of opening and closing tags in the right order. To nest tags, you must simply close tags in the opposite order in which they are opened — like symmetry. For example: <a href="index.html"><strong> text </strong></a>
Lowercase? Why lowercase?
Ahh — this is because XML is case-sensitive. XHTML is based on XML and similar standards are followed. All tags and attributes need to be lowercase. <a HREF="link.html"> is just as incorrect as <A HREF="link.html"> and <A href="link.html">. This is correct: <a href="link.html">
And correct structure?
All tags (with the exception of the doctype) must be inside the root <html> </html> element and <head> </head> must come before <body> </body> and so on. Example:
<html>
<head> </head>
<body> </body>
</html>
Phew! All that fuss. That’s it now?
Nope — there are certain other important parts to the XHTML specification. For example, all images must have an alt attribute. If the image is a purely decorative one, you can specify a blank alt (alt=""), otherwise it must contain a short description of the image (longer descriptions can be specified with longdesc="").
Unlike with HTML, all attributes within a tag must be quoted (<a href="link.html"> and not <a href=link.html>). Also, attribute minimilisation is not allowed — things like <frame noresize> must be changed to <frame noresize="noresize" />. Full list:
| HTML | XHTML |
|---|---|
| compact | compact=”compact” |
| checked | checked=”checked” |
| declare | declare=”declare” |
| readonly | readonly=”readonly” |
| disabled | disabled=”disabled” |
| selected | selected=”selected” |
| defer | defer=”defer” |
| ismap | ismap=”ismap” |
| nohref | nohref=”nohref” |
| noshade | noshade=”noshade” |
| nowrap | nowrap=”nowrap” |
| multiple | multiple=”multiple” |
| noresize | noresize=”noresize” |
Another important thing about XHTML coding is that id="" now replaces name="". However for compliancy across older browsers it is advisable to use both id="" and name="" together.
Finally, as with HTML4, some tags should just be avoided altogether:
<applet><basefont><center><dir><font><isindex><menu><s><strike><u><xmp>(use<pre>instead)
Once all of this is in place, you can pick your doctype:
- XHTML Strict (recommended):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - XHTML Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Final note: Although a page will validate without it (because the validator will add it for you), it is recommended that you put the xmlns attribute (xmlns="http://www.w3.org/1999/xhtml") in the <html> element of an XHTML document.