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 &.
-
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!
