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.
Measure the impact of your site modifications on your site’s performance with SERP Tracking and Google Analytics integration. Sign up for a free 30 day trial of Raven Tools and get started in 15 minutes.
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 . . .<farm><barn><horses>10</horses><tools><hammers>1</hammer><shovel>2</shovel></tools></barn><field><cows>8</cows><pigs>30</cows></field></farm>
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 XHTML. That way, the browser knows how to read them. Then, run your pages through the W3C XHTML Validator 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.