Some HTML Attributes You May Not Be Using

Here’s a list for you folks. Some HTML attributes you may not be using in your day to day projects.

contentEditable

The contenteditable global attribute is an attribute indicating if the element should be editable by the user.

If so, the browser modifies its widget to allow editing.

<p contenteditable="true">User will be able to type in this paragraph</p>

Click and edit me, I'm editable!

download

The download attribute belongs to anchor element, if you add it in your link, it will tell the browser that the link is a downloadable file.

And when user clicks it, it tries to download that link.

<a href="files/doc.pdf" download>Download PDF</p>

hidden

hidden is a global attribute and as the name suggests, it hides the element or specifies that the element is not yet, or no longer relevant.

And when user clicks it, it tries to download that link.

<p hidden>I will not be shown in DOM</p>

multiple

multiple allows users to select multiple values, it can be provided in input type files and in select.

<!-- Select Multiple Files -->
<input type="file" multiple />

<!-- Select Multiple Options -->
<select multiple>
  <option>Biryani</option>
  <option>Tikka</option>
  <option>BBQ</option>
</select>

ctrl + click to select multiple.

poster

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button.

If this is not included, the first frame of the video will be used instead.

<video controls poster="/images/poster.jpg">
  <source src="movie.mp4" type="video/mp4" />
</video>

spellcheck

The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.

The following can be spellchecked:

• Text values in input elements (not password)
• Text in <textarea> elements
• Text in editable elements

<p contenteditable spellcheck="true">
  This exampull will be checkd fur spellung when you try to edit it.
</p>

<!-- spellcheck="false" or just don't provide it anyway -->
<p contenteditable spellcheck="false">
  This exampull will nut be checkd fur spellung when you try to edit it.
</p>

accept

The accept attribute specifies a filter for what file types the user can pick from the file input dialog box.

Note: accept attribute can only be used with <input type="file" />

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.

<!-- This allows images only -->
<input type="file" accept="image/*" />

<!-- This allows PDF only -->
<input type="file" accept="application/pdf" />

That’s all folks! Hope you found this helpful, see you in the next one 😉