7 HTML5 Features That You May Not Know About
Written by Aaron Lumsden on 15 Sep 2012
HTML5 has been a hot topic recently. Although its been around for a while now, I still find myself coming across features that I didn’t know about. Here’s a few that I thought I’d share with you.
To check what browsers support these following features visit When can i use.
HTML5 autofocus Attribute
The autofocus attribute let’s you automatically focus on an input, button or textarea as soon as the page has loaded. Previously I’ve had to refer to using javascript to implement such solutions. Autofocus is a great way to provide a good user experience as it is saving the user having to click on an input.
<input autofocus="autofocus" />
HTML5 download Attribute
The HTML5 download attribute allows developers to force a file to download rather than go to that specific page. No longer do we have to rely on server side coding to force the file to download. This can be great for web apps. In the href you add the location for the file that you want to download. In the download attribute you specify what you want the name of the file to be called, so in the example below the name of the download file would be called “MyPDFReport.pdf”.
<a href="my.pdf" download="MyPDFReport">Download PDF</a>
HTML5 Link Prefetching
Prefetching allows the browser to download another page or asset in the background. This can be great for paginated pages. For example whilst you are on page 1 you would ‘link prefetch’ the 2nd page of the paginated pages. This would result in page 2 loading almost instantly as it has already been preloaded. It can also be used on other assets such as images making it great for things like image sliders or implementing a photo album somewhat similar to how Facebook photo browsing works. It proves to be more responsive and therefore creating a smoother user experience.
Here’s the code for it.
<link rel="prefetch" href="http://www.aaronlumsden.com/page2">
HTML5 hidden element
The hidden attribute works in a similar way to CSS ‘display:none’. It basically hides an element. It can be described as:
“The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.). Then, JavaScript could remove the hidden attribute, and make the element visible.”
<div hidden="hidden"> </div>
HTML5 Spellcheck
The spellcheck attribute works on any input (apart from passwords), textarea’s and editable content divs. It determines whether the browser should spellcheck the text that it contains.
<input type="text" spellcheck="true|false">
HTML5 Datalist Element
This is a nice little welcome addition to our web development toolkit. The HTML5 datalist element behaves much like an auto suggest input. Prior to the introduction of the ‘datalist’ element we had to rely on a combination of javascript and server side coding to talk to our database to pull in the suggestions. This element does a way with all that.
<form action="form.php" method="get"> <input list="mylist" name="mylist" > <datalist id="mylist"> <option value="CSS"> <option value="HTML"> <option value="PHP"> <option value="Jquery"> <option value="Wordpress"> </datalist> <input type="submit" /> </form>
HTML5 output Element
The output element acts like an input field except it doesn’t accept any data input. It is good for apps such as a calculator where the output element would be used for the sum result of the calculations. It will be handy for any type of mortgage calculator, loan repayments, or tax rates calc. I will be using this when I do some updates to my invoicing app billappp as at the moment I’m just using some spans. The official definition for the output element is:
“The output element represents the result of a calculation.”
Here’s how we define an output element:
<output name="output"></output>
What do you hink to these elements. Will they save you time? Have you tried any of them out yet or is there any other elements that you like that I’ve not mentioned? Let me know your thoughts in the comments below.
An Introduction to CSS Variables
Responsive Web Design Made Simple with Adobe Edge Reflow
A Brief History of the World Wide Web
I don’t see many of these things on whencaniuse, unless I missed them. What about hidden, autofocus, and spellcheck?
Hi Steve, thanks for the comment. At the moment you can use ‘hidden’ & ‘autofocus’ in the latest versions of Chrome, Firefox, Safari & Opera, not IE (surprise, surprise). Spellcheck is supported by the same browsers except Firefox.
Hello,
And what about datalists? Quite handy but not supported yet, am I wrong?
The datalist element is currently supported in all major browsers except for Safari & IE.
Prefetch comes in real handy. Can be used for most anything. Nice list, its always good to be remineded
Prefetch is indeed one of the most profound ones here, together with the download attribute. thanks for these, I hadn’t heard of the prefetch one yet.
Yeah it’s definitely a good, welcome addition to HTML. I’ve used it in a couple of personal projects and it does speed things up.
This is super helpful. Thanks. Small things like these define quality in a website
Glad you found it helpful, they really are some great features
Some of those trick i didn’t know
. Thanks for share.
You may want to use a different example than <input type=”hidden” /> to show off the hidden attribute…
Thanks for the post, really useful.
Glad you found it useful Leena
Great stuff, never knew about the spell check attribute – pretty awesome
It’s a little confusing to say “input type=hidden hidden=hidden”, when “input type=hidden” would already be hidden. That example would be a little clearer if you put “hidden=hidden” on a different element, like a “div”.
Also, it’s an important thing to point out about prefetch… that feature is merely a HINT to the browser to consider prefetching the resource, whenever it feels like it knows when that might be a good idea. There’s no prescribed guarantee that it will be prefetched using that technique. By contrast,
if you preload resources using dynamic JavaScript loading techniques, that’s actually not just a “hint” that you want it, but a forceful “hey browser, go load that for me”, so there’s nearly a guarantee that you’ll get the resource loaded.
Moreover, if the resource is not cacheable (for a variety of reasons), “prefetch” will end up potentially creating unnecessary loads, so it’s important to not try to prefetch things unless you’re sure they’re properly cacheable.
Hi Kyle. You are right it was a bit stupid of me to add the hidden attribute to an element that is already hidden. I’ve updated the post and thanks for the clarification on prefetch.
Very nice article and very neat stuff! Appreciated!
Hey this is some great stuff. I never knew about datalist, a nice progressive enhancement.
All are amazing
And I think we can add
Onpaste
This will prevent pasting in field.
The prefectch is nice. There is also prerender. Prefetch loads. Prerender loads and runs. Try `rel=”prefetch prerender”`. See prerender-test.appspot.com.
I am surprised i had not heard about them yet. These are very helpful. Thanks
Prerender definitely sounds interesting and useful
Perfect, thx for web-site caniuse.com
Are there any manual to all HTML5 features and attributes with such nice describe?
Nice article, unfortunately the comments are not correct. Autofocus, spellcheck… they are supported in IE 10 you might want to check it here http://msdn.microsoft.com/en-us/library/hh673549(v=vs.85).aspx
http://www.youtube.com/gotreehouse sent me, really useful tags that I did not even know existed.
TNX, but some disadvantages of css3 and html5 is the browser support
I prefer not to use them, because you have to spend more time taking care of IE than developing your site.
you must do many “hacking” things to get it work
They may be supported in ie10 but that hasn’t been officially released yet.