HTML5 in Practice
An HTML5 Report Card

Michael(tm) Smith
mike@w3.org
http://people.w3.org/mikesideshowbarker…on Twitter*, GitHub, etc.

This talk is about HTML5in practice, given in theformat of a report card.
with letter grades.

Evaluating HTML5• HTML5 ancillary materials• HTML5 tools support• HTML5 features spec’ed• HTML5 features implemented

HTML5 ancillary materials:

grade: B -Ancillary materials arecomplements to the spec.

Ancillary materials are thematerials that most of us
learn from directly (ratherthan the spec itself).

HTML5 differencesfrom HTML4

http://w3.org/TR/html5-diff/Hands-on/
one-stop shopping

http://html5rocks.com/

Tutorials/how-to
guides for authors

Several print books fromJeremy Keith, Bruce
Lawson & Remy Sharp,
Mark Pilgrim, more

Dive into HTML5
http://diveintohtml5.org/

The HTML5 Doctors

http://html5doctor.com/

Alternative
authoring references

HTML5:The Markup Language Reference

http://dev.w3.org/html5/
markup

HTML5: The Markup Language
Reference is an alternative
front-end to the HTML5 spec

HTML5:
Edition for Web Authors

http://dev.w3.org/html5/
spec-author-viewHTML5: Edition for Web
Authors is an author-friendly
subset of the spec thatomits implementation details

Fork me!
http://github.com/benschwarz/
html5forAuthors
http://github.com/sideshowbarker/
html5forAuthors

Bonus:Annotated JavaScript/
EcmaScript 5 spec in HTML*http://sideshowbarker.github.com/
es5-spec/

Get expert guidanceon addressing
accessibility needs

New!
http://html5accessibility.com/

…from Steven Faulkner@stevefaulkner

HTML5accessibility.com gives
info about which HTML5 userinterface features are usable bypeople who rely upon assistive
technology (AT) to use the Web.

Check current browser
implementation support
for specific features

HTML5Accessibility workarounds
http://html5accessibility.com/
index-aria.html

HTML5 Readiness
http://html5readiness.com

When can I use…

http://caniuse.com/

HTML5 tools support:

grade: C+

HTML5 Validator(stable)http://validator.nu

HTML5 Validator(unstable)

http://w3.org/html/check

HTML5, CSS3, etc.,
feature detection

http://modernizr.com/

The professional badass’s base
HTML/CSS/JS template for afast, robust and future-proof site!

http://html5boilerplate.com/

Adobe Dreamweaver& Illustrator CS5HTML5 Packs

HTML5: The Good Parts• Syntax simplifications: A+• HTML5 parsing algorithm: A+• MathML & SVG integration: A+• New elements/attributes: A+• New APIs for scripting: A+

HTML5: More Good Parts• HTML5 design principles: ?
• maintain XHTML support: ?

Syntax simplifications

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd"><!doctype html>

<meta http-equiv="Content-Type"content="text/html;
charset=UTF-8">

<meta charset="UTF-8">

New elements• <video> & <audio> (no plugins)• <canvas> (2D/3D image scripting)• <article>, <section>, <header>• <details>, <progress>, <meter>...

• <ruby> (annotations)• all SVG elements (MathML too)New attributes• for client-side validation of forms+ form controls: date picker, &c.

• draggable (drag-and-drop)• marking up context menus• contenteditable (editable pages)• spellcheck (turn off spell checking)Crap removal• <frame>, <frameset>• <a name>• more...

New APIs for scripting• API for <video> & <audio>• 2D drawing API for <canvas>• 3D <canvas> API: WebGL*• getElementsByClassName()• innerHTML and more…

New APIs for scripting• Web Storage (local + session)• Indexed Database (non-SQL)• Web Messaging (cross-doc/postmg+)• Web Workers• WebSocket API + Protocol

“Friends of HTML5” APIs

• Geolocation• Device Orientation/Motion• File API (w/ HTML5 Drag & Drop)• Selectors API• Audio API* (sampling+synthesis)

“HTML5” has become
shorthand for “TheOpen Web Platform”.

Web-Platform formats:
HTML5, CSS3, SVG,ARIA, and… JavaScript

HTML design principles
http://w3.org/TR/html-design-principles/HTML design principles• Support existing content• Ensure interoperability• Precisely define UA behavior• Handle errors (non-draconian)
not revolution• Evolution• “Priority of constituencies”

Important point:
HTML5 includes XHTMLEven more important point:
IE9+ fully supports XHTML

Grading some specificHTML5 features

Two ways to grade
spec features• Does the feature meet market
needs and user and developer
needs well or not?

• Is the feature currently well-

supported in browsers or not?

Let’s start by gradingsome features on how
well they meet market/
user/developer needs

getElementsByClassName

spec grade: A+

Interactive & UI elements<details>,<progress>, <meter>

spec grade: B+

New structural elements<article>, <section>

grade: B ?

<canvas> 2D

spec grade: B-/D- ?

<canvas> 3D

spec grade: B+/D- ?

<video>

spec grade: B+/C- ?

Let’s now grade somefeatures on How wellthey are currently
supported in browsers

HTML5 canvasin all major browsers

current support: B+

SVG
static SVG supported,animations less supported

current support: C+

HTML5 video
in all major browsers
BUT… codec problem :(current support: B+

Query selector API
use CSS selector syntax
instead of DOM methods

current support: A-

Downloadable fonts@font-facecurrent support: B+

HTML5 forms
Opera already, in progressin other browsers

current support: D+

HTML5 local storage
Better solution thancookies for saving data/state

current support: B+drag & dropinteroperability problems

current support: C-

Michael(tm) Smith
mike@w3.org
http://people.w3.org/mikesideshowbarker…on Twitter*, GitHub, etc.