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 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>
Top comments (0)