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? <ul><li>It is a major development in web technology. </li></ul><ul><li>It will influence both the non-technical and technical aspects of web content management. </li></ul><ul><li>Its features are being integrated into content management systems, so it's important to know what it is possible to do. </li></ul><ul><li>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. </li></ul><ul><li>There is an emphasis on backwards compatibility, so current standards will not become obsolete and HTML5 sites can be accessed on older browsers. </li></ul>
HTML5 wasn't meant to be <ul><li>HTML5 represents a victory of consumer choice over the preference of the World Wide Web Consortium (W3C). </li></ul><ul><li>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. </li></ul><ul><li>In May 2001, W3C recommended XHTML1.1 and declared HTML to be a legacy standard. </li></ul><ul><li>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. </li></ul>
WHAT the G? <ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>WHATG devised Web Applications 1.0, while W3C worked on version 2.0 of XHTML. </li></ul>
HTML5 arrives <ul><li>Near the end of 2006, it was clear that WHATG was gaining momentum while XHTML 2.0 was lacking support by any major browser. </li></ul><ul><li>W3C announced it would collaborate with WHATG, resulting in Web Applications 1.0 being renamed HTML5. </li></ul><ul><li>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. </li></ul>
What's new? <ul><li>HTML5's new features and how it differs from HTML4.01 and XHTML1.0 </li></ul>
Emphasis on simplification <ul><li>The 'doctype' declaration in HTML5 is simply: <!DOCTYPE html> </li></ul><ul><li>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"> </li></ul><ul><li>So, you can begin a very simple HTML5 document like this: </li></ul><ul><li><!DOCTYPE html> </li></ul><ul><li><title>HTML document</title> </li></ul><ul><li><p>Blah blah blah</p> </li></ul>
Housekeeping of HTML <ul><li>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: </li></ul><ul><li>tags: <font>, <center>, <frame> </li></ul><ul><li>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. </li></ul><ul><li>A list of all differences between HTML4 and 5 can be found at: http://www.w3.org/TR/html5-diff/#ref-html5 </li></ul>
New 'elements' (functionality) <ul><li>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). </li></ul><ul><li>Other new tags include: </li></ul><ul><li><header> for introductory content (that can include navigation) </li></ul><ul><li><nav> for navigational elements </li></ul><ul><li><article> for independent content, such as a blog post or article </li></ul><ul><li><section> for a section in a document, similar to sections in newspapers </li></ul>
Simplifying geolocation <ul><li>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. </li></ul><ul><li>It is an 'opt-in' function, so that no-one is forced to share their location data. </li></ul><ul><li>The API is supported by most major browsers (including mobile browsers). </li></ul><ul><li>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. </li></ul>
Multimedia tagging <ul><li>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. </li></ul><ul><li>Using the <video> tag to upload a video with interactive controls (that are embedded into the MP4 file) would be done as: </li></ul><ul><li><video src="video.mp4" controls> </video> </li></ul><ul><li>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. </li></ul>
Further info and examples of HTML5 <ul><li>HTML5 Canvas tutorials: http://www.html5canvastutorials.com/ </li></ul><ul><li>Dive into HTML5: http://www.diveintohtml5.org/ </li></ul><ul><li>HTML5 Doctor: http://html5doctor.com/ </li></ul><ul><li>How new standards will change the web: http://www.bitwizwebdesign.com/Blogs/Jonathan-Clark/January-2011/How-New-Standards-Will-Change-the-Web </li></ul><ul><li>A game created entirely in HTML5 with no plug-ins: http://www.pirateslovedaisies.com/ </li></ul><ul><li>Create a custom Bon Jovi video: http://director.bonjovi.com/ </li></ul><ul><li>IE test drive site: http://ie.microsoft.com/testdrive/ </li></ul><ul><li>HTML5 addict: www.twitter.com/html5_addict </li></ul>
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.