XHTML vs. HTML (part 2)

This is part 2 of the XHTML vs. HTML tutorial (Click here for part 1.) I recommend you read this first.

What is XHTML

XHTML stands for extended HTML. It extends HTML 4.01 and is based on the XML document family. It is the next generation markup language for web pages, approved by W3C in 2000. XHTML documents are conform with XML, which means they are ready to be viewed, edited and validated with standard XML tools as well as XHTML conforming user agents.

Because XHTML is an XML-application, there are some differences in coding that were perfectly legal in HTML, but have to be changed and/or added for XHTML. (* more in part 1)

Proper nesting*

Overlapping is also illegal in HTML, but is widely tolerated in existing browsers.

Case sensitive*

All XHTML attributes and elements must use lower case. Also entity references are to be in lowercase. For example: the euro sign (€) is defined as € as are hex values &#8364.

Close elements*

Non-empty elements require end tags.

<p>this is a paragraph</p>

Empty elements need a closing tag or the start tag has to end with /> For example: <br> is correct HTML 4.01 but to be XHTML compliant, it becomes <br />.

Attribute quoting*

All attribute values must be quoted, even those which are numeric. This wasn’t required in HTML, but is in XHTML.

Attribute minimalization

XML doesn’t support attribute minimalization. Attributes like compact or checked cannot occur in elements without their value being specified.

<dl compact="compact"></dl> and not <dl compact></dl>

Script and Style

It is preferred to put scripts and style sheets in separate files and use style sheets instead of elements like <font> to define appearance. Call your style sheets and scripts in head container like this:

and script files like this:

<script language="JavaScript" type="text/javascript" src="script.js">
<link href="style.css" rel="stylesheet" type="text/css" />

Elements with ‘id’ and ‘name’ attributes

In HTML 4 a name attribute was defined for elements a, applet, form, frame, iframe, img and map. An other fragment identifier was introduced in HTML 4: id. XHTML however only supports the id attribute. In XHTML the name attribute is formally depreciated and will be removed in subsequent versions of XHTML.

Element prohibitions

The following elements have nesting prohibitions, meaning certain tags cannot be placed in certain others.

a cannot contain other a elements.
pre cannot contain the img, object, big, small, sub or sup elements.
button cannot contain the input, select, textarea, label, button, form, fieldset, iframe or isindex element.
label cannot contain another label element.
form cannot contain other form elements.

Document Header*

For an XHTML page to be HTML compatible, the root element must be and must contain an xmlns declaration. It is also quite useful to specify the document language. You can do this with xml:lang=”en” lang=”en”. Taking this into account, the html element becomes: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">.

Personal advice*

Personally, I suggest altering your site(s) to be XHTML compliant. Not only PCs get online, but also cellphones, PDAs and other mobile devices that use XML parsers. It is a small step to alter now and be ready for the next generation browsers.

No Responses to “XHTML vs. HTML (part 2)”.

Leave a response