DEV Community

Cover image for 24 Lesser-Known HTML Attributes You May Want to Use โœจ๐Ÿ“š
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

 

24 Lesser-Known HTML Attributes You May Want to Use โœจ๐Ÿ“š

A while ago I created an article where I covered useful HTML tags and their types. This week I decided to make a sequel, reviewing some of the HTML attributes you might want to use.

All of the attributes are easy to set up and can help you to achieve common tasks, which you would otherwise get by using some complex external libraries.

In this article, I will review each attribute and include the code snippets, so it is easier for you to understand the use cases and syntax of the attributes.


1. Accept

Describes which input file types are allowed.

<input type="file" accept=".jpg, .png">
Enter fullscreen mode Exit fullscreen mode

Only used with file type of the<input> tag. Takes in a comma-separated list of one or more file types. To allow all files of specific media type, use accept="image/*".

2. Autofocus

Indicates that the particular element should be focused on page load.

<input type="text" autofocus>
Enter fullscreen mode Exit fullscreen mode

Only one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.

3. Inputmode

Hints at the type of data that might be entered by the user while editing the element or its contents.

<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />
Enter fullscreen mode Exit fullscreen mode

This allows a browser to display an appropriate virtual keyboard.

4. Pattern

Specifies a regular expression that the <input> value is checked against on form submission.

<input name="username" id="username" pattern="[A-Za-z0-9]+">
Enter fullscreen mode Exit fullscreen mode

5. Required

Ensures that the element must be filled out before submitting the form.

<form action="/send_form.js">  
Username: <input type="text" name="username" required>  
<input type="submit">  
</form>
Enter fullscreen mode Exit fullscreen mode

6. Autocomplete

Specifies whether the browser has permission to provide assistance to fill out form fields like email, phone numbers, country, etc.

<input name="credit-card-number" id="credit-card-number" autocomplete="off">
Enter fullscreen mode Exit fullscreen mode

For the full list of available autocomplete values, see MDN reference.

7. Multiple

This attribute allows the user to select multiple values.

<input type="file" multiple>
Enter fullscreen mode Exit fullscreen mode

You can use it with file and email types of <input> and the <select> tag.

8. Download

Specifies that the target will be downloaded when the user clicks on the hyperlink.

<a href="document.pdf" download>Download PDF</a>
Enter fullscreen mode Exit fullscreen mode

9. Contenteditable

This attribute allows the user to edit the content of the element.

<div contenteditable="true">
  This text can be edited by the user.
</div>
Enter fullscreen mode Exit fullscreen mode

10. Readonly

Specifies that an input field is read-only.

<input type="text" id="sports" name="sports" value="golf" readonly>
Enter fullscreen mode Exit fullscreen mode

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

11. Hidden

Specifies whether or not the element is visible.

<p hidden>This text is hidden</p>
Enter fullscreen mode Exit fullscreen mode

12. Spellcheck

Defines whether the element is checked for spelling errors.

<p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p>
Enter fullscreen mode Exit fullscreen mode

Typically, all the non-editable elements are not checked, even if the spellcheck attribute is set to true and the browser supports spellchecking.

13. Translate

Specifies whether the element should be translated when the page is localized.

<footer><p translate="no">Printing Works, Inc</p></footer>
Enter fullscreen mode Exit fullscreen mode

An example use case would be your company name, book titles, locations, etc.

14. Loading

Specifies whether a browser should load an image immediately or to defer loading of off-screen images until, for example, the user scrolls near them.

<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy">
Enter fullscreen mode Exit fullscreen mode

eager is the default behavior, lazy is used to defer (aka lazy loading).

15. Onerror

Allows adding a fallback image if the original is not loaded.

<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/>
Enter fullscreen mode Exit fullscreen mode

The this.onerror=null is used to prevent the loop if the fallback image itself is not available.

16. Poster

Allows adding an image to be shown while the video is downloading.

<video 
src="https://cdn.mysite.com/media/video.mp4"
poster="image.png">
</video>
Enter fullscreen mode Exit fullscreen mode

If not specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

17. Controls

Specifies whether or not the audio/video controls should be displayed on the player.

<audio controls
<source src="track11.mp3"  type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

18. Autoplay

Ensures that the audio/video will automatically start playing as soon as it is loaded.

<video autoplay
src="https://cdn.mysite.com/media/myvideo.mp4"
poster="image.png">
</video>
Enter fullscreen mode Exit fullscreen mode

19. Loop

Specifies that the audio/video will start over again, every time it is finished.

<audio loop
<source src="track323.mp3"  type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

20. Cite

Points to where the content is taken from, or change or deletion is referred.

<blockquote cite="https://mysite.com/original-source-url">
  <p>Some awesome quote</p>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

21. Datetime

Specifies the date and time when the text was deleted/inserted.

<p>
  My plans for 2021 include visiting Thailand,
  <del datetime="2021-01-01T18:21">creating 6 courses,</del> 
  <ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p>
Enter fullscreen mode Exit fullscreen mode

