12 Very Helpful HTML attributes that can save Your Hours of coding
Tags: webdev, html, programming, tutorial
Published: 2022-09-12 08:26:18

There are 26.2 million Web Developers but not everyone uses this HTML attribute.
Here are 12 Lesser-Known HTML attributes that you cannot miss

##  1. Download attribute in ahref:
➡ Easily allow users to download any asset on clicking a link

➡ File specified in href attribute is downloaded

➡ Optionally, specify new name of the file after it is downloaded

![Download attribute in ahref](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2k3bifg38q757kvmr2a.jpg)


## 2. Input mode in input element:
➡ hints browser about the type of data to be entered by the user

➡ Display appropriate virtual keyboard

➡ & appropriate keyboard in mobile devices

➡ values: numeric, decimal, email, URL, tel


![Input mode in input element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tuj2qpqf8c3dt1e9mtjp.jpg)


## 3. Loading attribute in img:
➡ Lazy load or eager load images

➡ Lazy loads defer loading of images until user scrolls near them

➡ Lazy loading increases website performance


![Loading attribute in img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asy37wctrenrf6llgy08.jpg)


## 4. Accept in file upload
➡ File types that are allowed in upload

➡ Possible values can be accepted mime-types or file extensions.


![Accept in file upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cdrc9fzqhiyda7e5ind.jpg)


## 5. Autofocus form fields:
➡  Focus an input element on page load

➡  Useful to bring users' attention to a particular form fields

➡ Can be used for tags like button, input, select, textarea



![Autofocus form fields](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2o5p7fgrgskar3fnqdp.jpg)


## 6. DNS-prefetch
➡  Resolve domain names before resources get requested

➡  increases website performance by reducing latency for DNS resolution

➡  only used for cross-origin domains requests


![DNS-prefetch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysg1xmutkheuwfn1fu8q.jpg)


## 7. Custom Data Attributes
➡  data-* allow additional information to be stored in HTML Dom

➡  Custom data can be easily accessed using HTMLElement.dataset property.



![Custom Data Attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abnyc2vep9tytclxjz0k.jpg)

## 8. Autocomplete
➡  Specifies whether the browser has permission to provide autocomplete field values based on history

➡ Values: on/off


![Autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/628x8g39lgv7vr3h52l9.jpg)


## 9. Tab Index: 
➡ Represents the tab order of the current element

➡ Navigation proceeds from the lowest tabIndex to the highest tabIndex


## 10. Defer:
➡ Defers the script when the page has finished parsing

➡ Defer attribute only has an effect on external scripts


![Defer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7cny4p5hwtmqlbivuq6.jpg)


## 11. Onerror:
➡ Allows calling a javascript function if image loading fails

➡ For example if the original is not loaded the load fallback image


![Onerror](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yohll3qwzexfhwxpgq5.jpg)


## 12. Display error if js disabled

➡ Use noscript check to show an error if script execution is disabled.


![Display error if js disabled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlt12at7plo4gmf6pz2m.jpg)

***

Please like & Re-Share if you find this post helpful

Connect me on [Twitter ](https://twitter.com/HeyNikhila)