HTML5 Features Overview

HTML5 has introduced many neat features and so here is a quick overview of a few of them! To see if your browser supports these features check out html5test.com

LocalStorage

Allows web sites to store information on a computer and retrieve it at a later date. Similar to cookies but it allows for greater quantities of data storage and is not sent back and forth to the server on every request. Web sites access LocalStorage using javascript after the page has loaded. Anyone who has physical access to a machine can view and edit the storage database. Web sites can read and modify its own values in storage but cannot access values stored by other sites under the same-origin restriction.

Web Workers

Provides a standard way for browsers to run JavaScript in the background. With web workers, multiple “threads”  can be spawned that all run at the same time, more or less. These “background threads” can do complex mathematical calculations, make network requests, or access localStorage while the main web page responds to the user scrolling, clicking, or typing.

Offline Web Applications

Thanks to HTML5 anyone can build a web application that works offline. The first time an offline enabled  site is visited, the web server tells the browser which files are required to work offline, anything from HTML, javascript, images and even video. Once these are downloaded the site can be visited even when not connected to the internet. The browser detects that you are offline and uses the files it has already downloaded. Once back online any changes made can be uploaded to the web server.

Placeholder Text

This is an improvement on existing forms. Placeholder text is displayed inside the input field as long as the field is empty and not focused. Once the field is clicked on the placeholder text disappears

Form AutoFocus

To solve the problem of tricky javascript auto focus on forms, HTML5 has introduced an autofocus attribute on all form controls. It moves the focus to a particular input field, but because it is markup and not a script the bahaviour is consistant across all web sites. Vendors can also offer users a way to disable the autofocusing behavior.

Microdata

A standardized way to provide additional semantics in your web pages. The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers). There’s no harm in including microdata markup in your web pages. It’s nothing more than a few well-placed attributes, and search engines that don’t understand the microdata attributes will just ignore them. But if you need to access or manipulate microdata through the DOM, you’ll need to check whether the browser supports the microdata DOM API.

History

For manipulation of the browser history via scripts. Navigation of history has been available in previous HTML versions but the new part is a way to add entries to the browser history and respond when those entries are removed from the stack by the user pressing the back button. This means the URL can continue to do its work as a unique identifier for a current resource, even in script heavy applications

References:

Pilgrim, M. (2011). Dive Into HTML5. Available: http://diveintohtml5.info/table-of-contents.html. Last accessed 4th October 2012.

W3C. (2012). WebStorage. Available: http://dev.w3.org/html5/webstorage/. Last accessed 4th October 2012