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.
HTML5 image by Matthias Kampitsch
To check what browsers support these following features visit When can i use.
HTML5 autofocus Attribute
<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:
<div hidden="hidden"> </div>
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
<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:
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.