Optional HTML: Everything You Need to Know
Post from August 20, 2019 (↻ September 1, 2019), filed under Web Development.
Reasons to keep optional code around typically boil down to understandability, whereas reasons to leave out optional code converge on performance. The two don’t need to be at odds with each other when optional code is worked with in our editors and kept in our repositories but pruned for production.
What code—here: what HTML code—is optional, however? This article gives an overview over everything optional other than extraneous whitespace and anything standard minifiers handle because there’s much to omit and it’s good for us.
The following lists all optional tags (not elements here, let alone attributes) as per current living HTML. End tags of self-closing elements are put in parentheses. To understand conditions and requirements it can be useful to read respective spec parts.
Attribute values don’t always need to be quoted (no matter single or double quotes). The HTML specification explains in great detail how attribute parsing works, so this section tries to outline when quotes can be omitted, and when not.
<!-- Quoted --> <link rel="stylesheet" href="default.css"> <!-- Unquoted --> <link rel=stylesheet href=default.css>
Per the spec, as long as after the equal sign or as part of the attribute value there are
- no single or double quotes (evidently, as we’re talking about the unquoted syntax) or grave accents (“`”),
- no equal signs (“=”),
- no “greater than” (“>”) or “less than” (“<”) signs,
- no ampersands,
- no spaces and line breaks,
- no null characters (U+0000), and
- no end of file,
there is no need to quote the attribute value.
Usually, a space would then end the sequence to likely lead to the next attribute, or a “greater than” would indicate the start tag to be complete.
Is there a simpler way than memorizing all those characters? From my experience often omitting optional code by hand (while, important here, employing correct punctuation), yes. The rule of thumb that I use is that when an attribute value doesn’t contain any equal signs or spaces, it’s okay to skip the quotes. Looking at these two telltales works reasonably well for me.
Attribute Value Defaults
We can also save HTML by skipping attributes whose values correspond with their defaults. The following is a list of all attributes that have a default value; a missing value default to be precise.
Important: Boolean attributes are not listed; they are basically “on” when present, and “off” when missing. Yet, also important: The spec is a bit hard to extract here—please let me know if you find any issues.
❧ These are the three pillars to get rid of optional HTML code. By removing optional tags, not quoting attribute values that don’t need quoting, and avoiding attribute-value pairs that are default we can reduce HTML load to a considerable degree.
The precise extent of the savings varies as much as our preferences to regard this as part of our craft or as part of our tooling. Yet no matter how much is saved exactly, and no matter whether the knowledge is in our heads or in our environment, optional HTML is optional HTML. The tautology suggests that it’s important to know what is “optional,” and what to do with it. What we’ve covered is there to assist with that.
Appendix I: Risks
With a decade of experience (not) working with optional HTML code, and omitting it both manually and automatically, there’s little to add in this section. The reason for this is not that there would be no risks of something “breaking,” temporarily, but a routine: validation.
To this day, HTML (and CSS) validation is a much-neglected practice whose being neglected not only contributes to bloat and bugs, but that also undermines our profession. Those of us who validate rule out basic syntax issues and with that assure a certain base quality, and they usually learn from and get better from respective mistakes. Those who do not validate are pretty much guaranteed to ship inferior code, and they learn and understand a lot less.
Now, while validation helps with correctly omitting what’s indeed optional, there are some perfectly valid edge cases that can be surprising. The most prominent one, and probably the only one you and I may ever really run into, is markup of the following form:
<p>Example</p> <img src="foo" alt="bar">
If all optional code is omitted, this turns into
<p>Example <img src=foo alt=bar>
…which is, you may notice, something different, for the image, that before spawned an anonymous block element, is now part of the paragraph.
There is no drama here, however. The solution usually consists in keeping respective paragraph closed, or wrapping the image in a non-anonymous element, or, if appropriate, tweaking the markup.
There are no actual risks, and rather many advantages, omitting optional HTML.
Appendix II: Tooling
As the article intentionally leaves it open whether to learn what’s optional in HTML or to abstract it away, tooling has not been a concern here. Still, though currently short, this section will serve to collect significant tools to assist with discarding optional HTML.
HTMLMinifier can handle all of the omissions described, and with the config I’ve introduced at sum.cumo and described in HTML Optimization: A Standard Config for HTMLMinifier, there’s a solid ruleset for HTML production optimization.
Do you disagree or find that something else should be listed here, too? Please send me a brief message so that I can clarify and adjust.
About the Author
Jens Oliver Meiert is a technical lead and author (sum.cumo, W3C, O’Reilly). He loves trying things, including in the realms of philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.
If you have any thoughts or questions (or recommendations) about what he writes, leave a comment or a message.
Have a look at the most popular posts, possibly including:
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out the, at least some of the most important aspects of such CSS.
Looking for a way to comment? Comments have been disabled, unfortunately.