Matin Imam

Posted on Jul 9 • Edited on Jul 12

5 Unique HTML Elements You Might Not Know

#webdev #beginners #html #frontend

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

Top comments (26)

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!