DEV Community

Cover image for 7 Cool HTML Elements Nobody Uses

7 Cool HTML Elements Nobody Uses

Tapajyoti Bose on October 02, 2022

Searching for cool HTML elements, especially if you don't know what you're looking for, is often like being thrown into a pile of garbage Don't ...
Collapse
 
oskargrosser profile image
Oskar Grosser

When talking about "elements nobody uses":
In point 2 you could have used the <dfn> Definition element to show what term you are explaining (the Pythagorean Theorem) instead of using the <strong> element.

Collapse
 
devangtomar profile image
Devang Tomar

These are really useful! Thanks for sharing 🙌

Collapse
 
dannystyleart profile image
Dániel Sebestyén

I have just refactored an app component that used infinite amount of divs and spans for displaying interactive elements on a map like image.
Using map and areas was a piece of cake and it became instantly accessible just by using semantically correct elements 🤘
The end result: removal of 800 lines of code and avoided using 2 libraries (gzipped ~210kb) just to solve a problem that is already solved 😁

Collapse
 
javico11 profile image
El Náufrago ॐ • Edited

Thanks for sharing!

Collapse
 
amircahyadi profile image
Amir-cahyadi

Useful 👍❤️

Collapse
 
toddpress profile image
Todd Pressley

great article! you know what else i don’t see much in the wild? the dialog element!

Collapse
 
junihh profile image
Junior Hernandez

That has a reason. MDN says that Safari adopted it in version 15.4 and Firefox in 98, while Chromium supports it since version 37. So support in all browsers started very recently. Due to the lack of support, it is not as popular. 😁

Collapse
 
baasmurdo profile image
BaasMurdo

I knew about most, but at the same time forgot about most 😅
Great post !

Collapse
 
josunlp profile image
Jonas Pfalzgraf
 You never stop learning, a really great post ^^
Enter fullscreen mode Exit fullscreen mode
Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Abbr is really cool to using!

Collapse
 
harvydenth profile image
HarvyDenth

Wow, I should definitely try it

Collapse
 
jthomp profile image
jthomp

Didn't know about <details>! Thanks for the post.

Collapse
 
gamerseo profile image
Gamerseo

It is worth paying attention to details to distinguish our website.

Collapse
 
tuenguyen2911_67 profile image
Tue

Saving!

Collapse
 
marcoboelling profile image
Marco Boelling

Nice ;)

Collapse
 
sajedsoliman profile image
sajedsoliman

Thank you so much for doing the dirty work for us ❤
This really helpful

Collapse
 
dlillard0 profile image
DLillard0

awesome

Collapse
 
tbm206 profile image
Taha Ben Masaud

A great post and really useful. Thanks

Collapse
 
thisismatt profile image
this-is-matt

Very nice! It was a great reminder.

Collapse
 
modelhusband01 profile image
Model Husband 👑

Thanks for sharing, they are useful 💯

Collapse
 
undeplus profile image
Marc • Edited

I Never did select again since datalist exist, one of thé best HTML components

Collapse
 
efecollins profile image
Efosa Collins EVBOWE

That datalist element would be my saviour

Collapse
 
anirseven profile image
Anirban Majumdar

Amazing thanks for sharing

Collapse
 
hacknetayush profile image
HackNetAyush

Meter, Map & Area are extremely useful! ❤

Collapse
 
maame-codes profile image
Maame Afia Fordjour

Great piece!

Collapse
 
nda profile image
Dmitry

Very helpful article. Thanks, Tapajyoti

Collapse
 
mobarakali profile image
Mobarak Ali

Nice Article!

Collapse
 
msiame1 profile image
msiame1

Very usful. Thanks for sharing!

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

There are a lot more tags in HTML that are rarely used. MDN lists a total of 114 current (not deprecated) tags. I'd say in general we probably only use a third of those at most.

To help, I made a tool to pick the most suitable HTML tag for any given purpose, all based off of a (quite complex) flowchart.

Collapse
 
julie_lewis_11d5eeebeddf7 profile image
Julie Lewis • Edited

<map> and <area> are never used for a reason. They are horrible for accessibility, and I would think difficult to make responsive. I don't think I have used an image map this century.

I'll be checking out <object> though.

Another one that people forget about is definition lists. <dl>,<dt>,<dd>. If you've ever wished you could nest block elements in a bulleted list - like when your content creators looove multi-sentence bullets - definition lists are for you.

Collapse
 
conorsheehan1 profile image
Conor Sheehan

Were you inspired by the trending post on r/programming a few days ago? reddit.com/r/programming/comments/...

Got some déjà vu reading this

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Not really. It was inspired by this: dev.to/eludadev/those-html-element...

Collapse
 
fontchangerguru profile image
fontchangerguru

I did some research and found this article dev.to/eludadev/those-html-element... it helped me to build fontchangerguru.com/creepy-text-ge... Thanks for recommendation.

Collapse
 
bartosz profile image
Bartosz Wójcik

Why you publish the same thing here and on Medium?

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

To grab more eyeballs

Collapse
 
bartosz profile image
Bartosz Wójcik

This is spam

Collapse
 
francoisaudic profile image
francoisaudic

What's about the accessibility of those elements ? How do they work with keyboard and screenreaders ?

Collapse
 
devsimc profile image
Simc Dev

You can check this out 24 tags also
cmsinstallation.blogspot.com/2021/...

Collapse
 
roelroel profile image
Roel de Brouwer

Why use images to demo html elements on a html-page?

Collapse
 
damienpirsy profile image
Matteo Vignoli

They are used so little that not even him uses them