22 | CONFIDENTIAL
I. Why HTML5?
II. How do I get started?
III. New Elements
V. Browser Support
33 | CONFIDENTIAL
• Your existing markup will still work! No need to
relearn things you already know.
• Using HTML5, you can make your web
applications better with new features, like video
integration without outside plugins (I.e. Flash for
• Now your web applications can be more
dynamic, faster and user friendly.
– You can to draw on a canvas, play video,
and design better forms with sliders and
– You can reduce the number of images that
are used on a Web page. As a very simple
example, adding rounded corners to a
page is done with simple code and CSS.
• Most features are compatible across browsers.
For those that are not, there are methods to
work around some of the limitations.
Why make the switch to HTML5?
44 | CONFIDENTIAL
How do I get started?
• “Upgrading” to HTML5 can be as simple as changing your doctype.
Previous versions of HTML defined a lot of doctypes, and choosing
the right one could be tricky.
In HTML5, there is only one doctype:
• Now you can use the new HTML5 elements…
66 | CONFIDENTIAL
• Canvas – declare 2D / 3D, allows us draw natively in the browser
• Contacts – Common contacts API (local repository) [New – not implemented
• Drag and Drop - it brings native drag and drop support to the browser.
• File – Access to sandbox areas on client PC
• Forms – validation
• Geolocation – location of devices (latitude/longitude)
• History - control over the history state of a user's browser session.
• Index DB (object DB) – local storage within the browser (structured data)
• Media Capture – Camera / web cam access through the browser
• Microdata – used to nest metadata within existing content on web pages
(used to provide richer ui)
Basic info around the new API’s
77 | CONFIDENTIAL
• Messaging – (Cross-document) allows scripts to interact across different
origins or source domains without enabling cross-site attacks
• Offline Web Apps – like browser cache, but more robust
• Selection –Supports selecting items in DOM (supports CSS3 type of
selectors), to be used along with JQUERY.
• Server Sent Events – allows for push notifications to be sent from a server to
a browser in the form of DOM events (one way)
• Web Notifications – browser based notifications [Experimental]
• Web Sockets – 2 way “chat” between the server and the client
• Web Storage – a spec for storing client side data (key value pairs) similar to
of any user scripts. Helps keep page responsive.
• XHTMLHTTP Req – level 2 / AJAX
Basic info around the new API’s
88 | CONFIDENTIAL
Other things to be aware of
• There are two versions of the HTML5 specification: One
published by the W3C and the other published by the
– W3C HTML5 specification
– WHATWG HTML5 specification
– The living HTML specification maintained by the WHATWG
contains additional APIs to those in the W3C HTML5 spec
(although generally they are also maintained by the W3C but in
• Browser Support
– Many online charts available to view current browser support for
99 | CONFIDENTIAL
• A really useful tool for checking if your site is html5
compatible is the W3C Markup Validator.
• Use a plugin like html5shiv so that older versions of IE
support the new tags that you're using.
CSS3 features in the user’s browser.
1010 | CONFIDENTIAL
• Dive Into HTML5 (online tutorial in book format)
• W3C Editor’s Draft Spec on differences between HTML4
• Pluralsight has courses on HTML5