3. What is HTML5?
• Joint effort between W3C and WHATWG
• The next major revision of HTML and
XHTML
• Documentation of previously undocumented
APIs (“DOM Level 0”)
• A snapshot of an evolving standard
• “It’s not one big thing”
3/
HTML5 Learn & Share /
12/1/2011
4. An Evolving Standard
• HTML4 reached “W3C Recommendation”
status in 1997
• HTML5 draft started in 2004
• Some features already available, others in
progress
• Timeline for HTML5 Recommendation set for
2022
4/
HTML5 Learn & Share /
12/1/2011
6. <canvas>
• By itself, a blank box. With JavaScript, a
drawing surface
• Basic drawing support: lines, gradients,
embedded images, basic shapes
• Potential future support for 3D canvases
6/
HTML5 Learn & Share /
12/1/2011
7. <video>
• Standardized way to embed video without
QuickTime, Flash, RealPlayer, etc…
• <video> tag does not specify
codec/container type
7/
HTML5 Learn & Share /
12/1/2011
8. Geolocation API
• Scripting solution for detecting user latitude,
longitude, altitude
• W3C standard requires it be opt-in
• Specification of “high accuracy” and “low
accuracy” modes
8/
HTML5 Learn & Share /
12/1/2011
9. New Form Content
• Placeholder text
• Autofocus
• Required fields
• New input types: email, URL, numbers, sliders, date
pickers, color pickers, search boxes
9/
HTML5 Learn & Share /
12/1/2011
10. Drag and Drop
• Defines a “draggable” attribute for any
element
• Dragenter, dragover, drop events (and
associated elements for assigning handlers)
• Support for different effect types: “none,”
“copy,” “link” and “move”
10 /
HTML5 Learn & Share /
12/1/2011
11. Local Storage
• Provide data storage for web apps without
plugins or browser-dependence
• Store key-value pairs of anything JavaScript
supports
• Event listener support to detect changes
11 /
HTML5 Learn & Share /
12/1/2011
12. …and more
• MathML and SVG support
• <section>, <header>, <nav>, <figure>…
• Form elements independent of the form itself
• Spellcheck, contextmenu, and hidden
attributes
• Removal of many elements now handled by
CSS
12 /
HTML5 Learn & Share /
12/1/2011
13. Recommended Reading
W3C Working Draft: http://www.w3.org/TR/html5/
WHATWG “Living Standard”: http://www.whatwg.org/specs/web-
apps/current-work/multipage/
Free online O’Reilly text: http://diveintohtml5.org
Google guides and tutorials: http://www.html5rocks.com/
13 /
HTML5 Learn & Share /
12/1/2011
W3C – World Wide Web ConsortiumWHATWG – Web Hypertext Application Technology Working GroupDOM Level 0 – DOM as it existed as of IE/Netscape 3.0
W3C Recommendation – What makes it an official standard. Working Draft -> Candidate Recommendation -> Proposed Recommendation -> W3C RecommendationHTML5 Recommendation features exhaustive testing not done before for any prior standardsFeature support entirely browser-dependent, but Opera, Firefox, Safari, and (upcoming) IE9 all implement a number of different new features.
Could accept user input and allow them to draw; could also draw entirely based on scriptsCoordinate-based system
A way around Flash video, as described in the news article seen earlierUnfortunately, kind of a non-standardized standardWhich type of video is supported very browser-dependent – to hit them all, need to provide different types
Beneficial for mobile devicesHigh accuracy typically means GPS, low means triangulation
Autofocus – avoid scripting issues wherein focus is grabbed after images load (caused by timing of onload event typically used for setting focus)iPhone screen shots show the benefit of using “email” or “number” input typesIf the new input types are supported, it reverts to type=text… this is standard for everyone, even IE6, so no reason not to use the new types now
Based on original Microsoft implementation (supposedly?)JavaScript-heavy, but native support in the browser will make it much easier to implement
A number of attempted hacks in the past – MS-specific solution, “Flash cookies,” etc.Some worked, but all were eventually browser- or plugin-dependent, with varying limitations and APIsUp to 5 MB at this point, with no real mechanism for requesting more
