15 underrated HTML attributes every web developer should know

Created February 22, 2022

HTML may not be a programming language per se, but there's no doubt in the power it possesses. We often depend on external javascript libraries for some basic tasks, but need for some of them might end today!

Pro tip: Save time by listening to the audio of this article at Genics Blog

In this article we will discuss about 15 HTML attributes you probably did not know, but need to know for sure.

Let's get started!

Autocomplete

The autocomplete attributes specifies whether the browser is allowed to aid in filling out the form fields or not. If turned on, it will assist users with autofilling options such as email, phone numbers, nationality, and so on.

<pre class="highlight html">```  
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"credit-card-number"</span> <span class="na">id=</span><span class="s">"credit-card-number"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>




You can check out all the autocomplete values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

 2. Download 
-------------

The `download` attribute on an anchor tag specifies that the file/object should be downloaded to the local storage when a user clicks on the hyperlink.

```  
 href="document.pdf" download>Download PDF

```  
```



 3. Contenteditable 
--------------------

The `contenteditable` attribute allows the user to edit the content of an element.

```  
```  
 contenteditable="true">  
  You can now edit this text!

``` ``` 4. Readonly ------------- The `readonly` attribute specifies that an input field is read-only and can't be edited. ```

```  
 type="text" id="sports" name="sports" value="golf" readonly>

```  
```



A user can still highlight it, and copy the text. To forbid those actions, use the `disabled` attribute instead.

 5. Accept 
-----------

The `accept` attribute states which file types are allowed to be selected in the input.

```  
```  
 type="file" accept=".jpg, .png">

```  
```



This attribute can only be used on an `` tag with `type="file"`. To allow all files of specific media type, use an asterisk beside its name. For example, `accept="image/*"`.

 6. Autofocus 
--------------

The `autofocus` attribute indicates that the particular element should be focused on page load.

```  
```  
 type="text" autofocus>

```  
```



**Note**: Only one element in the HTML document or a dialog may have the autofocus attribute. If applied to multiple elements only the first one will receive focus.

 7. Hidden 
-----------

The `hidden` attribute specifies whether or not the element is visible.

```  
```  
 hidden>I am invincible 💪

```  
```



 8. Spellcheck 
---------------

The `spellcheck` attribute defines whether the element is checked for spelling errors.

```  
```  
 contenteditable="true" spellcheck="true">Cehck mai spellnig

```  
```



 9. Controls 
-------------

The `controls` attribute specifies whether or not the audio/video controls should be displayed on the default player.

```  
```  
 controls>  
   src="rick_roll.mp3"  type="audio/mpeg">  


```  
```



 10. Autoplay 
--------------

The `autoplay` attribute ensures that the audio/video will automatically start playing as soon as it is loaded.

```  
```  
 autoplay  
  src="https://cdn.mysite.com/media/myvideo.mp4"  
  poster="image.png">  


```  
```



 11. Cite 
----------

The `cite` attribute is used to point out where a an element's content is taken from, or referred to.

```  
```  
 cite="https://genicsblog.com/">  
  An awesome publication for developers.  


```  
```



 12. Datetime 
--------------

The `datetime` attribute specifies the date and time when the text was deleted/inserted.

```  
```  
  
  My plans for 2023 include joining Google as a SDE,  
   datetime="2021-01-01T18:21">creating 6 courses,   
   datetime="2021-02-02T14:07">writing 12 articles.  
  
I will evaluate the completion on  datetime="2021-12-31">.

```  
```



 13. Async 
-----------

The `async` attribute ensures the script is executed asynchronously with the rest of the page.

```  
```  
<script>src="https://icanheckyou.com/heckingScript.js" async></script>

Note: The async attribute has an effect on external scripts only.

Defer


The defer attribute ensures the script is executed when the page has finished parsing.
<pre class="highlight html">```  
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://anotherhecker.com/heckingScriptAgainCozWhyNot.js"</span> <span class="na">defer</span><span class="nt">></script></span>





**Note**: The `defer` attribute has an effect on external scripts only.

 15. Inputmode 
---------------

The `inputmode` attribute hints at the type of data that might be entered by the user while editing the element or its contents. It also helps the mobile browsers to display the keyboard in the appropriate mode.


```  
 type="text" inputmode="url" />  
 type="text" inputmode="email" />  
 type="text" inputmode="numeric" />

```  
```



###  Thanks for reading! 

I hope this article was able to help you learn more about HTML and share some knowledge with you.

If you liked this post, subscribe to my [newsletter](https://abhirajbhowmick.substack.com) to never miss out on [my blogs](https://abhiraj.co), product launches, and tech news. Follow me on [Twitter](https://twitter.com/rainboestrykr) for daily threads on web dev resources!