Home > Article > Web Front-end > ITTLE KNOWN BUT USEFUL HTML TAGS
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.
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
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>
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;
}
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
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>
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>
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!