DEV Community

Cover image for 4 Non-Popular HTML Tags πŸ’»
Garvit Motwani for World In Dev

Posted on • Edited on

4 Non-Popular HTML Tags πŸ’»

Photo by XPS on Unsplash

HTML is an easy but vital markup language in the world of web development, everybody in the web dev field knows at least the basics of it, if not the whole language. So I'm going to tell you some non-popular tags that you should know about.

So let's get started!!

1. The progress Tag

The <progress> tag allows you to create progress bars using just HTML.

Check this:

<progress value="70" max="100">70%</progress>
Enter fullscreen mode Exit fullscreen mode

You just need to specify value and the max value which is mostly going to be 100

Result:

2. ins and del Tags

The <ins> tag defines a text that has been inserted into a document. It underlined by the browsers automatically.

The <del> tag defines a text that has been deleted from a document. Browsers usually strike a line through it.

Check this:

<p>The price of the new shirt is <del>$50</del> <ins>$25</ins>
<p>
Enter fullscreen mode Exit fullscreen mode

Result:

3. The details Tag

The <details> tag is pretty handy for large documentation, it allows us to view or hide elements after clicking on the <summary> element

Check this:

<details>
  <summary>DEV.to</summary>
  <p>DEV.to is a place where coders share, stay up-to-date and grow their careers. Cedits to dev.to for this line</p>
</details>
Enter fullscreen mode Exit fullscreen mode

4. The dialog Tag

The <dialog> tag defines a dialog box or subwindow. It also makes it easy to create popup dialogs and modals on a web page. You also have to use an attribute called open to specify that the dialog element is active and that the user can interact with it.

Check this:

<dialog open>Hola World! Garvit Here</dialog>
Enter fullscreen mode Exit fullscreen mode

⚑️ Giveaway ⚑️

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter


Thank you very much for reading this article.

Comment any non-popular tags you know

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter


Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Thank You

Top comments (6)

Collapse
 
mccurcio profile image
Matt Curcio

Great, I did not know about the progress bar. Thanks.

Collapse
 
victoreke profile image
Victor Eke

The details tag will be very useful. Thanks for sharing.

Collapse
 
garvitmotwani profile image
Garvit Motwani

Welcome Bro πŸ™

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Alucinado con algunos elementos html. Gracias por compartir.🧸

Collapse
 
virejdasani profile image
Virej Dasani

Can you post a new Discord link, this one has expired

Collapse
 
calinzbaenen profile image
Info Comment hidden by post author - thread only accessible via permalink
Calin Baenen

Why is progress not a void element? I don't see 70% used anywhere, unless I'm missing something.

Some comments have been hidden by the post's author - find out more