What's the Difference Between HTML and XHTML

Marketing

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.


http://validator.w3.org/

Related Posts Plugin for WordPress, Blogger...

Tell us what you think

  • F6emoh

    I like it ..you explain it in a perfect way that every one can understand it easly .. Thank you so much ..

  • Prabhjot

    Really descriptive post explaining concepts beautifully. Found something similar difference between html xhtml

  • James Pierce

    Omg I love this post, you explained HTML and XHTML so well I immediately understood the difference. Finally someone in the web design and programming community who explains something in plain words without using abstract definitions that say nothing in the end. Thank you so much!!

  • Charlie Solano

    HTML is probably the most successful document markup language in the world. But when XML was introduced, a two-day workshop was organised to discuss whether a new version of HTML in XML was needed. Great Info.

    Mylife Refund

  • http://www.w3.org/QA/ karl dubost, w3c

    And more specifically HTML 5 is coming from… W3C

    See http://www.w3.org/html/ for its home page

    and for the Editor’s draft of the document.

    http://www.w3.org/html/wg/html5/

  • zcorpan

    “I thought they were? They come from two different standards groups. XHTML from W3C and HTML5 from WHATWG. Even the WHATWG’s website lists XHTML as a “competing technology”.”

    XHTML2 is a completely different beast. And xhtml.com is not the WHATWG website… ;)

    “In an ideal world, yes”

    No, what I said applies to the real world. “text/html” tells the browser that it is HTML. That IE doesn’t support XHTML doesn’t make text/html resources less HTML.

  • http://www.sitening.com/ Tyler Hall

    “XHTML is *not* a new version of HTML. It is a formulation of (the *same* version of) HTML in XML. XHTML1 is HTML4 expressed in XML.”

    I thought that’s what I said, but I guess “new version” can be interpreted to mean different things :)

    “HTML5 is *not* competing with XHTML”

    I thought they were? They come from two different standards groups. XHTML from W3C and HTML5 from WHATWG. Even the WHATWG’s website lists XHTML as a “competing technology”.

    http://xhtml.com/en/future/x-html-5-versus-xhtml-2/

    “the server must declare an XML MIME type for the file. If you use text/html, browsers will interpret it as HTML, regardless of what it looks like.”

    In an ideal world, yes, but certain browsers *cough* IE *cough* don’t recognize that MIME type. Instead, you need to serve your file as text/html using the W3’s backwards compatibility guidelines.

    http://www.w3.org/2003/01/xhtml-mimetype/content-negotiation

  • zcorpan

    “So, XHTML is a new version of HTML that is valid XML code.”

    XHTML is *not* a new version of HTML. It is a formulation of (the *same* version of) HTML in XML. XHTML1 is HTML4 expressed in XML.

    HTML5 is *not* competing with XHTML. HTML5 can be expressed in XML — just like HTML4 can be expressed in XML — and is referred to as XHTML5.

    Moreover, The HTML version of HTML5 allows syntax such as /> to ease migration from “XHTML-as-text/html” (which I suspect is what you are discussing here) to HTML5. So it should be trivial to migrate even if you use XHTML-like syntax. No need to worry about it. :-)

    BTW, your template doesn’t tell browsers that the document is XHTML not HTML. To do that, the server must declare an XML MIME type for the file. If you use text/html, browsers will interpret it as HTML, regardless of what it looks like.