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 somewhat close to W3C and WHATWG, 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.
If you’d like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!
Read More
Maybe of interest to you, too:
- Next: Professional Agile Leadership (PAL) Reminders and Resources
- Previous: If It Can Be Done Using an HTTP Header, Use an HTTP Header
- More under Development
- More from 2020
- 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.