5 Unique HTML Elements You Might Not Know

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 like <div>, <p>, and <a>, there are some lesser-known elements that can be quite useful. Here are five unique HTML elements you might not know about:

1. <q></q> Tag

The <q> tag defines a short quotation. It’s perfect for including inline quotes within your text.

Here’s an example:

<q>Hi 👋, my name is Matin.</q>

Result⤵️

Hi 👋, my name is Matin.

2. <s></s> Tag

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or accurate.

Here’s an example:

<p>Old Price <s>100</s></p>
<p>New price 50</p>

Result⤵️

Old Price 100

New price 50

3. <mark></mark> Tag

The <mark> HTML element represents text that is marked or highlighted for reference or notation purposes due to its relevance in the enclosing context.

Here’s an example:

<p>Hi, you should <mark>Follow me</mark> for more amazing content. Thanks!</p>

Result⤵️

Hi, you should Follow me for more amazing content. Thanks!

4. <ruby></ruby> Tag

The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters.

Here’s an example:

<ruby>マティン <rp>(</rp><rt>Matin</rt><rp>)</rp></ruby>

Result⤵️

マティン (Matin)

5. <details></details> Tag

The <details> HTML element creates a disclosure widget where information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

Here’s an example:

<details open>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

Result⤵️

These unique HTML elements can be extremely helpful in specific scenarios, enhancing the semantic richness and functionality of your web content. Next time you’re building a webpage, consider incorporating these tags to improve the user experience and accessibility of your site.

---

Connect with Me

If you enjoyed this post and want to connect, feel free to reach out to me on LinkedIn. I'd love to connect and share more insights about software development!

Connect with me on LinkedIn

Comments

[Massimo Artizzu]

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]

Great insights, thank you

[Nikola Perišić]

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]

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]

Ruby tag sounds interesting 🧐

[Martin Baun]

Really handy article.

[ducksauce88]

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]

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]

Haha upside down p got me 🤣

[MexiKode ⚙]

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

[Kiran Naragund]

Here are some more:

HTML Tags You Might Not Know About

Kiran Naragund ・ May 23

#webdev #html #beginners #programming

[Ayush Saran]

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

[Akeem Jr Odebiyi]

I never knew ruby tag existed 🥲

[Himangshu De]

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!✌️

[zoujia]

Great👍I never heard about 1~4 😅. The 5th- is used in article comments of dev.to, and this was the first time I knew it's usage since I joined dev.to~

[Manjesh N]

Thanks for this info! I wasn't aware of most of the tags.

[Aladinyo]

Great these are interesting tags

[Chris Burks]

The <dialog> is my new favorite.
It’s “modals made easy”. However, I’m digging that <ruby>.
Thanks for sharing!!!