10 HTML tips & tricks you need to know
Tags: webdev, css, html, javascript
Published: 2021-10-02 20:02:00

### 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>
``` 
&nbsp;

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

![Screenshot 2021-10-02 at 10.03.31 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633192427584/_JQm7njNA.png)
&nbsp;


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

![Screenshot 2021-10-02 at 10.25.57 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633193774397/aypBkGYR0.png)

&nbsp;

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

![Screenshot 2021-10-02 at 10.34.06 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633194261184/zHJVKpw8k.png)

&nbsp;


### 5. Create a slider with HTML

```
  <input type="range" min="1" max="100" value="80">
```

![Screenshot 2021-10-02 at 11.53.49 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633199042284/iYxbjoZg5.png)

&nbsp;


### 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">
```
&nbsp;


### 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>
```
&nbsp;


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

&nbsp;


### 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/*">
```
&nbsp;


### 10. Use focus-within 

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

```
	html:focus-within {
         scroll-behavior: smooth;
    }
```

&nbsp;

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


### Find me here

- [Twitter](https://twitter.com/imva508) 
- [Github](https://github.com/varun508) 
- [Instagram](https://instagram.com/varunn508)