HTML and CSS and the 2019 Web Almanac

Published on January 15, 2020 (↻ July 14, 2023), filed under Development (RSS feed for all categories).

Short and sweet: The HTTP Archive’s Web Almanac is fantastic because it provides us with data about how we build what kinds of websites. While the release of the 2019 Almanac has been accompanied by some analysis, I had found it interesting to interpret the data, too, especially the sections on HTML and CSS. I shared my observations on Twitter—see the respective threads for HTML and CSS—, but liked the idea of documenting them here as well.

HTML

In this section I wish to note some impressions from the Almanac’s markup chapter.

The top elements look like there’s less presentational markup. Fewer layout tables, fewer line breaks for layout purposes. That’s great—but the dominant “2nd paradigm” we’re in suggests it’s now worse CSS-wise.

The increase in number of different elements per page hints at better (but still not good) knowledge of HTML. Although I still deem HTML rather poorly understood (cf. the intro for Upgrade Your HTML), such development would of course be great.

Side note: Through all HTML incarnations, there should be around 170 (not 145) elements—compare with the continuously updated index at meiert.com/en/indices/html-elements. I suspect that—for understandable reason—XHTML 2.0 was ignored.

For deprecated elements, then, I find it quite surprising that marquee is still comparatively popular—and striking that it’s even more popular on mobile than on desktop. (Is this real?)

This:

There are around two billion web sites on the web. If something appears on 0.1% of all websites in our dataset, we can extrapolate that this represents perhaps two million web sites in the whole web. Even 0.01% extrapolates to two hundred thousand sites. This is also why removing support for elements, even very old ones which we think aren’t great ideas, is a very rare occurrence.

With other popular elements also meaning jdiv, cufon, or ymaps, we—and I want to call this one out specifically—find both irresponsible markup by vendors (cf. ancient How to Share Code with Users), and unprofessional conduct by developers (validation is more modern than ever).

There are also lots of accordions, dialogs, at least 65 variants of carousels, lots of stuff about popups, at least 27 variants of toggles and switches, and so on.

This number seems really low, and is yet really interesting. Maybe we reinvent the wheel too rarely.

CSS

Here are the observations around Una’s and Adam’s CSS report, which I was excited to go through.

Color count, with a median of about 50 colors per page (!), seems really high, and I like the question the respective section ends with: “How can you reduce this number into a manageable and reasonable amount?”

As for color duplication (median 25 repetitions), custom properties or variables are one option to curb it—another being using every declaration just once (UDJO). UDJO can be employed intelligently on a component or module level.

Side note: For classes per element, knowing the average seems to be more useful than the median (1). What is it?

The writing modes section seems off. RTL pages as well as sites with both LTR and RTL contents are usually the ones explicit about text directionality, and that asymmetry seems to make interpreting the data difficult to impossible.

❧ Short and sweet. I look forward to the next edition of the Web Almanac—for which the team asks for volunteers! If you’re also interested in contributing, fill out Web Almanac 2020 interest form.

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 experiences and views. (Please be critical, interpret charitably, and give feedback.)