On Writing Better Markup
Published on OctĀ 16, 2019 (updated SepĀ 23, 2023), filed under development, html, quality (feed). (Share this on Mastodon orĀ Bluesky?)
HTML is the backbone of the Web. Or one of the backbones of the Web. Or the backbone, again, for us as web developers, because we could build a website without JavaScript, even without CSS, but without HTML, any HTML, no, we couldnāt.
As HTML is so important and yet also so easy, everyone writes HTML, and everyone says they can write HTML. And with that they donāt just mean theyāre able to write HTML, but that they write good HTML, where āgoodā means āhigh quality.ā
That would be great news, because writing good HTML is actually more important than writing good CSS or good JavaScript. At least from the view of the first paradigm of web development, which sees a benefit in separating concerns, and assumes, as the end goal, a large code base of many HTML templates and files with very few style sheets and scripts.
Alas, then, the problem is not that thereās also a new paradigm, in which components feature HTML and CSS and JavaScript (or ECMAScript, if we want to adjust terminology), but that not everyone writes good HTML. And that has many reasons, of course.
The most important one, a very good reason, is that HTML isnāt actually that easy, because it really is complex. Want an example?
HTMLĀ 5.2, which is the latest HTML recommendation over at the W3C (as opposed to the WHATWG, where HTML really is writtenāso normally, look at that spec), contains 111 elements alone. 111. How many do you know? How many does the average web developer know? Or the median web developer? And what does that mean for their HTML if they donāt even know all the elements?
Want another example? When people talk about HTML elements like, for example,
<html>or<a>or<p>, then most of the time they do mean elements. But what they then talk about is ātags.ā Google, as of September, 2019, finds 25 million occurrences of āhtml tagsā alone. HTML elements, what people mean, but donāt call by name? 2.4 million hits, a tenth. So this one begs the question how well developers understand HTML if theyāre not sure about the difference between elements and tags.Another one? In a few years, HTML will celebrate its 30th birthday. Very cool! So we will certainly have maxed out all options to reduce HTML payload, to improve performance? Well, no. One of the major options at our disposal to reduce HTML payload is not to write HTML that can be left out without a document turning invalid (please validate, by the way). But almost no one uses that option. Web developers have concerns, yes, but the point is that the method is so under-utilized, we cannot speak of HTML mastery here, either.
We could go on, adding data and anecdotes to how HTML is both important and yet not well-understood, nor well-used. But the route I want to take now is to take 10 examples, from the wild, to show simple improvements to the respective HTML code. That code, then, has been anonymized, for this book is not about pointing fingers, but to simply look at HTML and see what else we can do, how we can improve it, how we can: upgrade it.
The unedited initial introduction for my next (super-short) book, and book series: Upgrade Your HTML. Stay tuned!
About Me
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.)