For people interested in this sort of thing, I recently published a blog post looking at counts of HTML tags and their attribute values from a 2.9B page Common Crawl dataset. [1]<p>There's also a SQLite DB available to download of the top 1k tag+attr+value combinations. [2]<p>[1] <a href="https://webparsing.io/blog/hidden-in-html-parsing-page-layouts/" rel="nofollow">https://webparsing.io/blog/hidden-in-html-parsing-page-layou...</a>
[2] <a href="https://webparsing.io/data/commoncrawl-2024-11-html-tags-attributes-values/" rel="nofollow">https://webparsing.io/data/commoncrawl-2024-11-html-tags-att...</a>
I like this!<p>It's fun to compare it to "A blog post with every HTML element" [1][2], which gets at a (very!) similar thing but in a very different way. This post primary <i>shows</i>, and is a little more chaotic (meant positively!) whereas the other post is much more prose and explanation heavy (also good, but very different).<p>[1] <a href="https://www.patrickweaver.net/blog/a-blog-post-with-every-html-element/" rel="nofollow">https://www.patrickweaver.net/blog/a-blog-post-with-every-ht...</a><p>[2] HN discussion: <a href="https://news.ycombinator.com/item?id=37104742">https://news.ycombinator.com/item?id=37104742</a>
The <dialog> element says "This is a modal dialog displayed using just HTML." but that's a bit misleading because the dialog opens using JavaScript `document.getElementById('my-dialog').showModal()` in the onclick attribute of the relevant button.
No love for the <plaintext> tag? "The <plaintext> HTML element renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text." - it's my favorite obscure deprecated HTML tag.
I like that you included the <ruby> tag! I really wish more pages would use them when rendering Chinese/Japanese characters in English text.
I wonder if it would be possible to do this in a way that the page shows its own source code.<p>Similar to:<p><a href="https://no-gravity.github.io/html-quine/index.html" rel="nofollow">https://no-gravity.github.io/html-quine/index.html</a><p>Could be tricky, because non-textual elements would probably have to be taken care of individually. For example a video would probably have to show a video of its own representation in code.
First I've ever heard of hgroup.<p>Subheadings are one of those little things I've wondered about the proper semantics for a million times and always end up doing something slightly different on the fly.
Lols you are offering to sell this for $1? <a href="https://iamwillwang.com/dollar/" rel="nofollow">https://iamwillwang.com/dollar/</a>
On mobile (Safari), the link to the article scrolls me down towards the bottom of the page by the iframe/red dot, making me think half the page was missing.
According to MDN [1] there is a <portal> element but hell if I know what it does.<p>[1]: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/portal" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/po...</a>
Most people insist on only using one element, which is the element of last resort, according to MDN. This is our friend, the <div>.<p>The only use case I have for <div> is in a details/summary where there is no CSS to select the contents of a <details> element, excluding the <summary>.<p>Does this mean I use <section> instead of <div>, as a 'direct replacement'? Nope. When using CSS grid, there is no need for <div> wrappers around everything.<p>I do like to use the full HTML element set, and, with scoped CSS, to style the elements, rather than have loads of divs with loads of class attributes. It all looks so much neater, particularly if the unstyled CSS looks rather good.
>>Ah, now there's some breathing room, thanks to <br />.<p>That's XHTML which is XML. HTML does not use and does not need a closing slash and never has in any HTML specification.<p><a href="https://html.spec.whatwg.org/dev/text-level-semantics.html#the-br-element" rel="nofollow">https://html.spec.whatwg.org/dev/text-level-semantics.html#t...</a>
Absolutely mind-boggling I didn't know <i>progress</i> and <i>meter</i> existed, I supposed progress has been made.<p><pre><code> <progress value="70" onmousemove="value=Math.random()*100" max="100"/></code></pre>
Very dismissive. Anyone not using <span> should take a second look. Of all the elements, this is the one to change font, size, color, etc. in any dynamic text without offsetting anything in your layout. Do you really want to throw your user's text inside a <div> inside your nice <div> layout? No.
Disappointed to see <blink> or <marquee> merely mentioned but not used on that page, seemed like a serious omission.<p>Based on my tests just now, <blink> no longer blinks in today’s browsers but <marquee> still scrolls happily.
what this comment section is missing is "hey, here are other pages that do the same thing is a slighty different way" (there must be tons!? I would enjoy and learn from those type of comments so much I that I'd shout, "this is a motherfucking comment section!" <a href="https://motherfuckingwebsite.com/" rel="nofollow">https://motherfuckingwebsite.com/</a>
...all of which have poor dx and ui. There isn't any philosophy or process behind "what should become a tag"<p>but hey, "use the platform"