HTML5

By Michael Baxter on 10 July 2011 with tags Tech

Bespoke CMS E-commerce Marketing Utopia Hosting Into CMS Upgrade Tech Consulting Tips

HTML5 is the next generation of the HTML web standard. It offers new elements, direct support for video and audio, built-in form validation and a new feature called 'canvas'. Although the full specification of HTML5 is yet to be ratified, new features of HTML5 are already being supported, to varying degrees, by current web browsers including Safari, Google Chrome, Opera and Firefox. So, whilst it’s improbable everything in the current draft of the HTML5 specification will survive until recommendation by the W3C, there are plenty of new features that can be implemented right now.

To illustrate the improvements, consider that using existing HTML4 code, sections within the 'body' of a web page are structured using div tags. These tags can have an attribute e.g. ‘class’ or ‘id’ and a value. However, although a human reader of the code can ascertain what that div represents (a block of navigation), a machine cannot. This is because HTML4 doesn’t include elements that more accurately describe the specific structures within a current web page. The HTML5 specification introduces a number of new section elements that allow the contents of web pages to be more accurately (semantically) described.

While reading the HTML5 specifications is useful, those short on time may find it more informative to de-construct existing web pages to see how the new code works in practice. Thankfully a website exists showcasing web sites built using HTML5.

Before rushing out to implement HTML5 in a design it’s worth mentioning two words that cause many a web designer to convulse: Internet Explorer. Sadly, at present, Internet Explorer offers no support for any of the new semantic HTML5 section elements discussed. However, JavaScript can be used to effectively ‘teach’ these elements to Internet Explorer so it renders them correctly.

New tags

section - used to define a section of related content and should usually include a header. The HTML5 specification advises, “…examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis”.

nav - should be used to wrap a section of navigation links. These should be for other inward links such as home, contact, blog etc or for linking up sections of a large page such as a table of contents.

article - defines an independent part of a website; something that could be used ‘standalone’, such as a cooking recipe or a product review.

aside - to separate things like advertising, quotes or nav sections from the main content of a site.

header - can be used multiple times within a page. It is intended to be the header of the section it is used within so can live within elements like 'section' or 'article'.

footer - Ordinarily, it may be assumed that each page would have just one footer, visually appearing at the bottom of the page (including a mini site-map or contact details for example) but in HTML5, footers, like the header element, can appear any number of times within different sections or articles.

audio and video - Ordinarily, adding video or audio to a web page is far from an exact science. Viewing the media is always reliant on some form of browser plugin. These new tags aim to make adding media simple and not require these. At present, Safari only allows media with the .mov extension to be used whilst Firefox and Opera only support Ogg.

input - Another boon for the average web developer is that HTML5 has built-in form validation. HTML5 includes (amongst others) input types for number, date, email, range and url. All without writing JavaScript

canvas - Adds a blank canvas to a web page and then using JavaScript it’s possible to add all manner of interactivity to this canvas. This is an area where a lot of growth is in the form of HTML 5 games and applications.

As the HTML 5 specification is still in a state of flux, it’s still possible to provide feedback on its development; head over to the W3C site to air your thoughts on the next version of HTML. Alternatively, for those who want to get cracking, download the latest draft of the specification and get coding your first HTML5 based web site.