HTML Tags You Might Not Know About
Tags: webdev, html, beginners, programming
Published: 2024-05-23 15:44:50

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**.

```html
<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**.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.
```html
<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.
```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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 👉 {% cta https://x.com/kiran__a__n %} X {% endcta %} {% cta https://github.com/Kiran1689 %} GitHub {% endcta %}

{% embed https://dev.to/dev_kiran %}