iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML vs. XHTML

By · Reviewed & last updated · Part of HTML Tutorial

XHTML was a strict, XML-based variant of HTML that has been superseded by HTML5. Most of its discipline was good; the strictness was not worth the cost.

HTML5 vs XHTML

EXAMPLE
<!-- XHTML 1.0 (legacy) - strict XML rules -->
<?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>
  <title>Old XHTML</title>
</head>
<body>
  <p>Self-closing tags required: <br /></p>
  <img src='x.png' alt='x' />
</body>
</html>


<!-- HTML5 (modern) - same intent, less ceremony -->
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' />
  <title>Modern HTML5</title>
</head>
<body>
  <p>Self-closing optional on void elements: <br></p>
  <img src='x.png' alt='x'>
</body>
</html>


<!-- What survived from XHTML and is still good practice in HTML5 -->
<!-- 1. Lowercase tag names + attributes -->
<input type='email' name='email'>

<!-- 2. Quote attribute values -->
<a href='/about' title='About us'>About</a>

<!-- 3. Close non-void elements -->
<p>Paragraph</p>      <!-- not <p>Paragraph -->

<!-- 4. Always specify alt on <img> -->
<img src='hero.jpg' alt='Sunset over the bay'>

<!-- 5. Declare language with <html lang='...'> -->
<!-- 6. UTF-8 charset -->


<!-- What HTML5 added that XHTML did not have -->
<!-- - Semantic elements: header, nav, main, article, section, aside, footer -->
<!-- - Inline SVG and MathML -->
<!-- - <canvas>, <video>, <audio> -->
<!-- - Form types: email, url, date, color, range, search -->
<!-- - <details>, <summary>, <dialog> -->
<!-- - data-* attributes for arbitrary metadata -->

Why it matters

HTML5 won because it is forgiving and fast to write. Adopt the disciplined parts of XHTML (lowercase, quotes, alt text, lang attribute) without paying the XML strictness tax. The web is more accessible and faster as a result.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML vs. XHTML</title>
</head>
<body>

<h1>HTML vs. XHTML</h1>
<p>This is a demo page for the "HTML vs. XHTML" lesson.</p>

</body>
</html>
Try it Yourself »

Exercise

Self-close this <br> the way XHTML required.

<p>Line< >Line</p>

Test yourself

Q1. XHTML required…
Q2. Modern HTML5 is…
Q3. Self-closing tags in HTML5 are…

Discussion

Loading…