HTML vs XHTML

HTML vs XHTML

XHTML is a stricter, older version of HTML. Let's compare them!

The big idea

• HTML is forgiving. You can make mistakes and the browser usually figures it out.
• XHTML is strict. Every rule MUST be followed, or the page won't work.

XHTML is based on XML rules. It's like a teacher who never lets you break the rules!

The strict rules of XHTML

1. All elements must be properly nested.

<!-- HTML allows this (bad practice): -->
<b><i>text</b></i>

<!-- XHTML requires correct nesting: -->
<b><i>text</i></b>

2. All elements must be closed.

<!-- HTML allows: -->
<p>Some text

<!-- XHTML requires: -->
<p>Some text</p>

3. Self-closing elements need a slash.

<!-- HTML allows: -->
<br>
<img src="pic.jpg">

<!-- XHTML requires: -->
<br />
<img src="pic.jpg" />

4. Tags and attributes must be lowercase.

<!-- XHTML requires lowercase: -->
<img src="pic.jpg" alt="A cat">

5. All attributes must be quoted.

<!-- XHTML requires quotes: -->
<img src="pic.jpg" alt="A cat">

6. The doctype must always be there.

Do people use XHTML today?

Not much! Modern HTML5 is the standard and is used everywhere. XHTML is mostly history. But it taught us good habits like closing tags and quoting attributes!

TL;DR

• HTML is flexible; XHTML is strict.
• XHTML rules: nest correctly, close everything, self-close with />, lowercase, quote attributes.
• HTML5 won; XHTML is mostly a history lesson.
• But follow its good habits anyway!