Friday, September 25, 2009

What’s the Difference Between HTML and XHTML


I just got an email from a budding web-designer friend that said:

What the hell is the difference between XHTML and HTML?!?!? Am I just stupid? Is
it hard to switch over? I don’t even know what the hay I’m talking about.

I replied back with a quick off-the-cuff comparison between the two - the
differences and the reasons the two standards exist - and thought other people
might benefit. So, I’m posting it here.

Now, I don’t profess to be an expert, and I’m sure there are plenty of nuances
I’ve overlooked. Feel free to contribute in the comments, but keep in mind that
I’m purposely making this explanation as simple as possible and leaving out the
gory details.

It’s a tricky question to answer, but here goes . . .

There’s a computer language (not programming language!) called XML. It stands
for extensible markup language. Basically, it’s just a standard way of storing
data (such as a payroll report, a web page, the number of cows in your barn,
anything) that can be easily read by people and parsed (understood) by
computers. Take a look at this XML code I’m making up on the spot . . .





10



1

2







8

30





Basically, that says I have a farm with a Barn and a Field. The barn has 10
horses and some tools (a hammer and two shovels). There’s also a field with 8
cows and 30 pigs.

That make sense? It’s a very basic example, but it shows how you can use XML to
store any sort of data you want. It just has to follow the proper structure.

Ok, so that’s XML in a (very small) nutshell.

HTML was created in the early 90’s by Tim Berners-Lee (before XML was invented)
as a way to describe web pages. It worked great. It was easy to read, easy to
write, and computers could understand it, too.

(Ok, I’m totally gonna botch this next part.) People thought, hey, if HTML works
great for describing web pages, lets “formalize” the language so that we can use
that style to store any type of data we want. And so, XML was born. Basically,
they took the look of HTML and added a few rules about how you were supposed to
write it. That’s why HTML looks like XML and vice versa.

Ok, now for XHTML. A few years after XML caught on (at this time people were
still building websites with HTML), the W3C (the governing body of HTML) decided
they should make a “new” version of HTML that was “proper” XML. In other words,
even though HTML looked like XML, there were still places in HTML were it didn’t
follow the newly defined XML specification. (And that makes sense since HTML
came before XML.)

So, XHTML is a new version of HTML that is valid XML code. There’s not a huge
difference between XHTML and HTML. The biggest thing is that all your tags must
have a matching closing tag. For example, you know that when you create a link
the opening <a> has a matching </a>. But what about the <br> tag? You don’t
write <br>some text</br> do you? But according to the rules of XML, each tag has
to have a matching closing tag. So, in XHTML you now have to write your <br>
tags like <br/>. That’s called a “self-closing” tag.

In addition to requiring every tag to have a closing tag (or be self-closing),
they also got rid of some old tags and attributes that had been replaced by CSS.
For example, the <font> tag is no longer allowed. And the width attributes in
tags, like <table width=”50%”>, is gone, too. There are too many little changes
like this to name here, but I think that should give you an idea.

So, which one do you use? HTML or XHTML? It doesn’t really matter since there’s
a competing HTML5 standard on it’s way that will compete with XHTML (yes, our
lives just got more complicated). Here’s what I do . . .

Declare your pages to be XHTML1. That way, the browser knows how to read them.
Then, run your pages through the W3C XHTML Validator2 to make sure you code is
correct. Also, make sure you adhere to proper “modern” web design principles
like you’re doing already:

  • Use CSS for formatting and layout
  • Don’t use tables for layout
  • No old/deprecated tags like <font>, etc.


Do all that and you’ll be fine. As for the upcoming HTML5, well, that’s
something all web designers will have to worry about together when it happens.

No comments: