There are dozens upon dozens of HTML attributes. Some are well-known and widely used, such as style and href, while others are more obscure.
However, the obscure attributes aren’t necessarily the less useful ones. Many lesser-known attributes are like shortcuts – they can save you a lot of time and make your life as a coder easier.
I know from the people who come to Code Conquest to learn code that it’s easy to underestimate the usefulness of some of these time-savers. In this post, I’ll show you six lesser-known but nifty attributes.
1. The Autofocus Attribute
The autofocus attribute is an attribute you can give to an <input>, <textarea> or <button> element in your HTML. Including this attribute will ‘auto focus’ the element – that is, it will let you start typing instantly (in the case of a text field) or hit Enter (in the case of a button).
The autofocus attribute is a boolean attribute, meaning that it will do its job no matter what value you give it. Boolean, if you didn’t know, refers to the concept that something is either on or off, true or false, there or not there – the same concept as binary code.
Usage
<input type="text" autofocus="" /> <!-- Works with input of any type --> <textarea autofocus="">Enter Text Here</textarea> <button autofocus="">Click Me!</button>
Since only one HTML element can be focused at a time, you should only use the autofocus attribute once in your HTML source. However, if you do happen to include it more than once, it will be the last element with the attribute that gets the focus.
You can use the autofocus attribute to save a bit of time for your users if you have a web page where an input field or button is the center of attention – such as a contact page or search page. Google does this nicely by auto focusing the search box on its home page.
As well as saving time for your users, the autofocus attribute also saves time for you as the coder. If it didn’t exist, you would need to write a line or two of JavaScript to achieve the same effect. I don’t know about you, but I find the attribute much simpler and quicker.
The autofocus attribute is supported by Internet Explorer 10, Google Chrome, Mozilla Firefox and Safari, but not by Opera or older versions of IE.
2. The Placeholder Attribute
The placeholder attribute too works with the <input> and <textarea> elements. Like the value attribute, the placeholder attribute displays default text in the field, but unlike the value attribute, the text is automatically cleared once you start typing, and the text is not submitted with the form should you not enter any of your own text.
Usage
<input type="text" placeholder="Email Address" /> <textarea placeholder="Message"></textarea>
As demonstrated in the code above, the placeholder attribute can be used for contact forms, as well as email submission forms, search forms or virtually anywhere where your users will be inputting text. It works nicely as a hint as to what the user should type in.
Before the placeholder attribute was introduced, you would have to write a few JavaScript event handlers to handle placeholder text. Using this attribute saves you the time and effort.
The placeholder attribute is supported by Opera, Google Chrome, Mozilla Firefox and Safari, but not by any current version of Internet Explorer.
Live Demo
3. The Spellcheck Attribute
Sticking with the theme of attributes for text field elements, the spellcheck attribute is used to either enable or disable browser spellcheck. It takes a value of either true (to enable spellcheck) or false (to disable spellcheck).
Usage
<input type="text" spellcheck="false" /> <!-- Spellcheck disabled --> <textarea spellcheck="true"></textarea> <!-- Spellcheck enabled -->
Spellcheck in most browsers will be enabled by default, so you probably won’t need to use the true value, but there are some times when using the attribute set to false will come in handy. For example, many people make up their own usernames, so if you’ve got a text field for people to enter their username, you’ll probably want to disable spellcheck so that people’s usernames don’t get flagged as unrecognized words.
The spellcheck attribute is extra nifty because it doesn’t just save time, but does something that wouldn’t be at all possible without it – not even with JavaScript.
The spellcheck attribute is supported by Opera, Google Chrome and Safari, but not by Mozilla Firefox or Internet Explorer.
Live Demo
4. The Maxlength Attribute
The final attribute for text fields that I’m covering here is the maxlength attribute. This attribute sets a limit on the number of characters you can enter into a text field.
Usage
<input type="text" maxlength="20" /> <!-- Works with input of any type --> <textarea maxlength="20"></textarea>
In the examples above, the limits on the lengths of the inputs are both 20 characters. The need to set a limit comes up a lot on websites, such as for username length or email message length, and the maxlength attribute does exactly that.
This attribute is a real time-saver, since it does an important part of form validation for you. If it didn’t exist, you might need to check the input lengths server-side, and this not only wastes time for you (since you’d have to write extra code), but it wastes time for your users as well.
(Ed note: Best practice is not to rely on client-side validation alone: it’s just too east to get around. The security brought by server-side validation is worth any extra time it takes to set up and implement.)
The maxlength attribute is supported by all five major browsers. Hooray!
Live Demo
5. The Reversed Attribute
When we think of <ol> ordered lists, we normally think of lists starting at 1 and counting up. But did you know that including reversed attribute on your <ol> element allows your ordered list to count down?
The reversed attribute is a boolean attribute, meaning that it will do its job no matter what value you give it.
Usage
<ol reversed="">
<li>Number 3</li>
<li>Number 2</li>
<li>Number 1</li>
</ol>
No more manually writing out your numbered list whenever you want it to count down. The reversed attribute saves you a lot of time by doing the grunt work for you.
The one downside is that the reversed attribute, as useful as it is, is currently only supported in Google Chrome.
Live Demo
- The number of list items is the starting number,
- and then it counts down…
- …to 1.
6. The Start Attribute
The start attribute is also used on <ol> elements, and specifies a starting number other than 1.
Usage
<ol start="6">
<li>Number 6</li>
<li>Number 7</li>
<li>Number 8</li>
</ol>
This attribute is useful if you want to break up an ordered list into separate sections, where each section picks up from where the previous one left off. Again, no more manually writing out your numbered lists.
The start attribute is supported by all five major browsers. Hooray!
Live Demo
- Where’s number 1?
- Where’s number 2?
- Where’s number 3?
- Where’s number 4?
- Where’s number 5?
You can even use the start attribute together with the reversed attribute! The following list starts at 2 and then counts back in reverse order…
- Number 2
- Number 1
- Number 0
- Number -1
- Number -2
BONUS: The Contenteditable Attribute
Yes, I know the title of this post is 6 Nifty, Time-Saving HTML Attributes, but I just had to include a bonus seventh one. :)
The contenteditable attribute is one of those features that’s not so well-known, but is very nifty. Simply put, it allows you as a website viewer to edit the content of an element, right inside your browser.
To prove that the contenteditable attribute really does change the content of the HTML element, locate the element in your browser’s developer tools, and you’ll see that the HTML actually has changed.
The contenteditable attribute is a global attribute, meaning it will work on any HTML element. It can be used to either enable or disable content editing. It takes a value of either true (to enable editing) or false (to disable editing).
Usage
<p contenteditable="true"></p> <!-- Content editing enabled --> <p contenteditable="false"></p> <!-- Content editing disabled -->
While the contenteditable attribute isn’t really a shortcut to anything, you have to agree – it is nifty.
The contenteditable attribute is supported by all five major browsers. Hooray!
Live Demo
You can edit this text!
Conclusion
Every coder likes a time-saving shortcut, and the HTML attributes I’ve shown you in this post are exactly that. I encourage you to implement them in your HTML projects whenever the opportunity arises.
Do you know of any other nifty HTML attributes? Share them with us in the comments.
Charles ManfreCharles Manfre is the owner of CodeConquest.com.
