Wednesday, September 26, 2012

7 HTML5 features that you may not know about

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

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.”
<input type="hidden" hidden="hidden"/>

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">
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.