📚 HTML Tags You Might Not Know About

Hello Devs👋

In this post, I will share some new and helpful html tags which are added in HTML5 to write easy and fast code to create complex, dynamic, engaging, and effective websites.

Lets get started🚀

dialog

➡ Now you can easily create dialog box or a popup window with <dialog> tag. It’s a great way to create custom modal dialogs 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>

template

➡ The <template> tag is used as a container for holding client-side content that you don’t want to display when the page loads. This content can be cloned and inserted into the document using JavaScript.

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Hello, This is Kiran</h2>
  <p>Thanks for reading this</p>
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

picture

➡ By using <picture> tag you can define multiple sources for an image, now the browser choose the best one based on screen size, resolution. This is particularly useful for responsive design.

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

meter

➡ The <meter> tag can be used for representing a scalar measurement within a known range, like disk usage or the relevance of a query result. It helps to visually display values within a range.

<label for="diskUsage">Disk Usage:</label>
<meter id="diskUsage" value="0.6">60%</meter>

output

➡ The <output> tag represents the result of a calculation. It can be used with JavaScript to display the result of a calculation.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="50"> +
  <input type="number" id="b" value="25"> =
  <output name="result" for="a b">75</output>
</form>

progress

➡ The <progress> tag represents the completion progress of a task, such as a download or file upload.

<label for="fileProgress">File upload progress:</label>
<progress id="fileProgress" value="70" max="100">70%</progress>

mark

➡ The <mark> tag is used to highlight text. It’s particularly useful for search result pages where you want to highlight the matching text.

<p>The word <mark>highlighted</mark> is important.</p>

abbr

➡ The <abbr> tag is used to define an abbreviation or acronym, providing a full description in the title attribute.

<p>I'm a true<abbr title="Marvel Cinematic Universe">MCU</abbr>fan.</p>

time

➡ The <time> tag is used to represent dates, times, or durations. It’s useful for making your time-related data machine-readable.

<p>The concert starts at <time datetime="20:00">8 PM</time>.</p>

bdi

➡ The <bdi> tag is used to isolate a part of text that might be formatted in a different direction from other text outside it. It ensures that your web content remains consistent and readable, no matter what languages or text directions are involved.

<ul>
  <li>Product: <bdi>ABC1234</bdi></li>
  <li>Product: <bdi>مرحبا5678</bdi></li>
</ul>

wbr

➡ The <wbr> tag specifies where the text can break into a new line, if necessary. This is useful for long words or URLs.

<p>Thisisaverylongword<wbr>thatmightneedbreaking.</p>

main

➡ The <main> tag is used to specify the main content of the document. It should only be used once per page, and it excludes content that is repeated across documents like headers, footers, navigation, and sidebars.

<main>
  <h1>Welcome to my blog post</h1>
  <p>Today we will learn some new html tags</p>
</main>

figcaption

➡ The <figcaption> tag is used for providing a caption to the figure.

<figure>
  <img src="Thanos.jpg" alt="Thanos image">
  <figcaption>Thanos snapping his fingers</figcaption>
</figure>

That's it for this article.👍

Thank you for reading❤

Find Me on 👉 X GitHub

Kiran NaragundFollow

CS Graduate ✦ Full-Stack Developer ✦ ML Enthusiast ✦ Mentor @Exercism ✦ Lead collaborator @Qrev.ai ✦ Open-Source Contributor ✦ Tech Blogger