<p>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.&nbsp;</p>
<p>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.&nbsp;</p>
<h2 style="text-align: center;">10 HTML tags to know</h2>
<h3>1. dialog tag</h3>
<p>We can create a simple and good-looking dialog box with just one line of HTML code. Using <code>&lt;dialog&gt;</code> tag with <code>open</code> attribute, a nice centered dialog box can be created.&nbsp;</p>
<pre class="language-markup"><code>&lt;dialog open&gt;Hello world&lt;/dialog&gt;</code></pre>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://res.cloudinary.com/cloudtale/image/upload/v1642781017/devapt/dialog-tag-html.jpg" alt="dialog-html-tag" width="400" height="62" /></p>
<p><code>&lt;dialog&gt;</code> tag supports all global and event attributes. We can use <code>dialog</code> box to notify users like an alert.&nbsp;</p>
<p><strong>Note:</strong> <em>Dialog tag has low support in Firefox and Safari browsers.&nbsp;</em></p>
<h3>2. progress tag</h3>
<p>A <code>&lt;progress&gt;</code> tag is used to indicate the progress of a task. This looks similar to the progress bars that we see while downloading files.&nbsp;</p>
<p><code>&lt;progress&gt;</code> tag has two attributes, <code>value</code> and <code>max</code>. The default value of <code>max</code> attribute is 1 and <code>value</code> attribute represents the fraction of the <code>max</code> value, nothing but progress.</p>
<pre class="language-markup"><code>&lt;label for="file"&gt;Download status&lt;/label&gt; &lt;br /&gt;
&lt;progress id="file" value="45" max="100"&gt;45%&lt;/progress&gt;</code></pre>
<p style="text-align: center;"><label for="file">Download status</label> <br /><progress id="file" value="45" max="100">45%</progress></p>
<p style="text-align: left;">In the above code snippet, when we make the value of <code>value</code> attribute to 0.45 and omit max, the result remains the same. We can use <code>label</code> tag to improve accessibility.&nbsp;</p>
<p style="text-align: left;"><code>&lt;progress&gt;</code> also supports all global and event attributes.&nbsp;</p>
<p style="text-align: left;">There's another tag similar to <code>&lt;progress&gt;</code> and we'll see it in the next section.</p>
<h3 style="text-align: left;">3. meter tag</h3>
<p><code>&lt;meter&gt;</code> tag is just similar to <code>&lt;progress&gt;</code> tag, but the meter tag is used to indicate the measurements or measuring units making it more semantical.&nbsp;</p>
<p><code>&lt;meter&gt;</code> tag has various attributes like <code>min</code>, <code>max</code>, <code>low</code>, <code>high</code>, <code>value</code> etc for indicating the progress bar.</p>
<pre class="language-markup"><code>&lt;!-- Indicating the pH level --&gt;
&lt;label for="ph"&gt;pH level&lt;/label&gt; &lt;br&gt;
&lt;meter id="ph" value="7" min="0" max="14"&gt;7&lt;/meter&gt;&lt;br&gt;</code></pre>
<p style="text-align: center;"><label for="ph">pH level</label> <br /><meter id="ph" value="7" min="0" max="14">7</meter></p>
<p><code>&lt;meter&gt;</code> tag also supports all global and event attributes.&nbsp;</p>
<h3>4. fieldset tag</h3>
<p><code>&lt;filedset&gt;</code> tag is generally used to group related items together in a form and it draws a nice border around those related items.&nbsp;</p>
<pre class="language-markup"><code>&lt;fieldset&gt;
  &lt;legend&gt;User details&lt;/legend&gt;
  &lt;label for="name"&gt;Name&lt;/label&gt;
  &lt;input type="text" id="name" name="name"&gt;&lt;br&gt;&lt;br&gt;
  &lt;label for="email"&gt;Email&lt;/label&gt;
  &lt;input type="email" id="email" name="email"&gt;&lt;br&gt;
&lt;/fieldset&gt;</code></pre>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://res.cloudinary.com/cloudtale/image/upload/v1642784976/devapt/fieldset-html-tag.jpg" alt="fieldset-html-tag" width="500" height="110" /></p>
<p><code>&lt;legend&gt;</code> tag is used to give the display name to that fieldset border.</p>
<p><code>&lt;fieldset&gt;</code> tag has a <code>disabled</code> attribute for disabling the input elements inside the fieldset. It also supports all global and event attributes.</p>
<h3>5. datalist tag</h3>
<p><code>&lt;datalist&gt;</code> tag is used to specify predefined options for an <code>input</code> element with autocomplete and dropdown features.&nbsp;</p>
<p><code>&lt;datalist&gt;</code> <code>id</code> attribute should be equal to the <code>list</code> attribute of <code>&lt;input&gt;</code> element to join them together.</p>
<pre class="language-markup"><code>&lt;label for="language"&gt;Select your favorite language&lt;/label&gt;
&lt;input list="languages" name="language"&gt;

