Muthu Annamalai Venkatachalam

Posted on Dec 25, 2023 • Edited on Dec 26, 2023 • Originally published at muthuannamalai.tech

The 7 HTML Tags You Most Probably Do Not Know

#webdev #html #programming #beginners

Web developers these days are often expected to know and work in multiple languages. As a result, it's tricky to learn everything a language has to offer and easy to find yourself not utilizing the full potential of some more specialized but very useful tags.

Unfortunately, we haven't been tapping into the full potential of these more obscure HTML tags as of late. But it's never too late to get back into the game and start writing code that taps into the power of some under-used tags.

Here are 5+ Must Know HTML Tags That Almost Nobody Knows in HTML. Without further ado let us get into the article

1. Fieldset Tag

The HTML <fieldset> tag is used for grouping related form elements. By using the fieldset tag and the legend tag, you can make your forms much easier to understand for your users.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML fieldset Tag</title>
   </head>

   <body>
      <form>

         <fieldset>
            <legend>Details</legend>
            Student Name: <input type = "text"><br />
            MCA Subjects:<input type = "text"><br />
            Course Link:<input type = "url" name = "websitelink">
         </fieldset>

      </form>
   </body>

</html>

Output:

2. DataList Tag:

The <datalist> tag is used to provide an "autocomplete" feature for elements. Users will see a drop-down list of pre-defined options as they input data.

<!DOCTYPE html>
<html>
<body>

<h1>The datalist element</h1>

<form action="/action_page.php" method="get">
  <label for="browser">Choose your browser from the list:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

</body>
</html>

Output:

3. Time Tag:

The <time> tag defines a specific time (or datetime). The datetime attribute of this element is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.

<!DOCTYPE html>
<html>
<body>

<h1>The time element</h1>

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
</body>
</html>

Output:

4. Color Picker Tag:

<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
   <label for="colorpicker">Color Picker:</label>
   <input type="color" id="colorpicker" value="#0000ff">
 </body>
</html>

Output:

5. Progress Tag:

The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

<!DOCTYPE html>
<html>
<body>

<h1>The progress element</h1>

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

</body>
</html>

Output:

6. Abbreviation Tag:

The <abbr> tag is used as shortened versions and used to represent a series of letters. The abbreviation is used to provide useful information to the browsers, translation systems, and search engines.

<!DOCTYPE html>
<html>
<body>

<h1>The abbr element</h1>

<p>The<abbr title="Alabama">AL</abbr>is in USA</p>

</body>
</html>

Output:

7. Template Tag:

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside

<!DOCTYPE html>
<html>
<body>

<h1>The template Element</h1>

<p>Click the button below to display the hidden content from the template element.</p>

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

<template>
  <h2>Flower</h2>
  <img src="https://www.deadlinenews.co.uk/wp-content/uploads/2020/10/andrew-small-EfhCUc_fjrU-unsplash-scaled.jpg" width="214" height="204">
</template>

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

</body>
</html>

Output:

I hope that you got something useful today. If that so let me know in the comments

You can now extend your support by buying me a Coffee.😊👇

Thanks for Reading 😊

Top comments (15)

Adaptive Shield Matrix • Dec 26 '23

Every image is broken for me (does not show at all)

Marxu • Dec 26 '23

me too, except the last one

Muthu Annamalai Venkatachalam • Dec 26 '23

Have fixed it now

Muthu Annamalai Venkatachalam • Dec 26 '23

Now I have fixed it.

Luke Inglis • Dec 26 '23

Always love to see posts boosting lesser known/used HTML tags. One additional note on the fieldset is that by marking a fieldset with the disabled attribute you can disable a whole group of inputs at once.

Muthu Annamalai Venkatachalam • Dec 26 '23

Thank you for adding ☺️

lionel-rowe • Dec 26 '23

You need to remove align="left" from your images to fix them, btw (dev.to's markdown is parsing it as part of the image URL and displaying them as broken links) 😉

Muthu Annamalai Venkatachalam • Dec 26 '23

Hey thank you for identifying it and letting me know have corrected it now

Eckehard • Dec 25 '23

Hy,

you could use flems.io for your demonstrations, super easy to use. Just copy the URL as a link and your done.

Muthu Annamalai Venkatachalam • Dec 26 '23

Thank you for sharing would definitely use it

Jonathan Modell • Dec 25 '23

Wow. I've be developing so much React over the last few years, i really had no idea there was a built in color-picker or that a datalist was used to create auto-complete options. Thanks for the article.