1. Create an accordion with HTML
Yes, you can actually create an accordion purely using HTML. Here's how
<details>
<summary>View Features</summary>
<ul>
<li>Unlimited bookmarks</li>
<li>Nested collections</li>
<li>Import and export</li>
<li>Link to web archive</li>
<li>Mobile support</li>
</ul>
</details>
2. Show the result with the <output> element
The output element can show the result performed by the script. It auto-updates when the input values change
<form oninput="r.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
<input type="number" id="a" value="100">
+<input type="number" id="b" value="50">
+<input type="number" id="c" value="50">
=<output name="r" for="a b c"></output>
</form>
3. Create gauges with the <meter> element
<label for="ruby">Ruby:</label>
<meter id="ruby" min="0" max="100" low="35" high="65" optimum="95" value="25"></meter><br />
<label for="java">Java:</label>
<meter id="java" min="0" max="100" low="35" high="65" optimum="95" value="50"></meter><br />
<label for="js">JavaScript:</label>
<meter id="js" min="0" max="100" low="35" high="65" optimum="85" value="90"></meter>
4. Accept multiple input values
You can use the multiple attribute to accept multiple values for files and email addresses. The user experience is not that good with type="email" but it works.
<input type="email" placeholder="Email comma separated" multiple>
5. Create a slider with HTML
<input type="range" min="1" max="100" value="80">
6. Meta tag http-equiv
Use http-equiv to refresh or redirect to a page after a certain duration
<!-- Refreshes the document every 30 seconds -->
<meta http-equiv="refresh" content="30">
<!-- Redirects to thee specified page after 5 seconds -->
<meta http-equiv="refresh" content="5;https://google.com">
7. Disable right-click
<!-- Disables right click on this element -->
<p oncontextmenu="return false">Hello</p>
<!-- Disables right click on the document -->
<body oncontextmenu="return false">....</body>
8. Facetime with anchor tag
Not only facetime, but you can also add skype or fax links
<a href="facetime:98769876987">Connect using FaceTime</a>
<a href="skype:user333?chat">Connect on skype</a>
<a href="fax:+123.456.1234567">+358.555.1234567</a>
9. Use capture attribute in input
<input type="file" capture="user" accept="audio/*">
<!-- Capture 'environment' opens up the back camera -->
<input type="file" capture="environment" accept="video/*">
<!-- Capture 'user' opens up the front camera -->
<input type="file" capture="user" accept="image/*">
10. Use focus-within
html:focus-within improves the scroll speed of find-in-page in the browser
html:focus-within {
scroll-behavior: smooth;
}
Thank you for reading 💫.
I hope you enjoyed the article. Feedbacks are greatly appreciated 🙏
Top comments (2)
Thanks, great content.
Small edit in comment
15 should be 30:
<!-- Refreshes the document every 15 seconds -->
should be
<!-- Refreshes the document every 30 seconds -->
Fixed. Thank you 💫