HTML is a markup language that powers the web. In HTML5 so many things were added and improved. But there are certain HTML tags that are rarely used or are not known to many.
In this article, we're going to see 10 useful HTML tags that are seldom used by many people and these tags could be handy in certain situations.
10 HTML tags to know
1. dialog tag
We can create a simple and good-looking dialog box with just one line of HTML code. Using
<dialog> tag with
open attribute, a nice centered dialog box can be created.
<dialog open>Hello world</dialog>
<dialog> tag supports all global and event attributes. We can use
dialog box to notify users like an alert.
Note: Dialog tag has low support in Firefox and Safari browsers.
2. progress tag
<progress> tag is used to indicate the progress of a task. This looks similar to the progress bars that we see while downloading files.
<progress> tag has two attributes,
max. The default value of
max attribute is 1 and
value attribute represents the fraction of the
max value, nothing but progress.
<label for="file">Download status</label> <br /> <progress id="file" value="45" max="100">45%</progress>
In the above code snippet, when we make the value of
value attribute to 0.45 and omit max, the result remains the same. We can use
label tag to improve accessibility.
<progress> also supports all global and event attributes.
There's another tag similar to
<progress> and we'll see it in the next section.
3. meter tag
<meter> tag is just similar to
<progress> tag, but the meter tag is used to indicate the measurements or measuring units making it more semantical.
<meter> tag has various attributes like
value etc for indicating the progress bar.
<!-- Indicating the pH level --> <label for="ph">pH level</label> <br> <meter id="ph" value="7" min="0" max="14">7</meter><br>
<meter> tag also supports all global and event attributes.
4. fieldset tag
<filedset> tag is generally used to group related items together in a form and it draws a nice border around those related items.
<fieldset> <legend>User details</legend> <label for="name">Name</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email</label> <input type="email" id="email" name="email"><br> </fieldset>
<legend> tag is used to give the display name to that fieldset border.
<fieldset> tag has a
disabled attribute for disabling the input elements inside the fieldset. It also supports all global and event attributes.
5. datalist tag
<datalist> tag is used to specify predefined options for an
input element with autocomplete and dropdown features.
id attribute should be equal to the
list attribute of
<input> element to join them together.
<datalist> also supports all global and event attributes.
6. details tag
<details> tag is used to provide additional details for a piece of text like an accordion. The additional details can be toggled easily.
<summary> tag is used to display the visible text for the details. By default, it is closed and using
open attribute we can make it open on the first time load.
<details> <summary>What is internet?</summary> <p>Internet is a global connection of inter connected computer networks.</p> </details>
What is internet?
Internet is a global connection of inter-connected computer networks.
<details> tag supports all global and event attributes
7. description list tag
<dl> is called a description list tag. It is along with
<dd> are used to show a description list.
<dt> defines the description term and
<dd> give the description of that term.
<dl> <dt>MERN</dt> <dd>MongoDB, Express, React and Node</dd> <dt>MEAN</dt> <dd>MongoDB, Express, Angular and Node</dd> </dl>
<dl> tag supports all the global and even attributes.
8. var tag
<var> tag is used to represent the variables in a mathematical expression just like how we see in the printed books.
<p>The area of a circle of radius <var>r</var> is represented by π<var>r</var><sup>2</sup></p>
The area of a circle of radius r is represented by πr2
The default style applied to
<var> tag is italic and it supports all global and event attributes.
9. mark tag
<mark> tag is used to mark or highlight a piece of text in HTML.
<p>HTML is a <mark>markup</mark> language, not a programming language.</p>
HTML is a markup language, not a programming language.
<mark> tag also supports all the global attributes.
10. noscript tag
Above this line a
<noscript> tag can be used inside the head and the body tags.
There are a few more tags like →
<template> etc. You can start looking into them and use whatever is apt for your work.
🔭 For a live demonstration of these HTML tags, you can check this codepen link.
That's is all about the less often used HTML tags, you should know about.