Exploring Lesser-Known HTML Tags: Hidden Gems for Web Developers
Tags: html, webdev, development
Published: 2024-07-05 20:15:50

**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>
```




- `<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>
```



- `<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>
```


- `<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>
```


- `<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>
```


- `<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>
```


- `<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>
```

- `<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>
```


- `<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>
```

- `<fieldset> and <legend>`

The tag is used to group related elements within a form, and the <legend> 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>
```


- `<samp>`

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

```
<p>The result of the computation is: <samp>42</samp>.</p>
```

- `<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>
```



- `<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>
```