6 Nifty, Time-Saving HTML Attributes

Charles Manfre

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://ba.rrypark.in Barry

    “This [maxlength 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.”

    Client-side validation can be bypassed.

    Client-side validation is for the good of the user: quicker to fix errors, prevents needless page loads, etc…

    Server-side validation ensures data received matches requirements (and is secure). Always validate server side, no matter what.

  • bugi

    You can’t omit server-side-validation, even if you’ve set maxlength-attribute.
    Evil hackers will post without using the browser form

  • Douglas Perreault

    Just an FYI, but IE10 supports both the placeholder and spellcheck attributes.

    Also note that maxlength on textareas is new for HTML5; hence, it is not supported by earlier versions of IE and last I knew, it’s still not supported in Opera.

  • http://www.tateossiancufflinks.com/ Muhammad Usama

    This is very informative article regarding HTML elements. This will improve my knowledge.

  • Chris Emerson

    Spellcheck attribute worked fine for me in Firefox…

    • http://www.onsman.com Ricky Onsman

      Not for me, Chris, using FF 19.0.

      • Chris Emerson

        Using the live demo in this page, same gibberish in both, I get red lines in the top one but not the bottom. Also on FF 19.

      • Chris Emerson

        In fact according to this, it’s been available since Firefox 2, and other things I can find suggest it originated in Firefox in the first place

        https://developer.mozilla.org/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms

      • http://www.onsman.com Ricky Onsman

        OK, but I don’t get the red lines in the top one. For me, this attribute doesn’t appear to work in FF.

      • Chris Emerson

        Perhaps you have spell checking off in your global settings then, as described by that link

      • http://www.onsman.com Ricky Onsman

        Update on that: it doesn’t work for me in FF on Windows 8, nor on Windows 7 Pro. It does work for me in FF on Windows 7 Home Premium. My head hurts.

      • http://www.onsman.com Ricky Onsman

        Spellchecking is on in all browsers I’m using.

      • Chris Emerson

        Strange, I’m using Win8. I’ll try Win7 Pro at work tomorrow as well if you like!

      • Chris Emerson

        Do you have dictionaries installed in all those versions where it doesn’t work?

      • http://www.onsman.com Ricky Onsman

        Dictionaries seem to be properly set up and working in all cases. I have a few more browser / OS combinations I can try, and will also report on what else I find. When my head stops hurting.

      • Chris Emerson

        It might also be worth checking the value of layout.spellcheckDefault in about:config, though I would have thought the global setting in the options would control this anyway

      • http://www.onsman.com Ricky Onsman

        It’s set to 1, thus spellcheck is on.

      • Chris Emerson

        Tested at work (FF19 Win7Pro), works fine

  • Chris Emerson

    Also, agree with the other posts about maxlength – it’s really bad advice to tell people they can skip server side validation

  • http://artmarkette.com Richard Markette

    The reversed attribute works in my Firefox 19.

  • Kenny Landes

    This is some cool stuff. I especially like reverse order lists and defined start number lists. I hadn’t seen those before, and can see there may be a good use for those from time to time.

    However, I believe the presence of the attribute means true, the absence of it means false, so there would be no reason to write autofocus=”” since autofocus alone would do the trick. Same should be true for contenteditable.

    • Ben Axnick

      The =”” isn’t necessary for HTML5, but the purpose of including it is to ensure the document is well-formed XML and therefore XHTML compliant. This makes it easier for browsers, parsers, and humans to try and interpret your documents and helps keep them future-proof.

  • http://randomecho.com/ Soon Van

    autofocus (without the =””) seems to be working fine here on Opera 12.

  • http://www.pmob.co.uk Paul

    It might be worth pointing out that a number of those attributes are only valid in html5. I didn’t notice it beingmentioned anywhere in the article (unless I missed it).

  • Carlos Sosa

    Thank you very much. I didn’t know about a couple of them. And yes, they all are nifty.

  • James

    Can someone please educate me on a possible, plausible, genuine use-case for contenteditable? My brain is only weak and I don’t see where it would be useful.

    • Dmitri

      Let’s say you display some persisted data in p’s or ul’s or div’s and want the user to be able to update the data on the same page. Set contenteditable to true on all the controls you want user to update, then assign an event handler to those controls to ajax the updated contents to the server.

    • Scott Cox

      A teacher could have students edit a provided rough draft, changing word choice or adding detail, and then submit the finished draft! (That’s my plan anyway, now that I’ve seen the trick…)

  • http://www.impressivewebs.com Louis

    FYI – I wrote a polyfill for “reversed” a while back:

    http://www.impressivewebs.com/reverse-ordered-lists-html5/