HTML is definitely the first language a web developer learns early in his or her career. But in addition to its emblematic tags HTML5 offers us a number of tags that could save you many hours of work.
In this article, I’m here to show you some tags that are definitely underused but might come in handy
01. Details
Details is a very quick and easy way to create a kind of accordion very quickly.
Clicking on the ‘Accordion Title 1’ in fact opens the tag and we can view all the content within it, convenient isn’t it?
See the Pen Accordion with HTML by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
02. Mark
Do you need to highlight text in a simple way?
Tag mark is exactly for you, by default it highlights the text with classic yellow, like a highlighter… but you can customize it exactly as you like with a few lines of css 😉
See the Pen Mark Tag by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
03. Meter
The Meter tag defines a completion bar within a known unit or measure Meter can be very useful and straightforward, I’ll leave you with a list of some attributes that may suit you:
- Value: Si riferisce al valore numerico corrente. Deve essere compreso tra il valore minimo e massimo.
- Min: È il limite numerico inferiore dell’intervallo misurato. Deve essere inferiore al valore massimo, se menzionato.
- Max: È il limite numerico superiore dell’intervallo misurato. Deve essere maggiore del valore minimo, se menzionato.
- Low: Si riferisce al limite numerico superiore dell’intervallo misurato inferiore.
- High: Si riferisce al limite numerico inferiore dell’intervallo misurato di fascia alta.
- Optimum: Indica l’intervallo numerico ottimale.
See the Pen Meter Tag by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
04. Input type: Data
A ready-to-use calendar input, but really! Well yes, basic html offers you that too! A date input ready to be used in your forms 😀
See the Pen Input type Date by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
05. INS e DEL
How many times have you found yourself needing to cross out text or underline it by default and resorted to some css? Well, you could have done it even with a simple html tag, after all html is semantic code 😛
Admit it, even you would have created it with css… but why complicate your life?
See the Pen Ins e Del by MirkoDev (@mirkodeveloper-the-bold) on CodePen.