XHTML vs. HTML

Nowadays almost everybody can create a web page. Most of those pages are written in HTML, a web standard of 1990. To view those pages, you need a browser of some kind (IE, NS, Mozilla, Opera, … are the best known Internet browsers). Those browsers have become more and more flexible and started tolerating bad HTML, like not closing tags. XML however is not so tolerable. It’s designed to describe data and is much more strict, resulting in “well-formed” documents. Combining those two, and we get XHTML. XHTML pages can be read by any XML enabled device. This is also an extra advantage, because Internet browsing is no longer a PC-thing. You can surf the web with a PDA, cellphone or even a fridge.

Writing web pages in XHTML will result in better and smaller (also meaning faster) pages than those written in HTML and have even more functionality. XHTML isn’t that much different from regular HTML (4.01). So it shouldn’t take you much effort to learn.

The 5 most important differences are these:

  • XHTML is case sensitive, all HTML (elements, tags, containers, attributes, …) must be in lowercase.
  • All containers must be properly nested.
  • All containers have to be closed.
  • Some attribute changes
  • And of course the XHTML header.

XHTML is case sensitive

I think this speaks for itself, so no more writing HTML-tags in uppercase or ‘initial capping’. Also the all attributes are lowercase. Of course this is not the case for the content inside those attributes :p

Proper nesting

All containers must be proper nested. Where in HTML <b><i>some text</b></i> wouldn’t be any problem, it isn’t allowed in XHTML.

Closing containers

All containers need to be properly closed. While in HTML this <b><i>some text</b></i><h1>header<p>some text<p>new paragraph</p> would work fine, it doesn’t anymore in XHTML. All containers also means those without contents like <br> and <img> these are closed like this <br /> and <img src="somelocation" alt="" />. Note: image element requires the alt attribute to be specified.

Attribute changes

Some other things that XHTML requires is that all attributes are quoted. So <img width=100% /> is not allowed anymore, you need to quote the attribute like this <img width="100%" />

Id attribute replaces the name attribute, so <img src="picture.gif" name="picture1" /> becomes <img src="picture.gif" id="picture1" alt="" />. However, some browsers (even IE 6.0 don’t always support this. It is advisable to use both until XHTML is fully supported. Our code becomes <img src="picture.gif" id="picture1" name="picture1" alt="" /> then.

XHTML header

Where in a HTML document a simple header would suffice, XHTML pages require a little bit more. The minimum XHTML document template is this:

<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>

<body>
Body text goes here
</body>
</html>

Note: the doctype is not a part of the actual XHTML document itself, and doesn’t need to be closed.
3 Document type definitions

There are currently 3 XHTML document type definitions:

  • STRICT
  • TRANSITIONAL
  • FRAMESET

STRICT

Use strict when you have an XHTML pages free of any styles or other presentational code. All of this is done through CSSs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

TRANSITIONAL

Use transitional if you want to include style in your page, or the browser doesn’t support CSSs. Also use this one to make the transition!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

FRAMESET

Use frameset if you want to subdivide the browserwindows in multiple frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Personal advice

My personal advice to all web designers is, rewrite your pages in XHTML, it isn’t that much work and you will notice the difference when you need to update or add something. Plus XHTML is just one of those nice internet buzz-words.

No Responses to “XHTML vs. HTML”.

Leave a response