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
summary tags that can be used to create a pure HTML accordion
blockquote tag specifies a section that is quoted from another source.
It is useful when we want to highlight some part of our articles.
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
input type="color", which would otherwise be a time-consuming task to write from scratch.
contenteditable attribute specifies whether the content of an element is editable or not.
To show progress bar you can use The
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.