You can make up HTML tags

Posted by todsacerdoti 12/29/2025

584 points | 190 commentspage 4

ngc6677 12/29/2025|

Can check out the DOM of https://radio4000.com to see how custom-elements and web-components can be used to describe the entire app (and allow custom themes, and more) (source: https://github.com/radio4000/components) — no css class, full description of the app's state via html attributes (reflected in styles)

gkoberger 12/29/2025||

I probably wouldn't do this for a lot of reasons.

That being said, if you read through that post and were intrigued, you might also like custom web components: https://web.dev/articles/custom-elements-v1

It's a simple way to add more to your "made up" HTML tags. So you could have a tag called <my-code>, for example, that automatically has a copy button and syntax highlights the code.

hollowturtle 12/29/2025||

> If you include hyphens in the name, you can guarantee that your tag won’t appear in any future versions of HTML.

Which future version? Is there something I'm missing? I'd like to have html6 that has feature parity with native, but I'm afraid we got html5 and just stopped there. And if there will be an html6 why can't we just state "use version 5 in this document" so there won't be any name clashing between supported and custom tags?

reddalo 12/29/2025||

HTML 5 still gets new features all the time: https://github.com/whatwg/html

But they'll never add new standard tags with hyphens.

bazoom42 12/29/2025||

> but I'm afraid we got html5 and just stopped there.

They dropped numbered versions. Now it is just HTML which is continuously evolved in a backwards-compatible manner.

> And if there will be an html6 why can't we just state "use version 5 in this document"

Because browser vendors are opposed to explicit versioning, since it introduces multiple rendering modes.

callc 12/29/2025||

Wow, this is great, unlocks lots of freedom. I was under the impression that this was not possible, maybe through web components or <slot>.

As a side note, I’ve been going through all the HTML elements slowly to learn the fundamentals, and it turns out that lots of elements are just a <div> or <span>, with different default styles and default ARIA things.

And a <div> is just a <span> with display block…

This and TFA both help me to realize HTML is pretty darn simple.

pests 12/29/2025||

> And a <div> is just a <span> with display block…

It's a bit more subtle than that. HTML5 defines "Content Models", two of which are 'Phasing Content' and 'Flow Content'. Phasing Content can only contain text and text-like tags (em, strong, bold) whereas Flow Content can contain anything.

Technically <span> is defined as accepting Phrasing Content and <div> accepts Flow Content. Changing this with CSS doesn't change the content model.

Although browsers are very forgiving so it all works anyways and this is very in the deep end, I can't think of the last time I've consciously thought of this stuff.

https://html.spec.whatwg.org/#the-span-element

https://html.spec.whatwg.org/#the-div-element

https://html.spec.whatwg.org/#content-models

Kuyawa 12/29/2025||

Been doing this for over twenty years now

  <invoice> <avatar> <dice> <card> <view> <toolbar>

You name it, it works wonders and make my life easier. Of course I am a lone developer so I don't care.

You can check in this demo some custom tags used sparingly https://my.adminix.app/demo

mrbluecoat 12/29/2025||

11 year old example (but still funny): https://github.com/ebidel/html5demos/blob/master/html5-demos...

rorylaitila 12/29/2025||

It's one of my favorite little tricks. I use it when I'm building applications that have a lot of nested "contexts" and its not just styling/layout. Makes it easier to search for and jump to these contexts and mentally parse them. But I use it sparingly. It gets out of hand fast if you start doing <parent-nested-2ndchild-list-item>.

ycombiredd 12/29/2025||

As someone who writes html only rarely (I'm more of a "backend" guy, and even use that term loosely.. most of my webdev experience dates back to the CGI days and often the html was spat out by Perl scripts) and usually in vim, I am pleased to know there is an in-built solution outside of me properly indenting or manually counting divs. Thanks for enlightening me.

wging 12/29/2025|

A more common alternative to counting divs would be CSS classnames or (for unique elements on the page) IDs. You'd do `document.querySelector('.my-class')` to locate `<div class="my-class">` or similar, rather than using the fact that e.g. something is nested 3 divs inside <body>.

Even if this custom element trick didn't work, I don't see why one would need to count divs (at least if you control the markup, but if not then made-up tags aren't an option anyway). The article even mentions using class names as an option.

ycombiredd 12/29/2025||

Sorry, I didn't mention class names because the article explicitly did and I assumed that my aversion to the extra typing would be presumed by a reader of my comment. My mistake.

So yeah, I guess what wasn't obvious from my statement of gratitude was that I appreciate knowing that there is a more concise way of keeping track - even without CSS styling. If I make up tags, they will just inherit default styling but to my eye I can be clear about where things are closed, and where to insert things later. I was talking about the manual editing (in vim, as I mentioned), rather than any dynamic query selectors. Make more sense?

GuB-42 12/29/2025||

You can, but maybe you shouldn't.

If, for some reason the CSS doesn't load, your site may break completely instead of degrading gracefully. Maybe it will mess with people who have an unusual browser configuration too. It may look nice on your side, but on the user side, I only see disadvantages. It may look like it saves a few bytes, but with compression, it may not.

barishnamazov 12/29/2025|

I'd like to share Shoelace [0], a library of nice web components I used long ago for some websites. It's now part of Web Awesome (a company behind Font Awesome), though it seems like the original author, Cory, is still working on it.

[0] https://shoelace.style/

More comments...