Every HTML Element

[benwills]

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]

There's also a SQLite DB available to download of the top 1k tag+attr+value combinations. [2]

[1] https://webparsing.io/blog/hidden-in-html-parsing-page-layou... [2] https://webparsing.io/data/commoncrawl-2024-11-html-tags-att...

[jamesfinlayson]

I think someone who works on Chrome did something a few years ago - though I can't remember exactly what they were trying to figure out.

[eieio]

I like this!

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 shows, and is a little more chaotic (meant positively!) whereas the other post is much more prose and explanation heavy (also good, but very different).

[1] https://www.patrickweaver.net/blog/a-blog-post-with-every-ht...

[2] HN discussion: https://news.ycombinator.com/item?id=37104742

[wxw]

Whoa! I'm a big fan of yours. You've really inspired me to think more creatively about the web/software. Thanks a ton, I'm glad this reached you.

[hn_acker]

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.

[worble]

Which is strange because you absolutely can open dialogs without javascript with the popover attribute

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API...

[idoubtit]

No, a <dialog> element will be displayed at page load if it has the "open" attribute. There is no need for JS.

The usual handling is with the JS API, but it's possible to handle it with CSS only. For instance, display the modal window only if a checkbox is checked.

[sigzero]

Correct, it is only modal if JavaScript is used.

[rav]

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.

[dmsnell]

Fun fact: this is very close but slightly inaccurate. I used to think this is how it worked before scrutinizing a rule in the HTML tree-building specification.

The tag leads the parser to interpret everything following it as character data, but doesn’t impact rendering. In these cases, if there are active formatting elements that would normally be reconstructed, they will after the PLAINTEXT tag as well. It’s quite unexpected.

  <a href="https://news.ycombinator.com"><b><i><u><s><plaintext>hi

In this example “hi” will render with every one of the preceding formats applied.

https://software.hixie.ch/utilities/js/live-dom-viewer/?%3Ca...

After I discovered this the note in the spec was updated to make it clearer.

  https://html.spec.whatwg.org/multipage/parsing.html#:~:text=A start tag whose tag name is "plaintext"

[kisonecat]

I'm terrified of opening a paren andforgetting to close it! How terrifying to find a tagged paren that cannot be closed!

"please accept from me this unpretentious bouquet of early-blooming" <plaintext>s

[assimpleaspossi]

It's not deprecated. It's obsolete and totally removed from the HTML standard since HTML4.

[filcuk]

What in the world was the intended use for that?

[soheil]

same as <pre no?

[joshdavham]

I like that you included the <ruby> tag! I really wish more pages would use them when rendering Chinese/Japanese characters in English text.

[fsckboy]

