DEV Community

loading...
Cover image for What HTML tag do you wish existed?

What HTML tag do you wish existed?

kallmanation profile image Nathan Kallman ・1 min read

Cover photo by Lennart Jönsson on Unsplash


What's a tag that would make your web designs so much easier to implement if only it existed? (or maybe it exists but just isn't supported well enough)

Discussion (10)

pic
Editor guide
Collapse
yujiri8 profile image
Ryan Westlund

<dialog>. I would so love to ditch the mwc-dialog I'm using for a native component, but fricking Safari doesn't support it.

Also a switch would be nice, would cut another dependency for me.

Collapse
vtrpldn profile image
Vitor Paladini

A <checkbox> or <radio>.

I know that there are input tags for that but they are so unnecessarily hard to style that I'd love some specifically built, easy to customize tags.

Collapse
kallmanation profile image
Nathan Kallman Author

They are unnecessarily hard to style! I basically just hide the whole input and use CSS to show my own thing; I wrote a pair of articles on how to do just that:


Collapse
vtrpldn profile image
Vitor Paladini

Great job! That styling hack actually forces you to learn a lot of CSS techniques so there might be a silver lining for checkbox and inputs being the way they are 😄

Collapse
kallmanation profile image
Nathan Kallman Author

For me, I wish there was some sort of details-group (either through name-ish attributes or an actual tag surrounding the group) that made the excellent <details> tag work like a radio group instead of checkboxes (i.e. opening one closes all others in the group).

This would make designing an accordion where only one element is open at a time so much easier.

I think it could also be used for a tab system. And maybe other things I'm not thinking of?

Collapse
jfbrennan profile image
Jordan Brennan

Yeah! I was just thinking the same thing when working on an accordion (m-docs.org/accordion#open), but it's just so simple I settled w/o having it.

Collapse
allenmiller304 profile image
Allen Miller • Edited

Html now is extendable, you can create a new tag by a simple css, like

CSS:
box { Border: 1px solid black }

Html:
< box >Test</ box >

And if you use JSX with Typescript, you can do fancy things

Collapse
kallmanation profile image
Nathan Kallman Author • Edited
  1. I'm aware I can put basically anything in a tag and browsers will simply treat it like a div if they don't recognize it.
  2. I'm also aware of HTML custom elements which allows expanding on point 1 to the nth degree using JS.
  3. And yes, JSX used in React or most other rendering frameworks lets me code a page as though I've extended HTML to have all sorts of fancy tags.

None of those things are the point of my question; I'm making a wishlist of native, agreed upon, standardized HTML tags.

Collapse
allenmiller304 profile image
Allen Miller

Oh sorry, I misunderstood the original question 😊
Ideally, I would love if the browser simplifies 3D so more developers can start exploring that area and introduce 3d UI that can be used in business apps.
I found this link on the internet a few years ago, someone made 1 million characters on a web page presented at the same time in 3d

alteredqualia.com/xg/examples/text...

The amount of content on the page, and the render performance slow hardware, is just stunning!

Thread Thread
kallmanation profile image
Nathan Kallman Author

Yeah! Having more accessible 3D elements would help a lot with making web pages work well in things like VR and AR