DEV Community

Cover image for The 7 HTML Tags You Most Probably Do Not Know
Muthu Annamalai Venkatachalam
Muthu Annamalai Venkatachalam

Posted on • Updated on • Originally published at muthuannamalai.tech

The 7 HTML Tags You Most Probably Do Not Know

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

Output:

legend.jpeg

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

Output:

datalist.jpeg

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

Output:

time.jpeg

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

Output:

colorpicker.jpeg

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

Output:

progress element.jpeg

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

Output:

abbr.jpeg

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

Output:

Image description

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.πŸ˜ŠπŸ‘‡

Buy Me A Coffee

Thanks for Reading 😊

Top comments (15)

Collapse
 
adaptive-shield-matrix profile image
Adaptive Shield Matrix

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

Collapse
 
marxu profile image
Marxu

me too, except the last one

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Have fixed it now

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Now I have fixed it.

Collapse
 
ludamillion profile image
Luke Inglis

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.

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Thank you for adding ☺️

Collapse
 
lionelrowe profile image
lionel-rowe

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) πŸ˜‰

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

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

Collapse
 
efpage profile image
Eckehard

Hy,

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

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Thank you for sharing would definitely use it

Collapse
 
jonmodell profile image
Jonathan Modell

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.

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

My pleasure ☺️

Collapse
 
idledaydreamer profile image
Yehyun • Edited

I didn't know time tag and abbr tag! This is nice
I also recomment < details > tag, using with < summary > - interesting function

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Thank you for adding

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

πŸ™ŒπŸ™Œ