DEV Community

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

Posted on • Updated 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 💫

Read next

wafa_bergaoui profile image

Optimizing React Components with useMemo and useCallback

Wafa Bergaoui -

balaharinath-dev profile image

From 2500 to Top 10! Our Team Advances to the Grand Finale of Tata InnoVent 2024!

Balaharinath C -

codingashish_dev profile image

5 Ways to Add Tailwind CSS to Your Project

Ashish Prajapati -

samarpankc profile image

Tim Berners-Lee : The Man Behind the Web

Samarpan KC -