An update on the state of HTML5, given to web414, a web developer's group.

1. HTML5
The State of the Dis-Union

2. Reliable Sources

3. HTML5 For
Designers
Jeremy Keith

4. The Spec
Ian Hickson, editor
http://www.w3.org/
TR/html5/

5. The
Authoring
Spec
Ian Hickson, editor
http://www.w3.org/
TR/html5/author

6. Dive Into
HTML5
Mark Pilgrim
http://
diveintohtml5.org/

7. HTML5
Doctor
Rich Clark, Bruce
Lawson, Tom Leadbetter,
Jack Osborne, Mike
Robinson, Remy Sharp,
Oli Studholme
http://html5doctor.com/

8. HTML5
Gallery
Showcase of HTML5-
based sites
http://
html5gallery.com/

9. Progress
What’s the frequency, Kenneth?

10. Current state
Spec is in Last Call phase
Next step is call for implementations and review
Arguments still exist, but their targets are smaller

11. HTML5 Mythbusting
Let’s Play!

12. HTML5 won’t be complete
for 10 years!

13. HTML5 won’t be complete
for 10 years!
Definition of complete
is different

14. HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete

15. HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
Is curently in final
comment stage

16. HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
Busted!
Is curently in final
comment stage

17. HTML5 isn’t suported by
most browsers!

18. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript

19. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also

20. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also
HTML4 is part of
HTML5

21. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also
HTML4 is part of
HTML5
Little else

22. HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class=xxx> also Plausible!
HTML4 is part of
HTML5
Little else

23. HTML5 means XHTML is
Dead!

24. HTML5 means XHTML is
Dead!
HTML5 includes an
XHTML-compatible
version

25. HTML5 means XHTML is
Dead!
HTML5 includes an
XHTML-compatible
version
XHTML
implementations will
continue to work

26. HTML5 means XHTML is
Dead!
HTML5 includes an
XHTML-compatible
version
XHTML
Busted!
implementations will
continue to work

27. HTML5 Makes Flash
Irrelevant!

28. HTML5 Makes Flash
Irrelevant!
Video
H.264
Theora
VP8

29. HTML5 Makes Flash
Irrelevant!
Video
H.264
Theora
VP8
Interaction
Canvas

30. HTML5 Makes Flash
Irrelevant!
Video
H.264
Theora
VP8
Plausible!
Interaction
Canvas

31. What About WebM?

32. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container

33. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies

34. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM

35. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM
IE will support VP8 codec if installed separately

36. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM
IE will support VP8 codec if installed separately
Good analysis at http://x264dev.multimedia.cx/?p=377

37. What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, also FF and Chrome nightlies
Flash will soon ship with VP8 codec, but not WebM
IE will support VP8 codec if installed separately
Good analysis at http://x264dev.multimedia.cx/?p=377
License prohibits Apple and MS from using it

38. Thinking in HTML5

39. Thinking in HTML5
Outline your document
Map document sections to sections of your outline
Use sectioning elements to reflect that structure
http://gsnedders.html5.org/outliner/

40. Thinking in HTML5
Outline your document
Map document sections to sections of your outline
Use sectioning elements to reflect that structure
http://gsnedders.html5.org/outliner/
Expand to more complete site outline
Aids document processing

41. Using the New Structure
Elements

42. Using the New Structure
Elements
They’re not just <div>’s with a new name

43. Using the New Structure
Elements
They’re not just <div>’s with a new name
They have semantic meanings which can be used by
assistive technologies
Can locate navigation links more easily
Locate page’s main content easily
Pages can be meaningfully processed (SEO, etc.)

44. Using Sectioning Elements

45. Using Sectioning Elements
There are far more in HTML5 than just <div>

46. Using Sectioning Elements
There are far more in HTML5 than just <div>
To avoid confusion, ask yourself a series of questions
about the content of the section to help clarify your
choice

47. Is it introductory info?

48. Is it introductory info?
This info could also include a ToC or other nav aids,
such as search forms.

49. Is it introductory info?
This info could also include a ToC or other nav aids,
such as search forms.
If yes, mark it up as <header>

50. Does it contain summary
information?

51. Does it contain summary
information?
This sort of information would include info such as
copyright date, author information, links to related
documents, etc.

52. Does it contain summary
information?
This sort of information would include info such as
copyright date, author information, links to related
documents, etc.
If yes, mark it up as <footer>

53. Is it a major navigation
block?

54. Is it a major navigation
block?
If yes, use the <nav> element to mark it up

55. Does it make sense as a
standalone item?

56. Does it make sense as a
standalone item?
If yes, mark it up as <article>

57. Is it directly related to the
main content?

58. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>

59. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?

60. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>

61. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>
If yes, could it also be an appendix?

62. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>
If yes, could it also be an appendix?
If yes, mark it up as <figure>

63. Is it directly related to the
main content?
If yes, it’s either <aside> or <figure>
Is it required in order to understand the content?
If no, mark it up as <aside>
If yes, could it also be an appendix?
If yes, mark it up as <figure>
If no, it’s really part of the main content (see
next question)

64. Might it logically have its
own heading?

65. Might it logically have its
own heading?
If yes, mark it up as a <section>

66. Does it have semantic
meaning?

67. Does it have semantic
meaning?
If yes, mark it up with the element that reflects its
semantic value

68. Does it have semantic
meaning?
If yes, mark it up with the element that reflects its
semantic value
If no, then use a <div>

69. <audio>
Browser mp3 Vorbis wav AAC
Firefox x x
Opera x x
Safari x x x
Chrome x x
IE9 x ? x

