HTML is the backbone of the web, and while most developers are familiar with common tags like <div>, <span>, and <p>, there are plenty of lesser-known HTML elements that can make your life easier.
Let’s explore some underrated HTML tags that might just blow your mind! 🚀
1. <dialog> – The Easy-Peasy Modal 🖼️
Why struggle with JavaScript-heavy modals when HTML has a built-in solution? The <dialog> tag lets you create a native, accessible modal.
<dialog id="myDialog">
<p>Hey there! I'm a native modal. 🎉</p>
<button onclick="this.parentElement.close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Modal</button>
No need for extra JavaScript libraries — just call showModal() or close().
2. <details> & <summary> – The Interactive Disclosure 📖
This combo allows you to create collapsible sections without JavaScript!
<details>
<summary>Click to reveal more info 👀</summary>
<p>Surprise! 🎊</p>
</details>
Perfect for FAQs, spoilers, or extra details.
3. <meter> – The Progress Indicator ⏳
Need a way to visually represent a numeric value within a known range? Enter !
<label>Battery level: <meter value="0.6" min="0" max="1"></meter></label>
Unlike <progress>, <meter> is meant for measured values rather than ongoing progress.
4. <mark> – Highlight Like a Pro ✍️
Ever wanted to highlight text? The tag does exactly that.
<p>Here is a <mark>highlighted</mark> word.</p>
Useful for search results, annotations, or drawing attention to key content.
5. <abbr> – The Tooltip for Acronyms 🏷️
Give acronyms and abbreviations extra meaning with .
<p><abbr title="Hypertext Markup Language">HTML</abbr> is awesome!</p>
Hover over “HTML” to see the tooltip. Super handy for accessibility! 🌍
6. <bdi> – Keep Text Direction Intact 🔄
The <bdi> (Bi-Directional Isolation) tag ensures mixed-direction text stays in order.
<p>Usernames: <bdi>مرحبا</bdi>, <bdi>JohnDoe</bdi></p>
Ideal for multi-language websites! 🌐
7. <wbr> – The Line Break Hint 🔍
Let the browser know where it’s safe to break long words.
<p>Superlongword<wbr>thatneeds<wbr>breaking</p>
Useful for keeping content responsive and readable. 📱
8. <time> – Semantic Time Representation ⏰
Make dates machine-readable and more useful for search engines.
<p>Published on <time datetime="2025-03-12">March 12, 2025</time>.</p>
Search engines and assistive technologies love this! 🔍
9. <output> – Display Results from Forms ✍️
Instead of using <span> for displaying calculated results, use <output>.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="5"> +
<input type="number" id="b" value="10"> =
<output name="result">15</output>
</form>
Perfect for dynamic calculations! 🎯
10. <template> – Hidden HTML Content 📦
Store reusable HTML content that won’t render until activated with JavaScript.
<template id="greetingTemplate">
<p>Hello, <strong>world!</strong> 🌍</p>
</template>
<script>
const template = document.getElementById('greetingTemplate');
document.body.appendChild(template.content.cloneNode(true));
</script>
Great for dynamically adding UI components! 🏗️
Wrapping Up 🎁
HTML has evolved beyond basic page structure. These hidden gems can enhance accessibility, performance, and usability without extra JavaScript or CSS hacks. Give them a try in your next project!
Did I miss any cool HTML tags? Let me know in the comments! ⬇️
Top comments (0)