This is cool! I was actually wondering about how to make this work recently and obviously did a bad job of researching it because I didn't realise it already existed[0].

One place I'd love to see this is in a classless html framework. My experience is you always wind up wanting something like cards, and then either writing classes, or having a slightly magic "use these elements in this order" incantation[1].

It would be great to have a minimal framework that peppers in a couple elements of the kind <card>, <accordian> etc.

[0] I did ask an LLM at one stage too, and it also didn't mention this behaviour exists.

[1] pico css does this.for.example for cards/accordians

I learned this back when HTML5 was brand new around 15-ish years ago. If you wanted to use the new tags like <article>, the only “polyfill” needed was some css styles. You can see it in the early versions of the HTML5 Boilerplate:

https://github.com/h5bp/html5-boilerplate/blob/v0.9/css/styl...

I realized that I could just make up tags and style them and it was work.

I find this fun and whimsical, but surely it’s an accessibility nightmare.

I was there like fifteen - twenty years ago before the hyphen standard and shadow dom and all that when JS libraries briefly leaned into just making up their own elements. I think everyone collectively agreed that it was a bad idea and it fell out of popularity.

If I were going to use them, I'd be inclined to vendor them just to prevent any sort of collision proactively

    <donatj-fancy-element>
        <donatj-input />
    </donatj-fancy-element>

My problem with custom tags is that they require a hyphen, and that makes it impossible to have consistency between tag names and variable names.

With classes, I can do:

    carList = document.querySelector('.carList')

With custom tags, that is not possible because variable names cannot have hyphens in them.

Huh. That led me to wonder whether anyone has created CSS for DocBook, and it appears it exists.

http://www.badgers-in-foil.co.uk/projects/docbook-css/

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.

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.

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.