6 Nifty, Time-Saving HTML Attributes
There are dozens upon dozens of HTML attributes. Some are well-known and widely used, such as
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
autofocus attribute is an attribute you can give to an
<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).
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.
<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 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
placeholder attribute too works with the
<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.
<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.
placeholder attribute is supported by Opera, Google Chrome, Mozilla Firefox and Safari, but not by any current version of Internet Explorer.
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).
<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.
spellcheck attribute is supported by Opera, Google Chrome and Safari, but not by Mozilla Firefox or Internet Explorer.
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.
<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.)
maxlength attribute is supported by all five major browsers. Hooray!
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?
reversed attribute is a boolean attribute, meaning that it will do its job no matter what value you give it.
<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.
- The number of list items is the starting number,
- and then it counts down…
- …to 1.
6. The Start Attribute
start attribute is also used on
<ol> elements, and specifies a starting number other than 1.
<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.
start attribute is supported by all five major browsers. Hooray!
- 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. :)
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.
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).
<p contenteditable="true"></p> <!-- Content editing enabled --> <p contenteditable="false"></p> <!-- Content editing disabled -->
contenteditable attribute isn’t really a shortcut to anything, you have to agree – it is nifty.
contenteditable attribute is supported by all five major browsers. Hooray!
You can edit this text!
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.