When used with the <time> element, it represents a date and/or time in the machine-readable format.

22. Async

Ensures the script is executed asynchronously with the rest of the page.

<script src="script.js" async></script>
Enter fullscreen mode Exit fullscreen mode

The async attribute only has an effect on external scripts (src attribute must be present).

23. Defer

Ensures the script is executed when the page has finished parsing.

<script src="script.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

The defer attribute only has an effect on external scripts (src attribute must be present).

24. Draggable

Specifies whether an element is draggable or not.

<script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => {
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}
</script>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p>
Enter fullscreen mode Exit fullscreen mode

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Top comments (37)

Collapse
 
sh20raj profile image
Sh Raj

Instead :- Inputmode we can directly use it in type

As Onerror we can use all JS properties like onload, onclick, etc.

Cite is the thing I was searching this day.
loading lazy was the thing I noticed in many websites but not known to it.
Very Helpful ๐Ÿš€๐Ÿ’ฏ

Collapse
 
madza profile image
Madza

Thanks so much for the feedback ๐Ÿ™โค

Collapse
 
thesanjeevsharma profile image
Sanjeev Sharma

the lazy loading attribute only works in chrome I think. so not as good as you think.

for true lazy loading, you'll have to implement your own solution using IntersectionObserver.

also, read about progressive image loading.

Collapse
 
madza profile image
Madza

Thanks for the input ๐Ÿ™โค

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
madza profile image
Madza

Thanks a lot, my pleasure to help others ๐Ÿ™โค

Collapse
 
spandan profile image
Spandan • Edited

Good post again
I did knew some of them but the others that I didn't know were amazing
Keep it up!

Collapse
 
madza profile image
Madza

Thanks a lot for the feedback! ๐Ÿ™โค

Collapse
 
etienneburdet profile image
Etienne Burdet

Damn, I knew some, but not all of them! Cheers ๐Ÿ™

Collapse
 
madza profile image
Madza

Hopefully they were useful! ๐Ÿ™โค

Collapse
 
etienneburdet profile image
Etienne Burdet

Just used loading=lazy in prod! I knew for scripts, but no images.

Thread Thread
 
madza profile image
Madza

Awesome, hope it works well ๐Ÿ™โค

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Pretty nice :)

Collapse
 
madza profile image
Madza

Glad you liked it ๐Ÿ™โค

Collapse
 
shahednasser profile image
Shahed Nasser

Great post! It would be also cool to point out the browser compatibility of some of these, but regardless itโ€™s definitely informative!

Collapse
 
madza profile image
Madza

Thanks a lot for the feedback ๐Ÿ™โค

Collapse
 
samveec profile image
samveec • Edited

Super useful, thanks for sharing!

Collapse
 
madza profile image
Madza

You are welcome! Happy to help! ๐Ÿ™โค

Collapse
 
pratapkute profile image
Pratap kute

Very Good post

Collapse
 
madza profile image
Madza

Thanks, means a lot ๐Ÿ™โค

Collapse
 
uithemes profile image
ui-themes

Nice, thanks for sharing

Collapse
 
madza profile image
Madza

My pleasure to help! ๐Ÿ™โค

Collapse
 
johnpalmgren profile image
John Palmgren

These are great

Collapse
 
madza profile image
Madza

Means a lot, thanks! ๐Ÿ™โค

Collapse
 
ishanpro profile image
Ishan Tiwari

I knew some of them but others were awesome....

Collapse
 
madza profile image
Madza

Means a world for me, thanks! โค๐Ÿ™

Collapse
 
madza profile image
Madza • Edited

See CanIUse for browser support ๐Ÿ˜‰

Collapse
 
muriithigakuru profile image
Muriithi Gakuru

this is amazing content right here

Collapse
 
madza profile image
Madza

Thanks a lot ๐Ÿ™โค

Collapse
 
posandu profile image
Posandu

We all know onerror!!!

<img onerror="alert('XSS!')" src="hjgh">
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madza profile image
Madza

Hopefully you found others useful ๐Ÿ™โค

Collapse
 
posandu profile image
Posandu

Yes, thank you for the post ๐Ÿ˜

Thread Thread
 
madza profile image
Madza

My pleasure! ๐Ÿ‘๐Ÿ˜€

Collapse
 
tambyrd profile image
Tam Sylte

I didn't ... granted, not an HTML expert, more like occasional dabbler. I found this post really useful for my purposes of creating nice usable but not overly fancy HTML.

Collapse
 
madza profile image
Madza

You are welcome! ๐Ÿ˜‰ ๐Ÿ‘
I makes me really happy being able to help people ๐Ÿ™โค

Collapse
 
serena_zubby_adfb1d13f012 profile image
Serena shannon

Congratulations to those who benefited from out platform this week
Never depend on a single income
I can still help more 30 people earn $8000 in 7days,but you will pay me 20% when you recieve it
No scam
Ask me how?
WhatsApp โ€ช+1ย (782)ย 800โ€‘6361โ€ฌ