XHTML
The Basics
A brief history of
HTML
• SGML (Standard Generalized Markup Language)
• Then came HTML
• Followed by the browser…and the great browser
wars
– IE
– Netscape
– Opera
– Mozilla
– Still others have come and gone
Abandoning the
old ways
• Much of the web is not designed with compatibility
in mind
• Web pages don’t work the same way in every
browser
– This is usually a result of designers and
developers merging style and content in their
documents.
– Not adhering to standards makes content totally
inaccessible in some browsers
Adopting the
new ways
• W3C standards enhance accessibility and promise long-
term durability (forward web design).
• The rules take minutes to learn and the benefits are vast.
• Tools are available to help.
• Free online validators help ensure that your XHTML and
CSS are error free.
• One of the main goals of XHTML is to get your documents
to the point where they are XML compliant.
• XHTML will help your sites work better in more browsers
and devices, reaching more people.
The Rules and
Guidelines
• Open with proper Doctype.
• All tags must be lower case.
• All attributes must be in quotes.
• All tags must be closed.
• All empty tags must be closed.
Open with proper Doctype
XHTML documents must begin with tags that tell
the browser how to interpret them.
This declaration should be placed at the very top of
every XHTML document.
You will also find this tag
beneficial
All tags must be lowercase
Unlike HTML, all XHTML must be typed in
lowercase, or your document will not validate.
These will not validate as XHTML:
Class Presentation
body text
In XHTML, the tags should read:
Class Presentation
body text
All attribute values must
be in quotes
In HTML, you didn’t need to put quotations around
attributes values. In XHTML, they must be quoted.
The following is incorrect:
The following is valid XHTML
All attribute values
must be in quotes
Even in cases where the attribute only has one possible
argument, you must specify the argument!
This is not valid code:
text text text
This is valid XHTML code:
text text text
Another change to be
aware of:
Another change under XHTML is the use of page anchors. Even though
this change will not become standard until versions of XHTML later than
1.0, you should begin including the XHTML tag attributes in order to
ensure that your pages are compliant in the future. Later versions of
XHTML are going to drop the "name=" attribute in page anchors. Instead,
one should use the "id=" attribute to name an anchor that's referenced by a
"#" in the URL.
Currently, most browsers only understand the "name=" argument, so until
the browsers all catch up, simply use both of the attributes in your
anchors, like this:
Something Else
All tags must be closed
XHTML requires that you close all of your tags. It's something
that we're used to doing already, but the tricky part comes in
when you have to use closing tags that are optional in HTML --
when was the last time you used ? Every open tag in your
XHTML document needs to be accompanied by a closing tag.
A paragraph in you document cannot look like this:
This is a bad paragraph
Instead, use a closing tag, like this:
This is a good paragraph
More on tags
You must remember to close every tag! Every needs a
and every needs a . The same goes for all
standard HTML tags, even the ones which feel awkward,
like and . Fortunately, there is a shortcut for
closing these tags that don't usually need to be logically
closed. The shortcut is to add a close-command slash at the
end of the tag to turn it off.
Tag shortcuts
Yes, even the break tag needs to be closed.
Use either
or you can shortcut it as
Even img and other tags must be closed:
This rule applies to all tags that you wouldn’t
normally close if you were writing HTML 4.01
Your basic Example
Bare bones XHTML file
XHTML Strict
Bring documents into strict compliance
• No tables
• No font tags
• Remember, XHTML separates presentation from
content
This is the doctype statement to use for Strict:
Tools
• W3C validator – http://validator.w3c.org
• W3C CSS Validator
• HTML Tidy (HTML – XHTML Converter
– Dos based program.
– Windows or Unix (Linux) based. Also MAC.
– Download from http://tidy.sourceforge.net.
• Homesite
– Personal favorite Macromedia Homesite.
References
• http://www.w3c.org - World Wide Web Consortium
• http://www.w3schools.com - General tutorial and references
• http://www.alistapart.com/stories/betterliving/ - Good article
• http://www.sizefactory.com/xhtml/ - Good article and links
Notes
• If you use wysiwyg editors like
Dreamweaver or Frontpage, you are
likely to have errors
• Hopefully these will be better in the
future
• Use the Validator to work problems out.
Notes
Remember that validators are not perfect,
just like any other software product.
Notes
The infamous white space bug:
Each of the two tags below is functionally equivalent, but
because of their varying use (or non–use) of white space, they
might display differently in a browser that attempts to parse
white space in markup.
Thus:
Might display differently than:
Notes
Second example:
Might display differently than: