DEV Community

Cover image for HTML Tags You Might Not Know About
Kiran Naragund
Kiran Naragund

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

That's it for this article.👍

Thank you for reading❤

Find Me on 👉 X GitHub

Top comments (54)

Collapse
 
anitaolsen profile image
Anita Olsen*°•.☆

I was aware of figcaption! Yay!

Collapse
 
dev_kiran profile image
Kiran Naragund

Nice 😇
What about others😅?

Collapse
 
anitaolsen profile image
Anita Olsen*°•.☆

I do not recall the other ones 🙃

Thread Thread
 
dev_kiran profile image
Kiran Naragund

😄

Collapse
 
miguelrodriguezp99 profile image
Miguel

thank you for the post ♥️

Collapse
 
dev_kiran profile image
Kiran Naragund

You're welcome :)

Collapse
 
lotfijb profile image
Lotfi Jebali

When you think you know HTML and you come across this post, thanks for sharing

Collapse
 
dev_kiran profile image
Kiran Naragund

😅
Thanks for reading :)

Collapse
 
masudalimrancasual profile image
Masud Al Imran

Thanks for the post. I didn't know about most of them

Collapse
 
dev_kiran profile image
Kiran Naragund

Glad you found it useful :)

Collapse
 
wisdomukpai profile image
Oyoho Ukpai.

Awesome 🥰🥰🥰
Thanks a million 😊

Collapse
 
dev_kiran profile image
Kiran Naragund

You're welcome :)

Collapse
 
vishv profile image
Vishv

Awesome list
Thanks for sharing

Collapse
 
dev_kiran profile image
Kiran Naragund

Glad you found it useful :)

Collapse
 
emmjayp profile image
Michael Pollaci

Love rather than inserting a
across all devices. I'm going to try that one.

Collapse
 
dev_kiran profile image
Kiran Naragund

Thanks for reading: )

Collapse
 
vjnvisakh profile image
Visakh Vijayan

good read

Collapse
 
dev_kiran profile image
Kiran Naragund

Thanks :)

Collapse
 
rohansh08 profile image
Rohan Shrivastava

Thanks for Sharing this !!

Collapse
 
dev_kiran profile image
Kiran Naragund

You're welcome :)

Collapse
 
costaocean profile image
Costa

Thanks for it.

Collapse
 
dev_kiran profile image
Kiran Naragund

Thanks for reading :)

Collapse
 
deadpixeldesign profile image
DeadpixelDesign

Great article! Serves as a good reminder that some of these critical tags exist and helps to reduce the code footprint.

Collapse
 
dev_kiran profile image
Kiran Naragund

Happy to hear that :)
Thanks for reading

Collapse
 
claywinston profile image
Clay Winston

Thank you for all this.

Collapse
 
dev_kiran profile image
Kiran Naragund

You're welcome :)

Collapse
 
roundabout profile image
roundabout

Thanks! I didn't know all of these existed.

Collapse
 
dev_kiran profile image
Kiran Naragund

Glad you found it useful :)

Collapse
 
timawake profile image
Timilehin

This is nice

Collapse
 
dev_kiran profile image
Kiran Naragund

Thanks :)

Collapse
 
jangelodev profile image
João Angelo

Hi Kiran Naragund,
Top, useful bro !
Thanks for sharing

Collapse
 
dev_kiran profile image
Kiran Naragund

Happy to hear that, thanks for reading!❤️