Published on

9 simple HTML tags to avoid complex libraries

Useful HTML Tags

There are 142 HTML tags according to Mozilla Developer Network(MDN) and usually we are using few of them only, few of them we might not heard about. We are mostly rely on libraries to achieve different functionality which will increase our bundle size. so there are lot of functionality can be achieved using these HTML Tags which we are not aware of.

Here are few tags and there use cases -


Sometimes we might want to hide some content and allow users to reveal it manually, we can a achieve the described functionality with pure HTML.

Thanks to HTML5, HTML5 introduced the details and summary tags that can be used to create a pure HTML accordion


The blockquote tag specifies a section that is quoted from another source.

It is useful when we want to highlight some part of our articles.

Date Picker

HTML provides a input type="date" tag, that provides a nice UI with the option to select the dates by clicking on it.


A slider is a common component to collect user input in a specific numeric range.

You can use input type="range" to get a fully functional slider, where you can set the min, max, and current values

Color Picker

can use input type="color", which would otherwise be a time-consuming task to write from scratch.

Edit Content

The contenteditable attribute specifies whether the content of an element is editable or not.

<element contenteditable="true|false">

Progress Bar

To show progress bar you can use The progress tag.

Here is an example to do that -

To create dropdown we can use select tag and datalist html tag.

The difference between these two is when we use select we have to list all the options using option tag while if we do using datalist then we have to use input where we can enter our own input as well.


Tooltip is used to show extra or detailed information about any element.

We can use HTML built-in title attribute for that.