(your comment is very minimally informative, containing 1 bit of information: "there is something to learn about ruby". Searching "show source", "hidden gems" on OP's page marks the ruby spot)

and looking up the <ruby> tag:

https://interactive-examples.mdn.mozilla.net/pages/tabbed/ru...

The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.

The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.

[Isognoviastoma]

It's impressing that browser can display many levels of recursive iframe.

[queueueue]

I've counted 18! The next one was blank.

[TZubiri]

Except this custom one I just invented that I implement in my custom browser

[ruined]

ive been demaking html elements by removing them from my custom browser so it evens out

[somat]

Raises the question, how far can you get using only custom elements and css?

It sometimes appears that the modern ideal is to not have an element "do" anything on it's own and depend on the css to define it's purpose. But we still have a lot of historical baggage we are carrying around.

[byearthithatius]

Too bad OP is not omniscient and capable of predicting your made up tags

[bbx]

Relevant: https://htmlreference.io/

[assimpleaspossi]

Even more relevant: https://html.spec.whatwg.org/dev/semantics.html#semantics

[Neuronaut]

The HTML Tags Memory Test [0] game refers to 114 tags. Your link got 113. I wonder what's missing?

[0]: https://codepen.io/plfstr/full/zYqQeRw

[hmmokidk]

As a browser game enthusiast I will have you tried for missing canvas

[butz]

Canvas is stealthily hiding, as it has no content to display.

[divbzero]

Where is the good old…

  <center>alignment with no CSS</center>

[assimpleaspossi]

That's been obsolete for over 20 years: https://html.spec.whatwg.org/dev/obsolete.html#non-conformin...

[edoceo]

Bring back <blink> and <marquee>

[mg]

I wonder if it would be possible to do this in a way that the page shows its own source code.

Similar to:

https://no-gravity.github.io/html-quine/index.html

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.

[alwillis]

This is very good: https://meiert.com/en/indices/html-elements/

[jazzypants]

I think it would be better to do a split panel so you could see the source and the end result side by side. This would eliminate the need for somehow showing the video and the source in the same place. You could even include the shadow DOM trees for a full explanation of how the browser renders complex tags like video.

[fsckboy]

for certain elements, a quinesque approach might not be that useful, but source could be displayed juxtaposed to results. (to show numbered lists, do you want to display the ol tags before the numbers (thus using fake numbers) or do you let ol numbering tags tag the elements with numbers and then show the source inside that?)

btw it really drives me crazy that browser implementors think that when I copy/paste a numbered list, I somehow don't want the numbers.

[robby1066]

First I've ever heard of hgroup.

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.

[hellcow]

PicoCSS uses them well, as an example: https://picocss.com/docs/typography#heading-group

[alwillis]

> First I've ever heard of hgroup.

<hgroup> was officially added to the HTML spec in 2018 [1]

It was deprecated in the W3C spec but not from the WHATWG spec, before they were merged.

[1]: https://html.spec.whatwg.org/#the-hgroup-element

[adzm]

hgroup is considered deprecated in HTML5 though, whatever that actually means.

[3willows]

Lols you are offering to sell this for $1? https://iamwillwang.com/dollar/

[wxw]

haha, that's a bit of an inside joke (...for now?)

[amphitheatre]

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.

[sidsancheti]

I'm on PC (Brave) and I experienced the same thing.

[wxw]

Thanks for the heads up! Misconfigured the source in <iframe>. Interesting behavior.

[pretoriusdre]

Websites these days don't seem to use 'Under construction' animated gifs, and I think they are probably worse for it.

[assimpleaspossi]

The worse thing would be publishing an unfinished web site. That's why no one uses them anymore.

[smitelli]

According to MDN [1] there is a <portal> element but hell if I know what it does.

[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/po...

[epcoa]

While complexity of web tech means there's usually some hidden nuance, that description on MDN seems pretty clear: a non-interactive (other than for navigation) iframe, ie an <a> element that's a preview.

[assimpleaspossi]

Scroll to the bottom and you'll see that it must be enabled by the user, is experimental, and not listed in any HTML specification.

[bean-weevil]

Looks to me like it's intended as a link with preview, and part of the idea is that user agents could do a sort of animated transition morphing the preview into the content of the destination page.

[paulddraper]

It’s a non-interactive iframe.

(And experimental)

[Theodores]

Most people insist on only using one element, which is the element of last resort, according to MDN. This is our friend, the <div>.

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>.

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.

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.

[hellcow]

This is a great approach. Just to add to it, you can also use custom elements in lieu of classes, such as:

<my-product>...</my-product>

Any tag with a hyphen is considered a custom element, which is completely valid HTML -- even without defining the element in JS.

This gives you a more descriptive `div`, and then instead of classes like `product-primary`, you can use semantic attributes, like `<my-product primary size="large">`. In combination with CSS nesting, you can get some great looking HTML and CSS with minimal markup/visual noise and no build step.

[lelanthran]

> 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.

From a discussion on HN a few days ago, I bookmarked this: https://github.com/dbohdan/classless-css

For the most common types of front-end work one needs to do, classless CSS is enough.

[1718627440]

> 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>.

div > *:not(summary)

[alxeder]

do you have an example?

[assimpleaspossi]

>>Ah, now there's some breathing room, thanks to <br />.

That's XHTML which is XML. HTML does not use and does not need a closing slash and never has in any HTML specification.

https://html.spec.whatwg.org/dev/text-level-semantics.html#t...

[thiht]

I hate that XHTML went away. HTML parsing is terrible

[bornfreddy]

No <details> / <summary>? [0]

[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...

[adzm]

It's at the bottom by the dialog!

[1LCode]

I think there was at the bottom of the form? No? In the "click here" part.

[soheil]

Absolutely mind-boggling I didn't know progress and meter existed, I supposed progress has been made.

  <progress value="70" onmousemove="value=Math.random()*100" max="100"/>

[monroewalker]

It’d be cool to have a gutter on the left with the html tag that appears for that line

[assimpleaspossi]

Don't know which tag you are talking about but gutters are CSS, not HTML. If you want a gutter, add one with CSS.

[XCSme]

Weird that the URL links to the bottom of the page(?).

[wxw]

Sorry bout that, fixed! It was scrolling to the <iframe>.

[eduramirezh]

Cool! I got some "House of Leaves" vibes from it.

[shahzaibmushtaq]

Learned and also refreshed my HTML programming language (I'll not debate on it) knowledge without any touch of CSS.

[butz]

It would be useful if HTML content was not minified and have some comments added about each element besides them.

[noduerme]

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.

[rahkiin]

Indeed, <span> is for inline elements what <div> is for block elements: a way to organize and apply styling. With raw html/js it can also be used for targeting text changes.

[pastureofplenty]

I know it's deprecated but I was expecting to see <xmp>.

[mwcz]

It was so fun tossing that opening tag into a forum post and watching the whole forum disintegrate.

[assimpleaspossi]

<xmp> was made obsolete in HTML3.0 or 2.0 which was around 1995, I think. In any case, it was removed from version 4.0.

[alentred]

Wait. No <script> element? An elephant went missing!

[matchamatcha]

Look at the source.

[sylware]

great page, I discovered that my noscript/basic (x)html browser is doing more than I thought it did.

[kayvulpe]

An index would be great

[divbzero]

Disappointed to see <blink> or <marquee> merely mentioned but not used on that page, seemed like a serious omission.

Based on my tests just now, <blink> no longer blinks in today’s browsers but <marquee> still scrolls happily.

[assimpleaspossi]

Both have never been part of any HTML specification. See my comment elsewhere here.

[fsckboy]

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!" https://motherfuckingwebsite.com/

[joe8756438]

no marquee? c’mon

[assimpleaspossi]

Both <marquee> and <blink> have never been part of any HTML specification since the beginning of time except, in marquee's case, it was included in the current spec for the whole purpose of marking it as obsolete.

[ewrong]

Blink

[hinkley]

It’s a prank bro!

[nsonha]

...all of which have poor dx and ui. There isn't any philosophy or process behind "what should become a tag"

but hey, "use the platform"

[Oia20]

The soundbite was great lol!

Nice Work!