10 HTML Attributes that Make Things a Lot Easier

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:

<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.

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 😂.

<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.

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.

<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.

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.

<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.

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.

<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.

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.

<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:

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.

 <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:

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.

<label for="units">Units Purchased:</label>
<input type="number" id="units" name="units" step="2" min="0">

Below is the step attribute in action:

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.

<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.

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.

<p title="Free High Quality Images">Unsplash</p>

Here's how the title attribute displays the tooltip:

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.