&lt;datalist id="languages"&gt;
  &lt;option value="JavaScript"&gt;
  &lt;option value="Python"&gt;
  &lt;option value="Java"&gt;
  &lt;option value="Go"&gt;
  &lt;option value="Rust"&gt;
&lt;/datalist&gt;</code></pre>
<p style="text-align: center;"><label for="language">Select your favorite language</label> <input list="languages" name="language" type="text" />
<datalist id="languages">
<option value="JavaScript"></option>
<option value="Python"></option>
<option value="Java"></option>
<option value="Go"></option>
<option value="Rust"></option>
</datalist>
</p>
<p><code>&lt;datalist&gt;</code> also supports all global and event attributes.</p>
<h3>6. details tag</h3>
<p><code>&lt;details&gt;</code> tag is used to provide additional details for a piece of text like an accordion. The additional details can be toggled easily.&nbsp;</p>
<p><code>&lt;summary&gt;</code> tag is used to display the visible text for the details. By default, it is closed and using <code>open</code> attribute we can make it open on the first time load.</p>
<pre class="language-markup"><code>&lt;details&gt;
  &lt;summary&gt;What is internet?&lt;/summary&gt;
  &lt;p&gt;Internet is a global connection of inter connected computer networks.&lt;/p&gt;
&lt;/details&gt;</code></pre>
<details>
<summary>What is internet?</summary>
<p>Internet is a global connection of inter-connected computer networks.</p>
</details>
<p><code>&lt;details&gt;</code> tag supports all global and event attributes</p>
<h3>7. description list tag</h3>
<p><code>&lt;dl&gt;</code> is called a description list tag. It is along with <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> are used to show a description list.&nbsp;</p>
<p><code>&lt;dt&gt;</code> defines the description term and <code>&lt;dd&gt;</code> give the description of that term.</p>
<pre class="language-markup"><code>&lt;dl&gt;
  &lt;dt&gt;MERN&lt;/dt&gt;
  &lt;dd&gt;MongoDB, Express, React and Node&lt;/dd&gt;
  &lt;dt&gt;MEAN&lt;/dt&gt;
  &lt;dd&gt;MongoDB, Express, Angular and Node&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://res.cloudinary.com/cloudtale/image/upload/v1642787622/devapt/description-list-html-tag.jpg" alt="description-list-html-tag" width="300" height="90" /></p>
<p><code>&lt;dl&gt;</code> tag supports all the global and even attributes.&nbsp;</p>
<h3>8. var tag</h3>
<p><code>&lt;var&gt;</code> tag is used to represent the variables in a mathematical expression just like how we see in the printed books.&nbsp;</p>
<pre class="language-markup"><code>&lt;p&gt;The area of a circle of radius &lt;var&gt;r&lt;/var&gt; is represented by &amp;pi;&lt;var&gt;r&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt;&lt;/p&gt;</code></pre>
<p>The area of a circle of radius <var>r</var> is represented by &pi;<var>r</var><sup>2</sup></p>
<p>The default style applied to <code>&lt;var&gt;</code> tag is italic and it supports all global and event attributes.</p>
<h3>9. mark tag</h3>
<p><code>&lt;mark&gt;</code> tag is used to mark or highlight a piece of text in HTML.</p>
<pre class="language-markup"><code>&lt;p&gt;HTML is a &lt;mark&gt;markup&lt;/mark&gt; language, not a programming language.&lt;/p&gt;</code></pre>
<p>HTML is a <mark>markup</mark> language, not a programming language.</p>
<p><code>&lt;mark&gt;</code> tag also supports all the global attributes.</p>
<h3>10. noscript tag</h3>
<p><code>&lt;noscript&gt;</code> 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.&nbsp;</p>
<pre class="language-markup"><code>&lt;noscript&gt;Please enable JavaScript to see the content!&lt;/noscript&gt;</code></pre>
<noscript>Please enable JavaScript to see the content!</noscript>
<p>Above this line a <code>noscript</code> tag is inserted, if you disable the JavaScript you will be able to see that line.</p>
<p><code>&lt;noscript&gt;</code> tag can be used inside the head and the body tags.</p>
<p>There are a few more tags like &rarr; <code>&lt;picture&gt;</code>, <code>&lt;map&gt;</code>, <code>&lt;output&gt;</code>, <code>&lt;template&gt;</code> etc. You can start looking into them and use whatever is apt for your work.</p>
<p><span style="font-size: 24pt;">🔭</span> For a live demonstration of these HTML tags, you can check this <a href="https://codepen.io/Basharath/full/XWeOZvX" target="_blank" rel="noopener">codepen link</a>.</p>
<p>That's is all about the less often used HTML tags, you should know about.&nbsp;</p>

Here are the 10 HTML tags that you have never seen before. Learn when and how to use these tags in your project. Some of the tags are really handy...

Posts tagged with HTML

10 HTML tags you have never used before