HTML vs XHTML

XHTML (Extensible HyperText Markup Language) was HTML rewritten to follow the strict rules of XML. Where regular HTML has always been forgiving about sloppy markup, XHTML required every document to be well-formed, or the browser would refuse to render it at all.

1) Every Tag Must Be Closed


<!-- Plain HTML: browsers tolerate an unclosed paragraph -->
<p>This is a paragraph.

<!-- XHTML: every element must have a matching closing tag -->
<p>This is a paragraph.</p>

<!-- Void (self-closing) elements need a trailing slash in XHTML -->
<br />
<img src="photo.jpg" alt="Photo" />
<input type="text" />

In HTML5, <br> and <img> work perfectly fine without the trailing slash. XHTML made that slash mandatory for every void element.

2) Lowercase Tags and Attributes


<!-- Plain HTML: case does not matter -->
<DIV CLASS="box">Hello</DIV>

<!-- XHTML: tags and attribute names MUST be lowercase -->
<div class="box">Hello</div>

Because XML is case-sensitive, <DIV> and <div> would be treated as two different elements - XHTML avoided that confusion by requiring lowercase everywhere.

3) All Attribute Values Must Be Quoted


<!-- Plain HTML: quotes are often optional for simple values -->
<input type=text size=20>

<!-- XHTML: quotes are required on every attribute value -->
<input type="text" size="20" />

Skipping quotes is still legal in HTML5 for simple attribute values, but quoting attributes is considered good practice everywhere, XHTML or not.

4) Documents Must Be Well-Formed


<!-- Plain HTML: browsers often "fix" improperly nested tags for you -->
<b><i>Bold and italic</b></i>

<!-- XHTML: tags must close in the exact reverse order they opened -->
<b><i>Bold and italic</i></b>

XHTML also required exactly one root element (<html>) and correctly nested elements - a single mismatched tag could make the entire page fail to display, since XML parsers stop on errors instead of guessing what you meant.

5) Side-by-Side Comparison


<!-- HTML: loose, forgiving -->
<!DOCTYPE html>
<html>
<head><title>Demo</title>
<body>
  <P CLASS=demo>Hello <BR> World
</body>

<!-- XHTML: strict, XML-based -->
<!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">
<head><title>Demo</title></head>
<body>
  <p class="demo">Hello <br /> World</p>
</body>
</html>

Notice how the XHTML version is stricter and more verbose at every step: closed tags, lowercase names, quoted attributes, and a properly closed <head>.

Where Things Stand Today:

  • XHTML is largely legacy today. It never fully replaced HTML on the web, mainly because a single markup error would break the entire page.
  • HTML5 is the modern recommended standard - it kept the simplicity of classic HTML while adding many of the semantic and structural benefits people wanted from XHTML.
  • Every page in this tutorial, including this one, has been written in HTML5 from the start.
  • You can still write HTML5 in an "XHTML style" (closing all tags, using lowercase, quoting attributes) as a matter of good habit - it's just no longer required.
  • You will mostly encounter XHTML today only when maintaining older websites.

Congratulations! You've reached the end of the HTML tutorial series. You now know everything from basic tags and attributes to forms, media, canvas, web storage, and the history behind doctypes and XHTML. The next step is learning how to make your HTML actually look good - head over to the CSS tutorial to start styling your pages.