DEV Community

Cover image for 4 Non-Popular HTML Tags 💻
Garvit Motwani for World In Dev

Posted on • Edited on

52 20

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

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

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
Calin Baenen
Comment hidden by post author

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

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay