10 HTML Attributes that Make Things a Lot Easier
Tags: html, webdev, beginners, tutorial
Published: 2023-04-28 11:55:25

With over a 100 HTML attributes available, it's almost impossible to remember them all. While we are already aware of several such attributes, there are a few we usually tend to forget or probably haven't heard of yet. At times we end up using JavaScript to add a specific functionality only to later realize that there is an HTML attribute for the same.

In this short article I've tried to list down a few HTML attributes that can in fact make things a lot simple. No doubt, you may have come across, or in fact used, some of them before. But, you are sure to find a few that can be added to your current list of 'favourite' HTML attributes.

#1. high / low
You may have used the `min` and 'max' attributes on the meter element. But, there are two more attributes that can help you add more information to the element - the `high` and the `low` attributes. These attributes help you specify a range as shown below:
```HTML
<label for="wed">Inventory on Wednesday</label>
<meter id="wed" min="0" low="45" high="95" max="100" value="70"></meter>
<br>
<label for="thu">Inventory on Thursday</label>
<meter id="thu" min="0" low="45" high="95" max="100" value="98"></meter>
``` 
In the above code, the `low` and the `high` attributes specify a range. If the value is within the range, the meter displays a green colour, and if the value is below or above the set range, the meter turns yellow.

![Image of the meter HTML attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4klp7s2x5zrs4eqmqbmj.png)

#2.type="search"
We've been using the `type` attribute in almost every other project, while working on forms. But, have you heard about the 'search' attribute value? Well, at least I haven't, or probably I have been living under a massive rock 😂. 
```HTML
<label for="website-search">Search this Website:</label>
<input type="search" id="website-search">
```
This value was designed for users to enter search queries. It is recommended to use it with a label tag for accessibility purposes.

![Image displaying the 'search' value for type attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97bqvydjkh73vtgd5gca.png)
Also, notice that as you start typing, the search box displays a 'X' button at the extreme right that allows you to delete the search term you are currently typing.

#3. maxlength
If you've been using JavaScript to restrict the user-input to a specific number of characters, here's an attribute that can make things easy for you. Simply add the 'maxlength' attribute to your `input` or the `textarea` element and specify the number of maximum character the user can input.
```HTML
<label for="name">Name</label>
<input type="text" id="name" name="name" maxlength="12">
```
Below is how the attribute restricts the user-input to a certain character-length.

![Image displaying the maxlength HTML attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rnfn3ooxh2vqq5ra9qi.png)

#4. open
You've probably used the `details` element to create a simple accordion menu. In some cases you might want to display the contents of one of the accordion menu items even before the user clicks on it. All you need to do is simply add the 'open' attribute to the menu item that you wish to display the contents of.
```HTML
<div class="accordion">
  <details open>
     <summary>First Section</summary>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus reiciendis nisi harum temporibus, velit a earum
      dignissimos sapiente quae quidem!</p>
  </details>

  <details>
     <summary>Second Section</summary>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus reiciendis nisi harum temporibus, velit a earum
      dignissimos sapiente quae quidem!</p>
  </details>
  
   <details>
     <summary>Third Section</summary>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus reiciendis nisi harum temporibus, velit a earum
      dignissimos sapiente quae quidem!</p>
  </details>
</div>
```
In the above code, the open attribute is applied to the first `details` element, and therefore, in the image below, you can see that the content of the first accordion menu item is displayed.

![Image showing the 'open' HTML attribute in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hibu81rwc0lrqdpqf67d.png)

#5. readonly
You can use the `readonly` attribute if you want to display a default value in an input field and prevent the user from changing the same. At times, you may confuse the `readonly` attribute with the `disabled` attribute.
```HTML
<label for="readonly">Readonly:</label>  
<input type="text" id="readonly" name="fruits" value="apples" readonly>
<br>
<br>
<label for="readonly">Disabled:</label>  
<input type="text" id="readonly" name="fruits" disabled>
```
As you can see in the image below, the `readonly` attribute usually has a defined value. However, the `disabled` attribute, on the other hand may or may not have a value. Also, a disabled input field can be recognized by its grey background. 

![Image displaying the readonly and disabled HTMl attributes in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2c31rojbrs56c3gyfdh.png)

#6. selected
You may have used the `checked` attribute to display a 'checkbox' or a 'radio' button in a checked state. Here's a similar attribute meant for displaying a selected option within the `select` element.
```HTML
<select id="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="mango" selected>Mango</option>
  <option value="orange" >Orange</option>
</select>
```
Here's how it looks like on the screen:

![Image of the selected HTML attribute in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39xk1yggr035g23gxh4t.png)

#7. download
If you have downloadable resources on your website, you can use the `download` attribute on your download links. When clicked, the resource will instantly be downloaded to the users system.
```HTML
 <a href = "https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg" download>Download Image </a>
```
Here's a .gif image showing the `download` attribute in action:

![.gif image displaying the download HTML attribute in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs43yeb03c9fw8vd3zkc.gif)

#8. step
If you want a user to input only a specific increment of a number, you can use the `step` attribute and set its value to the desired number. For instance, if you want your users to input a number that's not an odd number, you can set it to an even number, let's say 2.
```HTML
<label for="units">Units Purchased:</label>
<input type="number" id="units" name="units" step="2" min="0">
```
Below is the `step` attribute in action:

![.gif image displaying the step HTML attribute in action.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6c5uyrddqvbeqx4b4ga.gif)

#9. contenteditable
If you want certain sections of your website to be editable, you can use the `contenteditable` attribute on the elements in those sections.
```HTML
<p contenteditable>This content is editable. All you need to do is simply click on this paragraph and start editing</p>
```
Note that the content is not permanently edited by adding the `contenteditable` attribute alone.

![.gif image showing the `contenteditable` HTML attribute in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l484sozm836zih9ipv0.gif)

#10. title
If you do not want to spend too much of time creating a custom, beautiful-looking tooltip, you can use the `title` attribute which does pretty much the same thing but without all the jazz. 
```HTML
<p title="Free High Quality Images">Unsplash</p>
```
Here's how the title attribute displays the tooltip:

![A .gif image displaying the 'title' HTML attribute in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e3crbk8l2iuklhhuytd.gif)

So, this was a short list of 10 HTML attributes that I feel can make your task a lot easier. In case you know of any such attributes that are equally or more useful, would love to know about them in the comment section below. Thanks for reading. Have a beautiful day.