HTML is the building block of the web. Knowing some less-known, but useful parts of this markup language can make your life a lot easier. HTML attributes provide several features that can help you to get the most out of HTML. It defines additional characteristics or properties of an HTML element.

In this article, you'll learn about 11 HTML attributes that you probably haven’t heard of yet.

1. multiple

This attribute allows users to enter multiple values. You can use the multiple attribute with <input> tags and <select> tags. This boolean attribute is valid only for email or file input types.

Using multiple Attribute With <select> Tag 

        <label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>

Using multiple Attribute for File Input

By using the multiple attribute for file input, you can select multiple files (by holding the Shift or Ctrl keys). 

        <input type="file" multiple>

Using multiple Attribute for Email Input

By using the multiple attribute for email input, you can enter a list of comma-separated email addresses. All the white spaces will be removed from each address in the list. 

        <input type="email" multiple>

2. contenteditable

You can make the HTML content editable on a web page using the contenteditable attribute. This is a global attribute, i.e, it's common to all HTML elements. 

        <p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

3. spellcheck

The spellcheck attribute specifies whether the element may be checked for spelling errors or not. You can spellcheck text in the <textarea> elements, text in the editable elements, or text in the input elements(except passwords). 

        <p contenteditable="true" spellcheck="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Related: The HTML Essentials Cheat Sheet: Tags, Attributes, and More

4. download

You can download a resource using the download attribute. The download attribute tells the browser to download the specified URL instead of navigating to it. You can use the download attribute with <a> tag and <area> tag.

Note: The download attribute only works with same-origin URLs. It follows the rules of the same-origin policy. 

        <a href="xyz.png" download="myImage">Download</a>

5. accept

The accept attribute of the <input> tag specifies the type of files a user can upload. You can specify a comma-separated list of one or more file types as its value.

Accepting an Audio File 

        <input type="file" id="audioFile" accept="audio/*">

Accepting a Video File 

        <input type="file" id="videoFile" accept="video/*">

Accepting an Image File 

        <input type="file" id="imageFile" accept="image/*">

Accepting a Microsoft Word File 

        <input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

Accepting PNG or JPEG Files 

        <input type="file" id="imageFile" accept=".png, .jpg, .jpeg">

Accepting a PDF File 

        <input type="file" id="pdfFile" accept=".pdf">

Related: Cool HTML Effects Anyone Can Add to Their Websites

6. translate

The translate attribute tells the browser that the element should be translated or not when the page is localized. It can have 2 values: "yes" or "no". 

        <p translate="no">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Related: Simple HTML Code Examples You Can Learn in 10 Minutes

7. poster

The poster attribute is used to show an image while the video is downloading or until the user plays the video.

Note: If you don't specify anything, nothing is displayed until the first frame is available. When the first frame is available, it's shown as the poster frame. 

        <video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8. inputmode

The inputmode attribute indicates the browser which keyboard to display when a user has selected any input or textarea element. This attribute accepts various values:

None 

        <input type="text" inputmode="none" />

Numeric 

        <input type="text" inputmode="numeric" />

Tel 

        <input type="text" inputmode="tel" />

Decimal 

        <input type="text" inputmode="decimal" />

Email 

        <input type="text" inputmode="email" />

URL 

        <input type="text" inputmode="url" />
    
        <input type="text" inputmode="search" />

9. pattern

The pattern attribute of the <input> element allows you to specify a regular expression for which the element's value will be validated against. You can use the pattern attribute with several input types like text, date, search, URL, tel, email, and password. 

        <form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>

Related: Best Sites for Quality HTML Coding Examples

10. autocomplete

The autocomplete attribute specifies whether the browser should automatically complete the input based on user inputs or not. You can use the autocomplete attribute with several input types like text, search, URL, tel, email, password, date pickers, range, and color. You can use this attribute with the <input> elements or <form> elements. 

        <input name="credit-card-number" id="credit-card-number" autocomplete="off">

11. autofocus

The autofocus attribute is a boolean attribute indicating that an element should be focused on page load. You can use this attribute with <button>, <input>, <keygen>, <select>, or <textarea> elements.

Using autofocus Attribute With input Element 

        <input type="text" autofocus>

Using autofocus Attribute With select Element 

        <select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>

Using autofocus Attribute With textarea Element 

        <textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>

If you want to have a look at the complete source code used in this article, check out the GitHub repository.

Make Your Life Easier With JavaScript One-Liners

One-liner code helps to achieve more with less code. You can use several JavaScript one-liners to code like a pro.

With just one line of code, you can shuffle an array, find the average of an array, check if an array is empty, generate a random hex color, generate a random UUID, and so on.