DEV Community

Rhitam Chaudhury
Rhitam Chaudhury

Posted on

Exploring Lesser-Known HTML Tags: Hidden Gems for Web Developers

As web developers, we often find ourselves relying on a set of familiar HTML tags to build our web pages. However, HTML is a rich language with many tags that can enhance your web projects in unique and powerful ways. In this blog post, we’ll delve into some of these lesser-known HTML tags, showcasing their utility and providing examples of how to use them.

  • <details> and <summary>

The tag creates a disclosure widget that users can open and close. Paired with the <summary> tag, it provides a heading that can be clicked to reveal or hide the content.

<details>
  <summary>More Information</summary>
  <p>This section contains additional information that is hidden by default.</p>
</details>
Enter fullscreen mode Exit fullscreen mode
  • <dialog>

The tag is used to define a dialog box or window, making it easier to create modals and pop-ups without relying heavily on JavaScript.

<dialog id="myDialog">
  <p>This is a dialog box.</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
Enter fullscreen mode Exit fullscreen mode
  • <meter>

The tag represents a scalar measurement within a known range, such as disk usage or the relevance of a query result.

<label for="diskUsage">Disk usage:</label>
<meter id="diskUsage" value="0.6" min="0" max="1">60%</meter>
Enter fullscreen mode Exit fullscreen mode
  • <progress>

Similar to <meter>, this tag displays the completion progress of a task, such as a download or file upload.

<label for="file">Downloading file:</label>
<progress id="file" value="32" max="100">32%</progress>
Enter fullscreen mode Exit fullscreen mode
  • <template>

The tag is used to declare fragments of HTML that can be cloned and inserted in the document by JavaScript, without being rendered when the page loads.

<template id="myTemplate">
  <div class="myClass">This is a template content.</div>
</template>

<script>
  const template = document.getElementById('myTemplate').content.cloneNode(true);
  document.body.appendChild(template);
</script>
Enter fullscreen mode Exit fullscreen mode
  • <datalist>

The tag provides an autocomplete feature on input elements, offering a list of predefined options to the user.

<label for="browsers">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>
Enter fullscreen mode Exit fullscreen mode
  • <output>

The tag represents the result of a calculation or user action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="50">
  <output name="result" for="a b">100</output>
</form>
Enter fullscreen mode Exit fullscreen mode
  • <abbr>

The tag is used to define abbreviations or acronyms, providing an expanded description on hover.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
Enter fullscreen mode Exit fullscreen mode
  • <time>

The tag represents a specific period in time, or a time on a 24-hour clock.

<p>The event will start at <time>14:00</time> on <time datetime="2024-07-10">July 10, 2024</time>.</p>
Enter fullscreen mode Exit fullscreen mode
  • <fieldset> and <legend>

The tag is used to group related elements within a form, and the tag provides a caption for the <fieldset>.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>
Enter fullscreen mode Exit fullscreen mode
  • <samp>

The tag is used to define sample output from a computer program.

<p>The result of the computation is: <samp>42</samp>.</p>
Enter fullscreen mode Exit fullscreen mode
  • <var>

The tag is used to define a variable in a mathematical expression or programming context.

<p>The equation is <var>x</var> = <var>y</var> + 2.</p>
Enter fullscreen mode Exit fullscreen mode
  • <address>

The tag is used to define contact information for the author or owner of a document or article.

<address>
  Written by John Doe.<br>
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)