HTML5 overview at Web Directions South 2008

1. Prolog:
HTML5 features that
work in browsers now

2. • canvas element: scriptable image
• video and audio elements: embed
interactive video and audio
easily, without plugins
• new form attributes & APIs, for
client-side form validation & new
native form widgets in browsers

3. • API for offline Web applications:
ApplicationCache
• APIs for client-side data storage
per-session (sessionStorage)
and persistently across sessions
(localStorage and client-side
SQL database storage)

4. • postMessage() mechanism for
cross-document messaging
• API for native drag-and-drop
(without need for script library)
• native getElementsByClassName
• more...

5. December 1997

6. December 1997:
HTML4 published as
W3C Recommendation

7. In other words...
It’s been ten years since
the last major update
to the HTML language.

8. So have we all just been
sitting around on the
boat doing nothing for
the last ten+ years?

9. Well, no...

10. Work on Web
technologies at the
W3C was focusing on
some other things...

11. XML, XML Schema,
XForms, XHTML2...

12. XHTML 2.0 seems to me the live
proof that something is going wrong
at W3C... I strongly suggest
dropping all XHTML 2.0 efforts in
favor of a new “xHTML 5.0”
language. Clearly a successor to
HTML 4, feature-oriented, made for
the web.
Daniel Glazman, December 2002

13. Meanwhile, elsewhere...

14. September 2003:
Opera CTO Håkon Lie
first announces what
will become
Web Forms 2.

15. Web Forms 2
represented the early
beginnings of the work
that led to HTML5.

16. April 2004:
Web Applications 1.0,
which eventually
becomes HTML5.

17. June 2004:
W3C workshop on
Web applications, a
turning point that
led to...

18. June 2004:
WHATWG launched,
with Apple, Opera,
Mozilla on board.

19. The dream of a new web, based on
XHTML+SVG+SMIL+XForms, is just
that — a dream... The best way to
help the Web is to incrementally
improve the existing web
standards... so that web content
authors can actually deploy new
formats interoperably.
Brendan Eich, June 2004

20. “HTML is the assembly
language of the Web.”

21. Web Forms 2,
Web Applications 1.0...
So who actually wrote
the drafts?

22. Ian “Hixie” Hickson

23. March 2007:
W3C launches a new
HTML Working Group
to work on HTML5.

24. Co-chairs:
Dan Connolly, W3C
Chris Wilson, Microsoft

25. http://esw.w3.org/topic/
HTML/history

26. What’s the value
proposition for the
HTML5 work?

27. HTML5 makes life
easier and better for
Web developers.

28. How?

29. HTML5 increases
interoperability, reduces
need for UA sniffing &
multiple code paths.

30. HTML5 provides better
feature parity with
proprietary single-
vendor stuff like Flash.

31. Frankly, HTML5 also
provides new business
opportunities for Web
professionals like
yourselves.

32. So what exactly does
“HTML5” consist of?

33. •The HTML5 spec itself
• Support for HTML5 features in
4 major browser engines and in
other applications
•HTML5 parsing libraries
• validator.nu HTML5 validator

34. How many of you have
read some part of the
HTML5 spec in detail?

35. The HTML5
spec itself...

36. A wee bit overloaded.

37. Focuses mostly on
specifying conformance
criteria for browsers.

38. Introduces many
new APIs.

39. But also conflates
conformance criteria
for HTML content
authors into same spec.

40. Would like to have a
separate spec for just
the HTML5 markup
language itself?

41. That is, a spec for the
HTML5 markup
language without the
APIs and browser spec?

42. The HTML5 draft
provides a formal spec
for HTML parsing and
error handling.

43. HTML is not XML.
HTML is not SGML.

44. Most HTML content is
not well-formed XML.

45. •
Well-formed XML:
<input disabled=quot;disabledquot;>
•
Empty attribute: <input disabled>
•
Without quotes: <input value=yes>
•
Single quotes: <input type='checkbox'>
•
Double quotes: <input name=quot;be evilquot;>

46. More than 93% of
Alexa Top 500 sites
are not valid.

47. We need to specify error handling
behavior to ensure interoperability
“even in the face of documents that
do not comply to the letter of the
specifications”.
http://www.whatwg.org/news/start

48. Authors will write invalid content
regardless of what we spec. So the
spec states “what authors must not
do, and then tells implementors what
they must do when an author
does it anyway”.
Ian Hickson, “Error handling and Web language
design”, http://ln.hixie.ch/?start=1074730186

49. Don’t get hung up on syntax.

50. HTML5 defines HTML as an abstract
language with two standard
syntaxes supported by browsers:
• a text/html syntax, with parsing
rules defined by the HTML5 spec
• an XML syntax, with parsing rules
defined by the XML spec

51. Similarly, applications can potentially
represent HTML in memory in any
number of ways.

52. However, there’s only one standard
in-memory representation supported
by browsers: The W3C DOM.
The HTML5 spec precisely defines
the DOM representation that
browsers must use to represent
HTML content in memory.

53. Simplify where we can.

54. <!DOCTYPE html PUBLIC
quot;-//W3C//DTD XHTML 1.0
Transitional//ENquot;
quot;http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtdquot;>

55. <!DOCTYPE html>

56. <meta http-equiv=quot;Content-Typequot;
content=quot;text/html; charset=utf-8quot;>

57. <meta charset=quot;utf-8quot;>

58. • canvas element: scriptable image
• video and audio elements: embed
interactive video and audio
easily, without plugins
• new form attributes & APIs, for
client-side form validation & new
native form widgets in browsers

59. • API for offline Web applications:
ApplicationCache
• APIs for client-side data storage
per-session (sessionStorage)
and persistently across sessions
(localStorage and client-side
SQL database storage)

60. • postMessage() mechanism for
cross-document messaging
• API for native drag-and-drop
(without need for script library)
• native getElementsByClassName
• more...

61. Demos:
http://www.whatwg.org/
demos/2008-sept/

62. Somewhat related
work outside of the
core HTML5 effort...

63. • SVG in Opera, Mozilla, WebKit
• CSS transforms/animations
• CSS3 Selectors
• Selectors API

64. • XMLHttpRequest level 1 and 2
• Access Control for Cross-Site
Requests
• native JSON support in browsers
• JavaScript 3.1 “Harmony”