www.htmlgoodies.com/beyond/xml/article.php/3473511

Back to Article

XHTML Syntax
By Vince Barnes
January 4, 2005

If you're already familiar with HTML
and would like to write XHTML,
then this is for you!

 

Sometimes I think it's harder to change from one learned system to another that is similar, but has it's differences, than it is to learn a new one from scratch.  That's because habits have formed.  "You can't teach an old dog new tricks" says the saying.  Web programmers, on the other hand, have to learn new tricks all the time because the web is an ever changing, rapidly evolving  place.

Our fundamental language, HTML, is a perfect example.  We have watched in evolve through four version releases into HTML 4.0 and now it is evolving into XHTML, the eXtensible HyperText Markup Language.  XHTML introduces new levels of power and flexibility to web pages, but does so at the expense of the forgiving nature of HTML syntax.  XHTML brings the rigorous nature of XML coding into web page coding, so for those familiar with HTML, here is a quick overview of the most obvious differences in syntax.

Document Type Definition.

Your XHTML documents will begin with XML and XHTML DTD statements like these:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

There are variations on these, but that's a subject for a more in depth look at XHTML.

CaSe Matters

While HTML allowed tags to be written in either upper or lower case (for example <BR> or <br>) XHTML only allows lower case tags.  Attribute values can, of course, be either upper or lower case, so that:

<font color="ffaacc"> ... </font>      and
<font color="FFAACC"> ... </font>

are both acceptable.
 


Closed Tags

HTML allows the omission of certain end, or closing, tags (for example <p> without a </p>) where XHTML requires all tags to be closed (<p> ..... </p>).  Tags that do not have closing tags, such as <br> and <hr> must contain a closing slash thus: <br />  <hr />  and <img src"......  " />


Tags must maintain Nesting Level

In HTML <b><i> ... </b></i> would be acceptable, whereas it is not in XHTML.   XHTML requires nesting levels to be maintained, thus:

<b><i> ... </i></b>
 

Tag Attributes must be in Quotes

The quotes are mandatory in XHTML, as in the earlier examples:

<font color="ffaacc"> ... </font>      and
<font color="FFAACC"> ... </font>


Attributes may not be minimized

HTML allows certain attribute to be minimized, such as:

<input type="checkbox" checked>

The word "checked" in this example is actually a minimized attribute.  XHTML requires attributes to be denoted in full, thus:

<input type="checkbox" checked="checked" />
 

Mandatory Head and Body tags

The <head> ..... </head>  and <body> .... </body> tags are mandatory.


Comments are CDATA

Instead of <!--  this is a comment --> comments are formatted like this:

<[CDATA[this is a comment]]>

 

Miscellaneous

Other notable rules include:

  • The <pre> tag cannot contain: img, object, big, small, sub, or sup.

  • You may not have any forms inside of other forms.

  • If your code contains a &, it must be written as &amp.

  • Any use of CSS should use all lower case lettering.

  • JavaScript should be done through external JavaScripting.

 

This overview should help you to recognize XHTML code when you see it.  In order to become an effective XHTML coder, however, you will need to study further!  Keep your eyes on HTML Goodies -- we've got more XHMTL coming!