šŸ¤© Access a heap of free courses with a SitePoint account

6 Nifty, Time-Saving HTML Attributes

Charles Manfre
Share

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

  1. The number of list items is the starting number,
  2. and then it counts downā€¦
  3. ā€¦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

  1. Whereā€™s number 1?
  2. Whereā€™s number 2?
  3. Whereā€™s number 3?
  4. Whereā€™s number 4?
  5. 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ā€¦

  1. Number 2
  2. Number 1
  3. Number 0
  4. Number -1
  5. 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.