Ryan
Posted on April 28, 2023
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.
Posted on April 28, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.