12 Very Helpful HTML attributes that can save Your Hours of coding

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

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

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

4. Accept in file upload

➡ File types that are allowed in upload

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

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

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

7. Custom Data Attributes

➡ data-* allow additional information to be stored in HTML Dom

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

8. Autocomplete

➡ Specifies whether the browser has permission to provide autocomplete field values based on history

➡ Values: on/off

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

11. Onerror:

➡ Allows calling a javascript function if image loading fails

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

12. Display error if js disabled

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

---

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

Connect me on Twitter