Useful HTML Attributes that You Probably Don’t Know

Sahib Singh • March 28, 2022


HTML is the skill that every web developer must-have. You can’t call yourself a web developer without knowing this markup language. Every website that you see on the web was built using HTML because it has a lot of useful and powerful features that you can benefit from as a developer in order to create web pages. With all that being said, HTML also has attributes that you can attach to elements or tags in order to add certain interactive features to your HTML elements.

01. Accept

As you know, HTML allows you to create inputs where you can upload your files. In addition to that, the HTML attribute accept is used on upload inputs in order to specify the types of files or the only format that a user can upload to the server.

For example, we can accept to only upload jpg and png to our server.


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

02. Multiple

When present, it specifies that multiple options can be selected at once.

The multiple attribute in HTML can be attached to the tags like <input> and <select>. It basically allows the user to Selecting multiple options vary in different operating systems and browsers.

For example, we can also use the attribute multiple on HTML upload inputs to allow the user to upload multiple files.


<input type="file" multiple/>
<select name="cars" id="cars" multiple>

03. Content editable

The attribute contenteditable specifies whether the content of an element is editable or not. When the contenteditable attribute is not set on an element, the element will inherit it from its parent.


<p contenteditable="true">This is an editable paragraph.</p>

04. Download

The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.

You just need to specify the file name on the attribute download and the file path on href.


<a href="index.html" download="YourFileName">Download File</a>

05. Translate

The translate attribute specifies whether the content of an element should be translated or not.

This attribute can be used for example on text logos to keep the same brand name whenever a page is translated to another language.


Here we use translate="no": ice cream.
Here we use class="notranslate": ice cream.
<p translate="no">Don't Translate This Content</p>

06. Pattern

The pattern attribute specifies a regular expression that the <input< element's value is checked against on form submission.

We can also use another attribute title with this attribute pattern to help the user write the correct form of text on an input.


<form action="/action_page.php">
<label for="country_code">Country code:>/label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">