Jens Oliver Meiert

Write HTML, the HTML Way (Not the XHTML Way)

Published on May 17, 2022 (updated Oct 3, 2024), filed under , , (feed). (Share this on Mastodon or Bluesky?)

This article first appeared at CSS-Tricks.

You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way.

What is the XHTML way of writing HTML, and what is the HTML way of writing HTML? Let’s have a look.

Contents

  1. HTML, XHTML, HTML
  2. The XHTML Way of Writing HTML
  3. The HTML Way of Writing HTML
  4. Write HTML, the HTML Way

HTML, XHTML, HTML

In the 90s, there was HTML. In the 2000s, there was XHTML. Then, in the 2010s, we switched back to HTML. That’s the simple story.

You can tell by the rough dates of the specifications, too: HTML “1” 1992, HTML 2.0 1995, HTML 3.2 1997, HTML 4.01 1999; XHTML 1.0 2000, XHTML 1.1 2001; “HTML5” (I dislike the space-phobic spelling), 2007.

XHTML became popular when everyone believed XML and XML derivatives were the future. “XML all the things.”

For HTML, this had a profound effect: The effect that we learned to write it the XHTML way.

The XHTML Way of Writing HTML

The XHTML way is well-documented, because XHTML 1.0 describes it in great detail in its section on “Differences with HTML 4”:

Does this look familiar? With the exception of marking CDATA content, as well as dealing with SGML exclusions, you probably follow all of these rules. All of them.

Although XHTML is dead, many of these rules have never been questioned again. Some have even been elevated to “best practices” for HTML.

That is the XHTML way of writing HTML, and its lasting impact on the field.

The HTML Way of Writing HTML

One way of walking us back is to negate the rules imposed by XHTML. Let’s actually do this (without the SGML part, because HTML isn’t based on SGML anymore):

Let’s remove the esoteric things, the things that don’t seem relevant. This includes XML whitespace handling, CDATA sections, doubling of name attribute values, the case of pre-defined value sets, and hexadecimal entity references:

Peeling away from these rules, this looks a lot less like we’re working with XML, and more like working with HTML. But we’re not done yet.

“Documents may not be well-formed” suggests that it was fine if HTML code was invalid. It was fine for XHTML to point to wellformedness because of XML’s strict error handling. But while HTML documents work even when they contain severe syntax and wellformedness issues, it’s neither useful for the professional, nor our field, to use and abuse this resilience. (I’ve argued this case before—see In Critical Defense of Frontend Development.)

The HTML way would therefore not suggest “documents may not be well-formed.” It would also be clear that not only end, but also start tags aren’t always required. Rephrasing and reordering, this seems to be the essence:

Examples

How does this look like in practice?

For start and end tags, be aware that many tags are optional. A paragraph and a list, for example, are written like this in XHTML:

<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>

In HTML, however, you can write them using only this code (which is valid):

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

Developers also learned to write void elements like such:

<br />

This is something XHTML brought to HTML, but as the slash has no effect on void elements, you only need

<br>

In HTML, you can also just write everything in all caps:

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

It looks like you’re yelling and you may not like it, but it’s okay to write HTML like this.

When you want to condense that link, HTML offers you the option to leave out certain quotes:

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

(As a rule of thumb, when the attribute value doesn’t contain a space or an equal sign, it’s usually fine to drop the quotes.)

Finally, HTML–HTML, instead of XHTML–HTML, also allows to minimize attributes. That is, instead of marking an input element as required and read-only like this:

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

You can minimize the attributes:

<input type="text" required readonly>

And if you’re not only taking advantage of the fact that the quotes aren’t needed, but that text is the default for the type attribute here (there are more such unneeded attribute–value combinations), you get an example that shows HTML in all its minimal beauty:

<input required readonly>

Write HTML, the HTML Way

The above isn’t a representation of where HTML was in the 90s—HTML, back then, was table-itis packed with presentational code, largely invalid (like today), with wildly varying support in user agents. Yet it’s the essence of what we would have wanted to keep if XML and XHTML hadn’t come around.

If you’re open to a suggestion of what a more comprehensive, contemporary way of writing HTML could look like, I have one. (HTML is my main focus area, so I’m augmenting this by links to some of my articles.)

  1. Respect syntax and semantics
  2. Use the options HTML gives you, as long as you do so consistently
    • Remember that element and attribute names may be lower or upper case
  3. Keep use of HTML to the absolute minimum
    • Remember that presentational and behavioral markup is to be handled by CSS and JavaScript instead
    • Remember that start and end tags are not always required
    • Remember that empty elements don’t need to be closed
    • Remember that some attributes have defaults that allow these attribute–value pairs to be omitted
    • Remember that attribute values may not always be quoted
    • Remember that attribute minimization is supported

It’s not a coincidence that this resembles the three ground rules for HTML, that it works with the premise of a smaller payload also leading to faster sites, and that this follows the school of minimal web development. None of this is new—our field could merely decide to rediscover it. (Tooling is available, too: html-minifier is probably the most established of it, being able to handle all HTML optimizations.)

You’ve learned HTML the XHTML way. HTML isn’t XHTML. Rediscover HTML, and help shape a new, modern way of writing HTML—which acknowledges, but isn’t necessarily based on XML.

Tristram seeking in hardship and adventure to forget fair Isolde and Gawain to escape King Arthur’s displeasure at his mischief.
HTML, so good to see you again. (Copyright King Features Syndicate, Inc., distr. Bulls.)

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)