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