DEV Community

5 Unique HTML Elements You Might Not Know

Matin Imam on July 09, 2024

HTML offers a vast array of elements that can enhance the way you present content on the web. While most developers are familiar with standard tags...

Read full post

Massimo Artizzu • Jul 10

The <details> element has marked a very important milestone for native element interactivity: it's the first element that updates its attributes on user interaction. Specifically, the open attribute is there if and only if the element is, huh, open.

Why is it important? Because it has such dynamic behavior even without JavaScript. GitHub has used it to create modal dialogs that used to work without JavaScript.

Another interesting thing is that now <details> element can have a name, so that only one with the same name can be open, effectively mimicking the behavior of an (exclusive) accordion.

Now even the <dialog> element behaves the same with its open attribute, but it still needs JavaScript in order to be open (at least, until this proposal gets implemented).

Usman Khalil • Jul 11

Great insights, thank you

Nikola Perišić • Jul 9 • Edited

Wow, first time seeing "ruby" tag. Also, I would like to add one more which a lot of people are not aware of:



<pre>
First line
   Second line
</pre>

This code above will display like this:



First line
   Second line

Aad Pouw • Jul 12 • Edited

There is a lot you can do with the details/summary and together with it's own even listener 'toggle' but there is also something to keep in mind!
It is 'private shadow dom' and that means you cannot alter it like you do with a normal dom element.
Still, there are ways to get around with it and one of them is not to drop your content straight into the details element but to use a child container <details><summary></summary><div class="content">where you drop your content in</div></details>, this way you take your control over your content back to the dom.
Aside of that, there are more advanced things you can do but that has some css and javascript involved.

Ali nazari • Jul 9

Ruby tag sounds interesting 🧐

Martin Baun • Jul 9

Really handy article.

ducksauce88 • Jul 9 • Edited

Am I the only one who was so blind to see the first one "q" and see it as "p" and think, ah, thats not unique its used all the time haha. Cool article!

Massimo Artizzu • Jul 10

Almost! <q> is the "mirrored <p>", see?

There's also the upside-down <p>: it's the <b> tag!

To complete the schema, the W3C is working on the "mirrored upside-down <p>": the <d> tag! 🤪

ducksauce88 • Jul 10

Haha upside down p got me 🤣

MexiKode ⚙ • Jul 12

another cool one is <meter> to show progress or evaluate

Kiran Naragund • Jul 9

Here are some more:

HTML Tags You Might Not Know About

Kiran Naragund ・ May 23

#webdev #html #beginners #programming

Ayush Saran • Jul 9

Thanks, I didn't know the detail tag. That could come in handy

Akeem Jr Odebiyi • Jul 10

I never knew ruby tag existed 🥲

Himangshu De • Jul 13

I just came to know about the "details" tag before reading this article. Thi article just explained all the other tags including "details" tag very well!🔥

Highly appreciated for beginners and intermediaries!✌️