Over time we got used to HTML and CSS. Also, we tend to underestimate HTML powers. I like to say that HTML is more than markup language. Once we unlock the power of HTML we will be surprised how much we can do by using pure HTML. Following are HTML tags that we should use. A lot of those have some polyfills in the form of JavaScript. Even though those js plugins are useful, we don’t always need to use them. Most of the time it is overkill and a lot of additional code we don’t need.
The number of HTML tags
According to devpractival there are 142 HTML tags on MDN, which is a lot. Of course, not all of those are in use, some of them are obsolete, but still. How many of them are we using?
Power of HTML input tags
When we speak about <input /> tag, we normally think about <input type="text"/>, or <input type="date"/>, sometimes <input type="number"/>, and <input type="email"/>. But, there is much more to <input/> than this. There are 22 different types of <input/>.
See the Pen by Amer Sikira (@amersikira) on CodePen.
HTML progress tag
I am pretty active on Twitter, and I often see on my timeline (because 99% of my friends are tech Twitter) code snippets. You can’t imagine how many times I saw someone share a progress tag and a lot of people goes crazy like: “does this really exist?”, “I’ve been living under, rock”, etc.
HTML progress tag can be used to present progress or loading. If we use <progress></progress> without any attributes, it acts as loading.
See the Pen Progress tag by Amer Sikira (@amersikira) on CodePen.
HTML datalist tag
Ever needed auto-complete? This is it. The <datalist></datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
See the Pen Datalist tag by Amer Sikira (@amersikira) on CodePen.
HTML meter tag
The <meter> HTML element represents either a scalar value within a known range or a fractional value. It’s similar to <progress> tag, but while <progress> is used to present value that might change and will progress or regress, <meter> is used to present stable data (measurement). We can change color of <meter> by using low, high and optimum attributes, as shown in CodePen.
See the Pen Meter tag by Amer Sikira (@amersikira) on CodePen.
HTML template tag
The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
This technique is used by a lot of page builders. When using templates we can separate JavaScript and HTML code, which is great. HTML code inside JS tends to be pretty cluttered.
See the Pen Template tag by Amer Sikira (@amersikira) on CodePen.
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like The power of JavaScript slice method