Casi todo HTML en una única página

Muy interesante el ejercicio realizado por Patrick Weaver en su página A Blog Post With Every HTML Element:

After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy).

I had previously done some work to make sure that <figure> and <figcaption> elements were layed out nicely for images with associated captions, and I had been impressed with various Recurser’s implementation of footnotes or sidenotes1, and have been thinking it would be interesting to see what other interesting layouts were possible with just HTML.

I could, element by element, continue to add support (mostly by making CSS updates for each element to fit in with the rest of my style choices) as I came across specific needs for them, but not one to shy away from an exhaustive exploration, I decided to write this post and attempt to use every element.

A goal of the post, was to avoid delaying other future posts with CSS updates on a previously unused element, but in reality it took a year and a half to make all the updates for just this post! I am using the MDN Web Docs list of HTML elements as a reference which has more than 100 tags divided into a few categories, which I will also use in this post. Many of the tags like <html> don’t make sense to include in the text of a blog post, but if you’re viewing this post on, then every one of the elements is used somewhere on this page.