Html Tags for frontend developers

Some web developers doesn't have enough time to check some useful html tags that can save us time in our applications.

1. Datalist
The "datalist" html element provides an autocomplete interface for "input" elements. It contains a set of elements that have an associated value.

datalist resource

2. Details
The accordions are very common UI element in websites or applications when we need to show lot of data, such as a questions page. By using the "details" element alongside "summary", we can achieve the same effect without JavaScript. Clicking the summary will toggle the rest of the content.

details resource

3. ColorPicker
When we want to add a colorPicker element, most of time we have implemented it with a Javascript library or Jquery (a little bit faster). In html we can use this type of input (type="color") to provide a user interface element that lets a user specify a color.

input color resource

4. Progress
One of the more surprised for me is the "progress" element. It displays an indicator showing the completion progress of a task.

progress bar resource