Write HTML, the HTML Way (Not the XHTML Way)
Published on May 17, 2022 (↻ October 3, 2024), filed under Development (RSS feed for all categories).
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
- HTML, XHTML, HTML
- The XHTML Way of Writing HTML
- The HTML Way of Writing HTML
- 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”:
- Documents must be well-formed
- Element and attribute names must be in lower case
- For non-empty elements, end tags are required
- Attribute values must always be quoted
- Attribute minimization [is not supported]
- Empty elements [need to be closed]
- White space handling in attribute values [is done according to XML]
- Script and style elements [need CDATA sections]
- SGML exclusions [are not possible]
- The elements with
id
andname
attributes [likea
,applet
,form
,frame
,iframe
,img
, andmap
, should only useid
] - Attributes with pre-defined value sets [are case-sensitive]
- Entity references as hex values [must be in lower case]
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):
- Documents may not be well-formed
- Element and attribute names may not be in lower case
- For non-empty elements, end tags are not [always] required
- Attribute values may not always be quoted
- Attribute minimization is supported
- Empty elements don’t need to be closed
- White space handling in attribute values isn’t done according to XML
- Script and style elements don’t need CDATA sections
- The elements with
id
andname
attributes may not only useid
- Attributes with pre-defined value sets are not case-sensitive
- Entity references as hex values may not only be in lower case
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:
- Documents may not be well-formed
- Element and attribute names may not be in lower case
- For non-empty elements, end tags are not always required
- Attribute values may not always be quoted
- Attribute minimization is supported
- Empty elements don’t need to be closed
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:
- 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
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.)
- Respect syntax and semantics
- 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
- 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.
About Me
I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, 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 views and experiences. (Be critical, interpret charitably, and send feedback.)
Read More
Maybe of interest to you, too:
- Next: “The One With the Biggest Hammer Wins”
- Previous: Two Approaches to Accessibility on the Web
- More under Development
- More from 2022
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.