Front-end Development: Must Know HTML Tags That Almost Nobody Knows

Web developers are expected to work with multiple languages these day. So it's inconvenient to learn everything a language has to offer and obvious to find them not utilizing full potentialof some specialized features.

We use HTML everyday. But still there is enough left to know about it. It's never too late to get back into game and start writing code that taps into the power of some under-used tags.

Here are 5+ HTML tag that almost nobdy knows.

1. Fieldset Tag

The <fieldset> tag is used to group related form elements. By using fieldset and legend tag, you can make your form design clearer.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML fieldset Tag</title>
   </head>
   <body>
      <form>
         <fieldset>
            <legend>Details</legend>
            Student Name: <input type = "text"><br />
            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 autocomplte feature to an input element. Users will get 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:

The <color> tag defines a color picker. It provides the user interface that lets a user specify a color, either by using a visual color picker or by entering hexadecimal value of a color.

<!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 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 to define acronym or abbreviation of an element. It is used to provide useful information to the browsers, translation systems, and search engines. Learn in-depth about abbreviation tag here.

<!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 to hold some HTML content hidden from the user when the page loads. The content inside can be rendered later with JavaScript. See more about this tag here.

<!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. Thanks for reading :)

Front-end Development

Sunday, 22 August 2021

Must Know HTML Tags That Almost Nobody Knows

1. Fieldset Tag

2. DataList Tag:

3.Time Tag:

4. Color Picker Tag:

5. Progress Tag:

6. Abbreviation Tag:

7. Template Tag:

1 comment: