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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<time>
The tag represents a specific period in time, or a time on a 24-hour clock.
<fieldset> and <legend>
The tag is used to group related elements within a form, and the tag provides a caption for the <fieldset>.
<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.
<var>
The tag is used to define a variable in a mathematical expression or programming context.
<address>
The tag is used to define contact information for the author or owner of a document or article.
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
