Home > Article > Web Front-end > ITTLE KNOWN BUT USEFUL HTML TAGS
ITTLE KNOWN BUT USEFUL HTML TAGS
- Susan SarandonOriginal
- 2024-10-06 06:09:02569browse
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 :
<p><!DOCTYPE html><br>
<html><br>
<body><br>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><br>
<input type="range" id="a" value="50"><br>
+<input type="number" id="b" value="25"><br>
=<output name="x" for="a b"></output><br>
</form><br>
</body><br>
</html></p>
- 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 :
<p><!DOCTYPE html><br>
<html><br>
<body></p>
<p><button onclick="showContent()">Show hidden content</button><br>
<template><br>
<h2>Flower</h2><br>
<img src="https://picsum.photos/200" width="214" height="204"><br>
</template></p>
<p><script><br>
function showContent() {<br>
let temp = document.getElementsByTagName("template")[0];<br>
let clon = temp.content.cloneNode(true);<br>
document.body.appendChild(clon);<br>
}<br>
</script></p>
<p></body><br>
</html></p>
Conclusion
In this article, we examined 6 little-known but useful HTML tags.
You can use these elements in your applications.
The above is the detailed content of ITTLE KNOWN BUT USEFUL HTML TAGS. For more information, please follow other related articles on the PHP Chinese website!