6 HTML underrated tags


The HTML language can do some things that may seem like they are done by external libraries. However, these underrated tags, are easy to implement and might save the day when we need them.

So, here we go.

6 HTML underrated tags

1. Color Picker

Color Picker let you choose your own color. I added a codepen so that you’ll see it in action when a value is added to set a default color. Otherwise, the default color is #000000. You can see the code pen here.

underrated tags
underrated tags

2. Title Tooltip

An excellent easy way to do a tooltip over text is by just specifying the title attribute. Hovering the text below that says “This is a Tooltip” will pop up a text.
To do this I used the following code:

<a href=”you_just_Hovered_me”> This is a Tooltip</a>

3. Data List

This is by far the one that I use the most when it comes to creating a form. The <datalist> tag is used to give an autocomplete feature for <input> elements. You can see a drop-down list of pre-defined options as you type. I also prepared a codepen that helps you understand this. View it in action here.

4. Dropdown List

The dropdown list is one of my favorites to build a Form. It is pretty similar to <datalist>, having the difference that you give a prebuilt list for the user to choose from. I also wrote a simple code snippet here that could give you an idea of what’s all about. Check it out here.

drop-down list in HTML

5. Accordion without JavaScript

The accordion is a good choice if the browser you want to use has no JavaScript (like this one) or for testing purposes or if you just want to use it without adding JavaScript. Comparing to <datalist> we will add a <summary> tag to it. By default, the accordion is closed. To see an example go to this link.

Foods: Enter here your content
Cars: Enter here your content
accordion in HTML

6. Download tag.

By specifying a download attribute, the target (the URL specified in the href attribute) will be downloaded after the user clicks on the link.

Conclusion.

There are a few HTML-only things we discussed here that might save you time and help you avoid having to incorporate CSS and JavaScript into your code.

Thank you for taking the time to read this. I hope you found it useful.
What did you think about these tips? Were any of them new to you?
You can find me on Twitter and LinkedIn where I hang out most of the time.