Tweet HTML5 – A Brief Introduction

Over the past few months, the HTML 5 movement has gained a lot of momentum. Particularly since both Google & Apple recently announced they are pouring their weight behind the new standard – the former, for example, phasing in an HTML 5 video player for YouTube and Apple refusing to support Flash on their mobile devices in favour of these emerging technologies.

Most modern browsers now have fairly good support for many HTML5 properties but what are the new features and their advantages over current methods?

New semantic Markup

Coding is much more minimal and neater with meaningful tags have been introduced to structure a document. For example, a basic WordPress blog can be laid out using the following:
<header> – for introductory information such as a logo and description.
<nav> – for primary navigation.
<article> – for main content such as a blog post.
<aside> – for information related to the main content such as a sidebar.
<footer> – to contain secondary navigation, copyright notice etc.

Semantic markup has many benefits, mainly because it allows programs to properly recognise the information in your pages and make decisions based on it. It can aid huge improvements in such things as search engine optimisation and accessibility.

Resources
A List Apart – Semanatics in HTML5

Video

HTML5 supports video playback without the need for a plug in, the result of which is a format that is much lighter on bandwidth and the CPU. Videos play instantly and users can jump to anywhere in the video without buffering. In addition videos can be manipulated inline using JavaScript and CSS.

Resources
YouTube HTML5 Video Player
FlashBlog – HTML5 and Flash video

Canvas

Some herald canvas as the death of Flash since it can be used to represent elements visually in your browser and generally go beyond the limitations of CSS. It can be utilised, for example to draw diagrams, charts and animations, although, the possibilities are endless. In this example Canvas and Javascript have been used to create a game of Astroids.

Resources
How to Draw with HTML 5 Canvas
HTML5 Canvas and Audio Experiment

Offline Storage

This allows offline storage of data within the web browser, essentially making it possible to have, for example, offline versions of Gmail, Calendar & Docs. These developments have lead Google to ditch their Gears technology and should become a staple in their forthcoming Chrome OS.

Forms

The new web forms allows you to do validation, placeholder text and a many other features much more simpler and semantic way and without the use of Javascript. Other new “built in” elements include date pickers and number sliders.

Resources
HTML5 Forms Demo
A form of madness

Geolocation

Allows access to a users geographical position through the web browser and without the need for GPS hardware as found in smart phones. This can create a much more personalised experience for the user based on their location, for example, automatically locating your nearest bank branch or nearest italian restaurant without having to input a postcode.

Resources
HTML5 geolocation demo – (requires FF)

It is probably obvious that this summary barely scratches the surface of the full capabilities of HTML5 and it will be a good many years before we see this as a passed standard. With this in mind, using its features should be done with a deal of caution but this should not stop Web Developers from experimenting and implementing where possible.

HTML5 gives us a web without proprietary plugins such as Flash and Silverlight and drastically improves the experience for the user in terms of speed, usability and accessibility. Huge web companies such as Google and Apple have put real leverage behind HTML 5 and will this will likely play an important role in making it ubiquitous in the near future.