16 Interactive steps up to the HTML 5 plate

Over the past few months you may have heard a lot about HTML5, the latest iteration of the language used to create web pages.

What is HTML5?

In short, HTML5 is the next evolution of the programming language that lays out content on websites. In most cases, a HTML5 website is essentially the same as a HTML4 site; that is until you start exploring the hidden benefits.

Semantic Layout

In good old HTML4 (and XHTML) items on a page were laid out using a framework of either “divisions” (divs) or “tables”. Whilst this was great for taking the content of a page and laying it out beautifully, any div or table was the same as any other as far as browsers and search engines were concerned.

HTML5 brings in semantic versions of these div elements, which give clues to a browser or search engine to what they may contain. A “header” element will logically contain the title of the page, a company logo, a mission statement, etc. Whilst a “footer” element will contain Copyright details, links to legal pages, etc. HTML5 also introduces elements such a “section” to mark out the main content of the page, “aside” to highlight content that is secondary to the main content of the page and “article” which is logically used for news articles or press releases. HTML5 also introduces the new “nav” element, to clearly outline the position of the websites navigation links.

All this extra “information” or “hints” on your page, really helps search engines such as Google or Bing, to understand and catalogue your content. Making a HTML5 site search engine friendly.

Forms

HTML5 brings with it a whole raft of form validation elements. It is now possible to specify that a field on a HTML5 form must be filled out as an email address, telephone number, date, etc.

Also, it is possible to set fields to be “required” whereby your browser will not allow you to submit the form until these fields are filled in completely and correctly. “My website already does that” I hear you cry. Which is perfectly true, but currently it is done by a piece of code running in the website background, this brings with it a small processing overhead. This can slow your website down, or if the user doesn’t allow their browser to run scripts, the validation doesn’t happen at all. Making a HTML5 Website quicker and leaner.

Embedded Video and Audio

Whilst currently, embedded media requires a website user to have countless plugins (Flash, Quicktime, Media Player, etc) installed to play video and audio, HTML5 brings it’s own, simple video and audio support. Browsers that support HTML5 video and audio elements (Internet Explorer 9 and Upwards, Google Chrome, Mozilla Firefox, Apple Safari, Opera) have video and audio players built-in. These players recognise the standard video and audio tags within a HTML5 webpage, and instantly setup the relevant player and codec to play the media. Again making a HTML5 Website leaner, more reliable, and more compatible

Canvas

One of the most exciting elements of HTML5, and still in its infancy, Canvas is seen as the long term replacement to 3rd party tools such as Flash, Shockwave and Silverlight for rendering animated elements on a webpage.

Our team are researching and implementing Canvas based solutions for animation rendering. Here are some experiments that the Google Chrome team are trying out on this special website - http://www.chromeexperiments.com/ - because the more complex elements of the HTML5 draft are not complete, these experiments are best viewed in Google Chrome.

Geolocation

HTML5 supports Geolocation, meaning you can target elements of your page to a users locality. Best used with a GPS enabled tablet PC or Smartphone. Geolocation feeds the devices position to the webpage and then allows the page content to be tailored based on where they are. Making a HTML5 website more dynamic and user focussed.

Data Storage

Simply put, HTML5 Data Storage is a more advanced version of “cookies”. The main advantage is speed and overheads. Cookies were queried and sent back and forth between the user and the web server whenever any data is viewed or changed. HTML5 Data Storage is used solely on the users computer. Cutting down on load times and data movement. Making a HTML5 website quicker and more secure.

Other Features

The HTML5 specification is still currently in draft, and is being upgraded and updated on a daily basis. As these features evolve, you can rest assured that the 16 Interactive team will be kepping ahead of the game.

16 Interactive and HTML5

Whilst HTML5 is still being developed, it is usable in most browsers today, and those that don’t support it will simply continue to read web pages the HTML4 way.

16 Interactive began creating all new sites in HTML5 and CSS3 (we will blog about this soon) as standard some time ago, and have been building in graceful fallbacks that allow sites to still look good in older browsers.

So if you want to be part of the future of the internet. Upgrade you browser (A list of HTML5 compliant browsers can be found below) and give us a call on 01242 654000 and ask about what HTML5 could do for your new Website.