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
A <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, value and 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 min, max, low, high, 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.
<datalist> id attribute should be equal to the list attribute of <input> element to join them together.
<label for="language">Select your favorite language</label>
<input list="languages" name="language">
<datalist id="languages">
<option value="JavaScript">
<option value="Python">
<option value="Java">
<option value="Go">
<option value="Rust">
</datalist>
<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 <dt> and <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
<noscript> tag is used to show alternate content to the users who have disabled JavaScript in their browser or if the JavaScript is not supported by their browser.
<noscript>Please enable JavaScript to see the content!</noscript>Above this line a noscript tag is inserted, if you disable the JavaScript you will be able to see that line.
<noscript> tag can be used inside the head and the body tags.
There are a few more tags like → <picture>, <map>, <output>, <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.
@dev_apt
