Simple web design, web development, information technology, & technical communication

Articles and resources for web developers and the average person. Topics include web development, web design, technical writing and communication, and all aspects of information technology.

What’s the difference between HTML and XHTML?

Originally published on Sunday, July 16th, 2006

If you’ve mastered HTML, you’re 90% of the way towards using XHTML. They’re actually very much the same thing—tag-based markup languages used to display Web pages. The difference is only seen by the people creating the pages (Web designers, programmers, etc.) and focuses on “forgivability”— HTML allows for some ugly code (mixed-case tags like <BoDy>, improperly nested elements, and unclosed tags), while XHTML does not. If you write HTML, it’s probably a good idea to start using XHTML practices anyway. It will take 5 minutes to learn, and it’s just a better way of doing things.

In XHTML, all tags must be lowercase

This is simple enough. Instead of using tags like , , and <TABLE>, use , , and <table>. Look at that! You’re 1/3rd of the way towards being an XHTML guru.

In XHTML, all tags must be closed

Again, something a good Web designer does anyway. But if you’re one the few people who still leaves tags unclosed, now’s the time to start closing them.

Example of valid HTML:
This is a paragraph

Equivalent in XHTML:
This is a paragraph

Tags that don’t contain data (like breaks, images, and horizontal rules) should also be closed in HTML. There’s no need to write an opening and closing tag, though. We can use the perfectly acceptable shortcut:

<!— Examples of properly closed XHTML tags --> <!—Properly closed image --> <img src=”someimage.gif” alt="An image" /> <!—Properly closed break tag --> <!—Properly closed horizontal rule --> <hr />

In XHTML, tags must be properly nested

Here’s another area where good HTML coders are properly writing valid XHTML, even if they’re not aware. In HTML, the following code might display exactly as you intended:

Here’s some bold and italicized text

Although this might work, it’s not “good” code. And for the purposes of this article, not valid XHTML either. To complete your XHTML training, simply make sure your tags are properly nested:

Here’s a valid XHTML version of bold italicized code

XHTML wrapup

XHTML is just cleaner HTML—tags are consistently lowercase, all tags are closed, and tags are properly nested. Making your pages valid XHTML is a piece of cake. And if you’ve been writing valid XHTML all along and never realized it, kudos! You can brag to your friends about how their old-school HTML pages are simply not up to par (Editors note: If you could really brag to your friends about this without them looking at you funny, I ask that you get up and attend a social event immediately. Conversations like this, even if you’re an IT professional, should be kept to a minimum. It scares other people and embarrasses your nerd friends who are trying to fit in.).

This article was written by Christopher Jason and published on Sunday, July 16th, 2006. You can follow any responses to this entry through the RSS 2.0 feed.

Add a Comment

You must be logged in to post a comment.