Introducing HTML5 An overview of HTML5, its history and how it is transforming web development Carol Maughan Web Content Developer, DLA Piper LLP UK (http://uk.linkedin.com/in/carolmaughan)
Why is HTML5 relevant?
It is a major development in web technology.
It will influence both the non-technical and technical aspects of web content management.
Its features are being integrated into content management systems, so it's important to know what it is possible to do.
It is designed to make all web content/sites more accessible across devices and operating systems, so will reduce the need to create completely different versions of sites for different devices.
There is an emphasis on backwards compatibility, so current standards will not become obsolete and HTML5 sites can be accessed on older browsers.
The current HTML standard is HTML4.01.
HTML has not been significantly transformed much since it was first created as a web standard in 1989.
So, after very little change for many years, HTML itself is being drastically transformed by HTML5.
HTML5 wasn't meant to be
HTML5 represents a victory of consumer choice over the preference of the World Wide Web Consortium (W3C).
In January 2000, W3C recommended Extensible HyperText Markup Language (XHTML) 1.0, which incorporated HTML4 and included strict rules to standardise the syntax of the code.
In May 2001, W3C recommended XHTML1.1 and declared HTML to be a legacy standard.
However, browsers continued to be flexible with code as most web pages contain at least one violation of XHTML because it is so strict. Most websites would return error messages if strict XHTML standards were enforced.
WHAT the G?
In May 2004, the Web Hypertext Applications Technology Working Group (WHATG) formed, with the aim of bringing HTML back to life. It is not part of W3C.
WHATG's mission is to develop a new version of HTML that is consistent with the way the web actually works, while maintaining backward compatibility.
Instead of enforcing strict standards, the aim is to work with browsers to build on the way that web pages are actually served by the browser.
WHATG devised Web Applications 1.0, while W3C worked on version 2.0 of XHTML.
Near the end of 2006, it was clear that WHATG was gaining momentum while XHTML 2.0 was lacking support by any major browser.
W3C announced it would collaborate with WHATG, resulting in Web Applications 1.0 being renamed HTML5.
HTML5 is not an official specification yet, but it will have a prominent place in website development, given that the major browsers are incorporating HTML5 features and Microsoft has stated its intention to incorporate HTML5 in IE10.
HTML5's new features and how it differs from HTML4.01 and XHTML1.0
Emphasis on simplification
The 'doctype' declaration in HTML5 is simply: <!DOCTYPE html>
Here is an example of a current doctype declaration: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
So, you can begin a very simple HTML5 document like this:
<p>Blah blah blah</p>
Housekeeping of HTML
In HTML5, many tags and attributes have been 'retired' because they are purely presentational and could be better handled through CSS, or they damage accessibility. Examples include:
tags: <font>, <center>, <frame>
attributes: 'background' attribute on <body>, 'bgcolor' attribute on <table> - these are elements that modify the text, which should really be handled by CSS so that content is separated from its presentation.
A list of all differences between HTML4 and 5 can be found at: http://www.w3.org/TR/html5-diff/#ref-html5
New 'elements' (functionality)
HTML5 introduces new tags that define the structure or the context of information, so that it can be understood by browsers and search engines (semantic tagging). These tags simplify the process for creating sections that are common in many websites (such as footers).
Other new tags include:
<header> for introductory content (that can include navigation)
<nav> for navigational elements
<article> for independent content, such as a blog post or article
<section> for a section in a document, similar to sections in newspapers
Microdata: a new semantic syntax
As well as removing presentational elements, WHATG has extended the elements of HTML to include new ones that allow for more context to be provided for items of content.
Examples of the application of microdata include the ability to add an event to your calendar, or download someone's contact details.
For more about microdata, please see: http://html5doctor.com/microdata/
HTML5 integrates W3C's geolocation application programming interface (API) (http://www.w3.org/TR/geolocation-API/) which enables website visitors to share their location data with trusted websites.
It is an 'opt-in' function, so that no-one is forced to share their location data.
The API is supported by most major browsers (including mobile browsers).
A geolocation demo: http://merged.ca/iphone/html5-geolocation (Interesting to note that Firefox alerts you to the fact that the site requests location info and you have to actively click on 'share location'.) The site shows how it generates a map from the info gathered via the API.
HTML5 includes multimedia tags such as <audio> and <video>, which means that media uploads that used to require a plug-in such as Flash or Silverlight, and associated scripting, can be done using simple HTML tags.
Using the <video> tag to upload a video with interactive controls (that are embedded into the MP4 file) would be done as:
Because most browsers support HTML5, this will help media files play smoothly across devices as it will not be necessary for site visitors to have the right plug-in.
Canvas (for creating graphics)
One of the most innovative developments in HTML5 is the <canvas> tag, which allows for the development of rich graphical content within web pages.
The <canvas> tag is named after the concept of an artist's canvas; it is a blank space waiting to be used. On a web page, a canvas is a designated section of the page that you can draw on. The <canvas> tag eliminates the need for plug-ins that provide animation.
Client side (browser) web storage
Cookies are an old technology that was designed to enable data to be stored during a web session. Disadvantages include: repeatedly transmitting the same data every time an HTTP request is made, slowing down the server and sending data across the internet, and limited storage size (4KB).
In HTML5 provides two options: local or session storage. The difference is that session storage expires when the browser session ends, while local storage has no time limit.