Deng's Blog

Deng's Blog

7 HTML attributes that you may not be using

Subscribe to my newsletter and never miss my upcoming articles

As a web designer probably there a lot of attributes that you are familiar with and you use them frequently but here are 7 attributes that you may not be using.

Contenteditable

It's a global attribute that specifies whether the content of an element is editable or not.

<p contenteditable="true">Text</p>

Download

It's belong to anchor element in which it specifies that the target will be downloaded when a user clicks on the hyperlink.

<a href="document.pdf" download> Download</a>

Hidden

Hidden belong to global attribute and as the name suggested it hide or specifies that an element is not yet, or is no longer relevant.

<p hidden>This text is hidden </p>

Multiple

It allows user to enter more than one value. it belong to input and select element.

<!-- allows you to upload multiple files -->
<input type="file" multiple>

<!-- allows you to select more than one option -->
<select multiple> 
   <option value="#">Value 1</option>
   <option value="#">Value 2</option>
   <option value="#">Value 3</option>
</select>

Poster

Belong to video element in which it specifies an image to be shown while the video is downloading or hasn't started playing.

<video controls poster="image.jpg"> ... </video>

Spellcheck

It specifies whether the element is to have its spelling and grammar checked or not.

<input type="text" spellcheck="true">
<!-- don't use it on password -->

Accept

This attribute specifies what files are supported to be uploaded.

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

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

<!-- accept="image/jpeg" allows only jpeg/jpg -->
<!-- accept="image/png" allows only png  -->

What attribute that you are not using?, please comment it below.