10 HTML tips & tricks you need to know

Varun Sharma — Sat, 02 Oct 2021 20:02:00 +0000

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 🙏

Forem: Varun Sharma

10 HTML tips & tricks you need to know

1. Create an accordion with HTML

2. Show the result with the `<output>` element

3. Create gauges with the `<meter>` element

4. Accept multiple input values

5. Create a slider with HTML

6. Meta tag http-equiv

7. Disable right-click

8. Facetime with anchor tag

9. Use capture attribute in input

10. Use focus-within

Find me here

Forem: Varun Sharma

10 HTML tips & tricks you need to know

1. Create an accordion with HTML

2. Show the result with the <output> element

3. Create gauges with the <meter> element

4. Accept multiple input values

5. Create a slider with HTML

6. Meta tag http-equiv

7. Disable right-click

8. Facetime with anchor tag

9. Use capture attribute in input

10. Use focus-within

Find me here

2. Show the result with the `<output>` element

3. Create gauges with the `<meter>` element