Lesser-known HTML tags

In this article, we are going to see some of the lesser-known HTML tags, which are not used commonly but will definitely come in handy.

The tags discussed in this article are,

  1. dialog
  2. time
  3. progress
  4. summary
  5. small
  6. datalist
  7. details

<DIALOG>

The <dialog> tag defines a dialog box or subwindow. The <dialog> element makes it easy to create popup dialogs and modals on a web page.

And the output of this tag will be like this.

dialog tag output

<time>

The next tag is the <time> tag. The time tag defines a human readable date/time format. It does not render anything as special.


<progress>

The progress tag can be used to show the percentage of completion of a task, usually a download. Given a value and a max value the progress bar appears accordingly.

progress tag in html

The output of this tag is,

progress bar 25/100

<summary>

The summary tag can be used as a visible heading for the details element. The heading can be used to view/hide the details.

summary tag

The output of this code is,


<small>

The small tag is used to define texts smaller than the normal text.

small tag

The output of this code is,


<datalist>

The datalist tag defines the list of valid choices for our input.

datalist tag

The output of the above code is,

data list

The options in the datalist are available in our input. Make sure to give an id name to the datalist and include it in your input field by specifying the value of the list to the value of the id of datalist.


<details>

The details tag specifies additional elements that the user can hide or view on demand. The elements under these tags are hidden by default. Clicking on the expand icon displays the content.

details tag in html

The output of the above code is,

expanded view

Hope this article was useful.

Happy coding !