Quick guide to HTML5

Before we get started here just a quick note - this is not intended for anyone who is actually planning on writing a lot of HTML5. It's just, as the title suggests, a quick guide for non-coding types to give you an idea of what all the fuss is about and what the next age of the web will look like. So, here we go.

What is HTML?

An acronym much bandied about but rarely discussed in much detail is Hypertext Markup Language - essentially, the bricks and mortar of web pages. Aside from the images, videos and various annoying banners and skyscrapers, what you're looking at right now is a page of HTML code that's made up of a series of tags within the code, you can embed all the other bits and pieces of media on the pages and all the interactive navigational elements too.

Why do we need a fifth version?

HTML has been in its current state - HTML4 - since the late 90s meaning that the language of the Internet is essentially over 10 years out of date. Think about what was around 10 years ago in technology and the Internet itself begins to feel a little backward. With a new way of coding the pages, the Internet can be made more interactive, it can run smoother and it can be easier for people to write for. All of this means that we get a faster, richer experience.

So what does HTML5 add?

There are plenty of demos surfacing on the Internet already, with a good resource being the aptly named http://html5demos.com/, but areas in which it is likely to change browsing are:

The most exciting new feature for many developers is the graphics potential. HTML5 has two additions called Canvas and SVL (Scalable Vector Graphics) both of which allow people to draw and manipulate graphics directly from the code, rather than having to add in images. Essentially, it's the first time we've been able to draw with HTML and it means that you can create moving footage and videos, which users can interact with far quick than the proprietary plug-ins that we currently have to rely on like Adobe Flash. For an example, take a look at the replica of the opening of Star Wars below (via Mashable). This isn't a video clip of the film. It's all done in HTML5. What's more, because it's vector graphics, it can be scaled up to any size without losing the sharp resolution.

Because of its interactive nature, you can use the code like this to build games - much like the Flash games on the Internet at the moment - or you can have an enormous database behind and complex graphics that could change and bring up the information as quickly as you hovering your mouse over it. One example might be a map of the UK showing election results for each part of the country in minute detail, even down to exact votes and how it's differed over the last 100 years. This last one is something that can already be done but not without a great deal of effort on the programmer's side and a large amount of stickiness, bandwidth and reloading on the user's.

Another interesting and, doubtless, soon to be hotly debated change is the addition of geo-location capabilities to each web page as well - as native to the code. To put it scarily, the Internet will know where you live. Of course, it basically does already, it just doesn't pass on the information quite so much - unless you happen to start breaking a lot of laws that is. With the pages you're using knowing this detail - with your consent of course - what you look at can be tailor made to be more relevant to you.

For example, you wouldn't have to put in your address to find out how to get from A to B, or Tescos could immediately tell you what your local branch was and if, indeed, it has dried quail's eggs in stock. It's a feature that makes the Web more intelligent and our experience of it more seamless.

A good example to try is html5demo.com/geo (FF3.5, iPhone OS 3). The demo will pinpoint your location based on the IP you are using and then give you that information to save you typing it in. Think social networking, think form filling, think securely logging into your bank account or a home automation system of the future. 

With our increasing dependence on web-based apps losing the connection to our cloud access is something of an important issue. HTML5 has two features to help this called Database and App Cache. Between them, you can still access all the areas of the application when offline, even if you didn't navigate to those pages while you had a connection.

Things you might not notice in your regular use of the Web of the future are that videos will be much easier to embed with better support for more codecs and the programmers will also be able to make them so that interaction is easier. This could mean annotations to the footage, changing orientation or a different, non-proprietary control bar for playback.

Or what about comments that appear as you are reading the story, very much like Google Wave. Allowing you to see journalists actually writing the story as they type without you having to refresh the page.

JavaScript will now also run separately in the background of the page. What this means for us is that any problems it encounters are not going to turn the rendering of the everything else into treacle or make the entire browser bite the dust.

Last of all, from the developer's point of view, the code itself will be more economical. Some of the tags will disappear, subsumed into the role of the CSS as set by the rules of each particular site - some new ones will be added to help differentiate between the navigational and readable areas of the page and you'll no longer have to close all the tags with the version of each pair - very handy for avoiding sifting through code soup to find the offending mistake.

When's it coming?

It's starting to pop up here and there and at the moment will only work on certain browsers, namely Safari 4.0.4 in OS X Snow Leopard and the WebKit nightly build. Video sites like YouTube and Vimeo are beginning to roll out support for it but expect something closer full swing by the end of the year.