70. <audio>
Browser mp3 Vorbis wav AAC
Problematic, due to
lack of unified suport Firefox x x
Opera x x
Safari x x x
Chrome x x
IE9 x ? x

71. <audio>
Browser mp3 Vorbis wav AAC
Problematic, due to
lack of unified suport Firefox x x
Element allows fallback Opera x x
sources Safari x x x
Chrome x x
IE9 x ? x

72. <audio>
Browser mp3 Vorbis wav AAC
Problematic, due to
lack of unified suport Firefox x x
Element allows fallback Opera x x
sources Safari x x x
http://dev.opera.com/ Chrome x x
articles/view/html5-
audio-radio-player/ IE9 x ? x

73. <video>
Browser Theora H.264 WebM
Chrome x x *
Firefox x *
IE9 *
Opera x x
Safari x

74. <video>
Browser Theora H.264 WebM
Lacks universal
support Chrome x x *
Firefox x *
IE9 *
Opera x x
Safari x

75. <video>
Browser Theora H.264 WebM
Lacks universal
support Chrome x x *
Firefox x *
Allows for fallback
sources IE9 *
Opera x x
Safari x

76. <video>
Browser Theora H.264 WebM
Lacks universal
support Chrome x x *
Firefox x *
Allows for fallback
sources IE9 *
IE9 will support VP8 Opera x x
codec with separate Safari x
install, but not WebM

77. Flash as fallback

78. Flash as fallback
Currently supports H.264 video on all supported
platforms

79. Flash as fallback
Currently supports H.264 video on all supported
platforms
Announced support for VP8, not WebM, and so far no
working examples.

80. Video Delivery

81. Video Delivery
http://camendesign.com/code/video_for_everybody

82. Video Delivery
http://camendesign.com/code/video_for_everybody
HTML solution which uses multiple sources to
support video delivery, falling back to Flash, and even
to .wmv files

83. Video Delivery
http://camendesign.com/code/video_for_everybody
HTML solution which uses multiple sources to
support video delivery, falling back to Flash, and even
to .wmv files
http://www.html5video.org/

84. Video Delivery
http://camendesign.com/code/video_for_everybody
HTML solution which uses multiple sources to
support video delivery, falling back to Flash, and even
to .wmv files
http://www.html5video.org/
Aggregation of many javascript-based solutions

85. <details>

86. <details>
Expandable box containing further information

87. <details>
Expandable box containing further information
Contains <summary> element (title of details box)
followed by flow content

88. <details>
Expandable box containing further information
Contains <summary> element (title of details box)
followed by flow content
Enables authors to implant further details in a page
without resorting to javascript

89. Forms

90. Forms
Most <form> improvements mimic current javascript
practice

91. Forms
Most <form> improvements mimic current javascript
practice
Support for them is currently spotty and idiosyncratic

92. Forms
Most <form> improvements mimic current javascript
practice
Support for them is currently spotty and idiosyncratic
Best practice is to set up a fallback to javascript for
dumb browsers to use.

93. New Form Field Attributes

94. New Form Field Attributes
autofocus
Focus will automatically start on this field

95. New Form Field Attributes
autofocus
Focus will automatically start on this field
placeholder
Placeholder text

96. New Form Field Attributes
autofocus
Focus will automatically start on this field
placeholder
Placeholder text
use javascript fallback
if (!("autofocus" in document.createElement("input")))

97. New <input> types

98. New <input> types
Email, URL, Search, Color

99. New <input> types
Email, URL, Search, Color
Number, Range
min, max, step, value
stepUp, stepDown, valueAsNumber

100. New <input> types
Email, URL, Search, Color
Number, Range
min, max, step, value
stepUp, stepDown, valueAsNumber
Date

101. Why use them?

102. Why use them?
If not supported, no effect on browser

103. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly

104. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built-in-browser validation will check them
for you

105. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built-in-browser validation will check them
for you
pattern attribute supplies regex for “normal” fields

106. Why use them?
If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built-in-browser validation will check them
for you
pattern attribute supplies regex for “normal” fields
If not supported, use a js fallback

108. But they don’t work
everywhere!!

109. A simple fix

110. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)

111. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)
proposed by John Resig, coded by Remy Sharp

112. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)
proposed by John Resig, coded by Remy Sharp
http://html5shiv.googlecode.com/svn/trunk/html5.js

113. A simple fix
HTML5Shiv (Fixes IE to recognize new structure
elements)
proposed by John Resig, coded by Remy Sharp
http://html5shiv.googlecode.com/svn/trunk/html5.js
Include <script src="http://
html5shiv.googlecode.com/svn/trunk/html5.js"></
script> with a conditional comment

114. Say “Hello” to my little friend

115. Say “Hello” to my little friend
Modernizr.js

116. Say “Hello” to my little friend
Modernizr.js
incorporates HTML5 shiv idea

117. Say “Hello” to my little friend
Modernizr.js
incorporates HTML5 shiv idea
detects support for new field attributes and types

118. Say “Hello” to my little friend
Modernizr.js
incorporates HTML5 shiv idea
detects support for new field attributes and types
detects CSS3 support

119. Modernizr

120. Modernizr
Modernizr.input.attribute to test for presence of new
attribute

121. Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for presence of
new input types

122. Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for presence of
new input types
Modernizr.audio[format] for audio format support

123. Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for presence of
new input types
Modernizr.audio[format] for audio format support
CSS3 features indicated by classes attached to <html>

124. Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for presence of
new input types
Modernizr.audio[format] for audio format support
CSS3 features indicated by classes attached to <html>
http://www.modernizr.com/ (11K unzipped, minimized)