Html5(2)

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.

Background 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. Instead, associated standards/technology have led the innovation in web development (such as web browsers, JavaScript, cascading style sheets). 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.

HTML5 arrives 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.

What's new? 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: <!DOCTYPE html> <title>HTML document</title> <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. 'Microdata' elements can modify the tagging of content such as events or publications to enable JavaScript functionality at browser level, so that people can interact with the web content directly. 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/

Simplifying geolocation 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.

Multimedia tagging 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: <video src="video.mp4" controls> </video> 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. Using the <canvas> tag is a bit more technical than other HTML tags as you need to incorporate JavaScript into the tags. However, this is less complicated than developing an animation and embedding the plug-in, in a third party tool.

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). HTML5 resolves these problems because it works with JavaScript to allow larger amounts of data to be stored locally in the browser without calling to the server. 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.

Further info and examples of HTML5 HTML5 Canvas tutorials: http://www.html5canvastutorials.com/ Dive into HTML5: http://www.diveintohtml5.org/ HTML5 Doctor: http://html5doctor.com/ How new standards will change the web: http://www.bitwizwebdesign.com/Blogs/Jonathan-Clark/January-2011/How-New-Standards-Will-Change-the-Web A game created entirely in HTML5 with no plug-ins: http://www.pirateslovedaisies.com/ Create a custom Bon Jovi video: http://director.bonjovi.com/ IE test drive site: http://ie.microsoft.com/testdrive/ HTML5 addict: www.twitter.com/html5_addict

Html5(2)

More Related Content

What's hot

Viewers also liked

Similar to Html5(2)

Recently uploaded

Html5(2)