Complete HTML Course Module 15: Advanced: Best Practices and Final Project

HTML vs XHTML: What Is the Difference?

  • Beginner
  • Lesson 15.5
  • 5 min read
  • 68 of 69 in the course

In short

HTML vs XHTML: XHTML was a stricter, XML-based version of HTML. Learn its rules, how it compares to HTML5, why HTML5 won, and which good habits it left behind.

HTML vs XHTML: XHTML was a stricter, XML-based version of HTML. Learn its rules, how it compares to HTML5, why HTML5 won, and which good habits it left behind.

You will still find XHTML in old tutorials, templates and job descriptions, so it is worth knowing what it was and why you don't need it today.

What is XHTML?

XHTML stands for Extensible HyperText Markup Language. It is HTML written with the strict rules of XML. XML is a general format for storing data with tags, used for things like RSS feeds, SVG images and office documents. XML has one big rule: the code must be perfectly correct, or it will not be read at all.

XHTML 1.0 became a W3C standard in 2000. The idea was simple: HTML pages were full of messy code, so let's make the web follow strict rules, like XML. For most of the 2000s, writing XHTML was seen as the "professional" way to build websites.

Here is what a typical XHTML 1.0 page looked like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Sunny Bakery</title>
</head>
<body>
  <h1>Sunny Bakery</h1>
  <p>Fresh bread every morning.<br />Open from 7am.</p>
  <img src="bread.jpg" alt="Loaf of sourdough bread" />
</body>
</html>

Notice the long doctype, the xmlns attribute on <html>, and the slash at the end of empty elements like <br /> and <img ... />.

The rules XHTML enforced

XHTML did not add new elements. It added strict writing rules:

  1. Every element must be closed. <p> needs </p>, <li> needs </li>.
  2. Empty elements must self-close with a slash: <br />, <hr />, <img />, <input />.
  3. Elements and attributes must be lowercase. <P> is an error.
  4. Attribute values must be quoted. class=card is an error.
  5. No attribute minimization. Boolean attributes need a value: checked="checked", not just checked.
  6. Elements must be nested correctly. <b><i>text</b></i> is an error.
  7. There must be one root element, <html>, with the xmlns attribute.
  8. The doctype is required.

The same form in both styles:

<!-- XHTML style -->
<input type="checkbox" name="news" id="news" checked="checked" />
<label for="news">Send me the newsletter</label><br />

<!-- Modern HTML style -->
<input type="checkbox" name="news" id="news" checked>
<label for="news">Send me the newsletter</label><br>

Both show a ticked checkbox with a label. Modern HTML accepts the XHTML style too, so the first version still works in browsers today.

HTML vs XHTML comparison table

FeatureHTML5 (HTML Living Standard)XHTML 1.0
Based onIts own rulesXML
Doctype<!doctype html>Long DTD doctype, required
Case of tagsAny (lowercase recommended)Lowercase only
Closing </p>, </li>Optional (recommended)Required
Empty elements<br> or <br /><br /> only
Attribute quotesOptional (recommended)Required
Boolean attributescheckedchecked="checked"
xmlns on <html>Not neededRequired
Error handlingBrowser fixes errors in a standard wayServed as XML, one error stops the page
Status in 2026The current standardLegacy; not used for new sites

Why HTML5 won

XHTML had a hidden problem. To get the real strict XML behaviour, a page had to be sent by the server as application/xhtml+xml. Then one tiny error, like a missing closing tag or an unescaped &, made the browser show an error message instead of the page. Developers called this the "yellow screen of death".

That was too risky for real websites, especially ones that show user comments or ads you don't control. Also, Internet Explorer could not display application/xhtml+xml pages at all before version 9 (2011). So almost everyone sent their XHTML as normal text/html. The browser then treated it as plain HTML, and the strict rules did nothing.

Then the W3C started XHTML 2.0, which was not compatible with existing pages. Browser makers didn't want it. In 2004 Apple, Mozilla and Opera formed the WHATWG and began working on HTML5 instead. HTML5 took a practical path:

  • It is backwards compatible: old pages keep working.
  • It defines exactly how browsers must handle errors, so every browser shows broken code the same way.
  • It added the things developers wanted: semantic elements, <video>, <audio>, new input types and <canvas>.

In 2009 the W3C stopped XHTML 2.0. Today the HTML Living Standard, maintained by the WHATWG, is the single HTML standard. It even includes an "XML syntax" of HTML for the rare cases where pages must be XML, but you will almost never need it.

Note: SVG is still XML. When you paste SVG code from a design tool into an HTML page, you will see XHTML-like code with xmlns and self-closing tags such as <path ... />. That is normal, and the browser understands it.

What good habits did XHTML leave behind?

XHTML lost, but its discipline lives on in good HTML. Most style guides still recommend:

  • Lowercase elements and attributes.
  • Quoted attribute values.
  • Closing every element you open, even when it is optional.
  • Correct nesting.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sunny Bakery</title>
</head>
<body>
  <h1>Sunny Bakery</h1>
  <p>Fresh bread every morning.<br>Open from 7am.</p>
  <img src="bread.jpg" alt="Loaf of sourdough bread" width="600" height="400">
</body>
</html>

This is the same bakery page as before, in modern HTML. It is shorter, but it keeps the clean XHTML habits. What it dropped is the noise: the XML line, the long doctype, xmlns and the slashes.

Common mistake: Thinking that <br /> is "more correct" than <br>. In HTML both are valid and mean exactly the same thing. The slash does nothing, so choose one style and stay consistent. Prettier and many frameworks like React (JSX) use the slash, which is also fine.

Practice exercise

Take the XHTML 1.0 bakery page from the start of this lesson and turn it into modern HTML. Then add a small signup form with an email field marked required and a checkbox that is checked by default, written in modern style. Check your page with the W3C validator.

Hint: Remove the <?xml ... ?> line, replace the doctype with <!doctype html>, remove xmlns and xml:lang, and use the short <meta charset="utf-8">.

Key takeaways

  • XHTML was HTML written with strict XML rules; XHTML 1.0 became a standard in 2000.
  • It required lowercase tags, quoted values, closed and self-closed elements, full boolean values and correct nesting.
  • Real XHTML stopped the whole page on one error, and most sites served it as HTML anyway, so HTML5 won.
  • Today the HTML Living Standard is the only HTML standard; <br> and <br /> are both valid.
  • XHTML's good habits (lowercase, quotes, closing tags, nesting) are still best practice.