DEV Community

Cover image for 10 HTML tips & tricks you need to know
Varun Sharma
Varun Sharma

Posted on • Edited on

10 HTML tips & tricks you need to know

#webdev #css #html #javascript

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-10-02 at 10.03.31 PM.png
 

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>
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-10-02 at 10.25.57 PM.png

 

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>
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-10-02 at 10.34.06 PM.png

 

5. Create a slider with HTML 

 <input type="range" min="1" max="100" value="80">
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-10-02 at 11.53.49 PM.png

 

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">
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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/*">
Enter fullscreen mode Exit fullscreen mode

 

10. Use focus-within

html:focus-within improves the scroll speed of find-in-page in the browser

 html:focus-within { scroll-behavior: smooth; }
Enter fullscreen mode Exit fullscreen mode

 

Thank you for reading 💫.
I hope you enjoyed the article. Feedbacks are greatly appreciated 🙏

Find me here

Top comments (2)

Collapse
 
manoharreddyporeddy profile image
Manohar Reddy Poreddy •

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 -->

Collapse
 
varun508 profile image
Varun Sharma •

Fixed. Thank you 💫