5 Unique HTML Elements You Might Not Know
#webdev#beginners#html#frontend
Matin Imam

Matin Imam @matin676

About: Aspiring full stack web developer dedicated to designing scalable web applications and a strong foundation in modern web development technologies.

Location:
India
Joined:
Jul 6, 2024

5 Unique HTML Elements You Might Not Know

Publish Date: Jul 9 '24
175 27

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Result⤵️

Details HTML Tag

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 Medium. I'd love to connect and share more insights about software development!

Follow me on Medium

Comments 27 total

  • Ayush Saran
    Ayush SaranJul 9, 2024

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

  • Nikola Perišić
    Nikola PerišićJul 9, 2024

    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>
    Enter fullscreen mode Exit fullscreen mode

    This code above will display like this:

    

First line
   Second line
    Enter fullscreen mode Exit fullscreen mode

  • Ali nazari
    Ali nazariJul 9, 2024

    Ruby tag sounds interesting 🧐

  • Kiran Naragund
    Kiran NaragundJul 9, 2024

    Here are some more:

    dev_kiran

    HTML Tags You Might Not Know About

    Kiran Naragund ・ May 23

    #webdev #html #beginners #programming
  • Martin Baun
    Martin BaunJul 9, 2024

    Really handy article.

  • Isaac Klutse
    Isaac KlutseJul 9, 2024

    The ruby and details tag got me, interesting I will try my best to include them in my next project. Thanks for sharing.

  • Aladinyo
    AladinyoJul 9, 2024

    Great these are interesting tags

  • Syed Muhammad Ali Raza
    Syed Muhammad Ali RazaJul 9, 2024

    dont know about
    Thanks for sharing

  • Syed Muhammad Ali Raza
    Syed Muhammad Ali RazaJul 9, 2024

    Thanks for sharing dont know about

  • ducksauce88
    ducksauce88Jul 9, 2024

    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
      Massimo ArtizzuJul 10, 2024

      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! 🤪

  • MsM Robin
    MsM RobinJul 10, 2024

    Thanks for sharing.

  • Ritesh Rajput
    Ritesh RajputJul 10, 2024

    yeah it to get first time to know about this

  • zoujia
    zoujiaJul 10, 2024

    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~

  • Rajan Prajapati
    Rajan PrajapatiJul 10, 2024

    Yahh !
    Sir u are providing such a handy and useful knowledge

  • Akeem Jr Odebiyi
    Akeem Jr OdebiyiJul 10, 2024

    I never knew ruby tag existed 🥲

  • Massimo Artizzu
    Massimo ArtizzuJul 10, 2024

    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).

  • Chris Burks
    Chris BurksJul 12, 2024

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

  • Manjesh N
    Manjesh NJul 12, 2024

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

  • Aad Pouw
    Aad PouwJul 12, 2024

    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.

  • MexiKode ⚙
    MexiKode ⚙Jul 12, 2024

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

  • Godbless Nyagawa
    Godbless Nyagawa Jul 13, 2024

    Good insight!

  • Himangshu De
    Himangshu DeJul 13, 2024

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

  • chat gpt gratuit français
    chat gpt gratuit françaisJul 14, 2024

    thx !

Add comment