6 LITTLE KNOWN BUT USEFUL HTML TAGS

#html #css #webdev #react

Hello everyone, in this article, I will tell you about 6 little-known but useful HTML tags. You can use these elements in your applications.

1. HTML details Tag

You can use the details tag to create an interactive widget that the user can click to open or close. The widget is off by default. When opened, it expands and the content inside is visible.

<!DOCTYPE html>
<html>
<body>


<details>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</details>

</body>
</html>


**Gif**

Attribute

Open : Specifies that details should be visible (open) to the user

2. HTML meter Tag

Using the meter tag, you can define a scalar measurement or a fractional value within a known range.

Example :

<!DOCTYPE html>
<html>
<body>
<label for="member">Member</label>
<meter id="member" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="register">Register:</label>
<meter id="register" value="0.6">60%</meter>
</body>
</html>

3. HTML mark Tag

You can highlight parts of a text using the mark tag.

Example :

<!DOCTYPE html>
<html>
<body>
  <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

You can change the highlight color if you want.

mark {
  background-color: red;
  color: black;
}

4. HTML fieldset Tag

You can group related elements in the form using the fieldset tag. Draws a box around items.

Example :

<!DOCTYPE html>
<html>
<body>
<form >
 <fieldset>
  <legend>User:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>
</body>
</html>

Attributes

Disabled: Specifies that a group of related form elements should be disabled
Name: Specifies a name for the fieldset

5. HTML output Tag

You can use the output tag to display the results of one calculation.

Gif :

<!DOCTYPE html>
<html>
<body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
      <input type="range" id="a" value="50">
      +<input type="number" id="b" value="25">
      =<output name="x" for="a b"></output>
    </form>
</body>
</html>

6. HTML template Tag

If you want to hide some content when your application's page loads, use the template element. Use JavaScript to view.

Gif :

<!DOCTYPE html>
<html>
<body>

<button onclick="showContent()">Show hidden content</button>
<template>
  <h2>Flower</h2>
  <img src="https://picsum.photos/200" width="214" height="204">
</template>

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

</body>
</html>