HTML Is Not XHTML: Breaking the XML Habit

XHTML may be gone, but its influence lingers in how many developers write HTML. The syntax rules that XML imposed in the early 2000s—lowercase tags, quoted attributes, mandatory closing tags—remain so deeply ingrained that they're often treated as universal HTML best practices. Yet the HTML specification never demanded any of them.

From HTML to XHTML and Back

The timeline tells the story: HTML 4.01 arrived in 1999, XHTML 1.0 followed in 2000, and work on what became HTML5 began around 2007. During that XHTML interlude, the idea that XML and its derivatives would dominate the web took hold, and developers learned to write HTML as if it were XML.

XHTML 1.0's specification spelled out exactly what that meant. Documents had to be well-formed. Element and attribute names had to be lowercase. End tags were mandatory for non-empty elements. Attribute values always required quotes. Attribute minimization was forbidden. Even empty elements needed explicit closing slashes.

Most of those rules survive today as habits, even though the web has moved back to HTML proper. With the exception of CDATA sections and SGML exclusions—both no longer relevant—most developers follow every single XHTML rule without thinking twice.

What HTML Actually Allows

Modern HTML isn't based on SGML at all, and its parsing rules are far more forgiving than XML's. Stripping away the esoteric requirements, the real differences from XHTML come down to a handful of freedoms:

  • Start and end tags are not always required.
  • Empty elements don't need to be closed.
  • Element and attribute names may be lower or upper case.
  • Attribute values may not always be quoted.
  • Attribute minimization is supported.

The point isn't that documents should be malformed. Even though HTML's error handling is resilient, shipping invalid code remains a poor practice. Rather, understanding what the syntax actually permits reveals how much unnecessary ceremony XHTML introduced.

Writing HTML Without the XML Baggage

Consider how markup style changes when those freedoms are exercised. A paragraph with a list, typically written with explicit closing tags in the XHTML style:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
  <li>Praesent augue nisl</li>
  <li>Lobortis nec bibendum ut</li>
  <li>Dictum ac quam</li>
</ul>

Can be expressed in valid HTML with only the opening tags, since the end tags are optional:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul>
  <li>Praesent augue nisl
  <li>Lobortis nec bibendum ut
  <li>Dictum ac quam
</ul>

Void elements demonstrate the same pattern. The trailing slash that XHTML demanded:

<br />

Is unnecessary—the slash has no effect on void elements in HTML parsing:

<br>

Case sensitivity is another vestige. HTML allows uppercase element names, so this is perfectly valid, if visually loud:

<A HREF="https://css-tricks.com/">CSS-Tricks</A>

Attribute quoting also offers flexibility. When an attribute value contains no spaces or equal signs, quotes can be dropped:

<A HREF=https://css-tricks.com/>CSS-Tricks</A>

And where XHTML demanded explicit attribute-value pairs, HTML supports minimization. A required, read-only input can be written the verbose way:

<input type="text" required="required" readonly="readonly">

Or the compact way, letting the bare attributes carry the meaning:

<input type="text" required readonly>

Combine that with default attribute values—text is the default for the type attribute, for instance—and the markup becomes remarkably spare:

<input required readonly>

A Modern HTML Discipline

None of this advocates returning to 1990s table-based layouts or invalid code. The goal is a deliberate, contemporary approach to HTML that acknowledges the specification's actual flexibility while maintaining quality. A practical set of principles:

  1. Respect syntax and semantics. Validate your HTML and ship only valid documents.
  2. Use HTML's options consistently. Whether you choose lowercase or uppercase names, apply your choice uniformly.
  3. Keep markup minimal. Remember that presentational and behavioral concerns belong in CSS and JavaScript. Start and end tags are frequently optional, empty elements don't require closing, many attribute-value pairs have defaults that can be omitted, quotes are often unnecessary, and attribute minimization is supported.

This philosophy connects to the broader principles of minimal web development and has tooling behind it—html-minifier handles all of these optimizations. The web survived the XHTML detour and returned to HTML. It's worth relearning what that actually means for the code we write daily.