DEV Community

Deng Beny
Deng Beny

Posted on

7 HTML attributes that you may not be using

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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  -->
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)