An overview presentation of the awesomeness of HTML5

1. HTML5

2. HISTORY
1981 Tim Berners Lee proposes an
internet-based hypertext system
proposal
1981

3. HISTORY
1989 Tim Berners Lee writes a memo
proposing an internet-based
hypertext system
proposal memo
1981 1989

4. HISTORY
1991 HTML tags first mentioned
in PUBLIC!
gone
proposal memo public
1981 1989 1991

5. HISTORY
1993 1.0
gone
proposal memo public 1.0
1981 1989 1991 1993

6. HISTORY
1995 2.0
gone
proposal memo public 1.0 2.0
1981 1989 1991 1993 1995
1996
CSS 1.0

7. HISTORY
1997 4.0
gone W3C
proposal memo public 1.0 2.0 4.0
1981 1989 1991 1993 1995 1997
1996 1998
CSS 1.0 CSS 1.0

8. HISTORY
2000 XHTML 1.0 Released
gone W3C XHTML
proposal memo public 1.0 2.0 4.0 1.0
1981 1989 1991 1993 1995 1997 2000
1996 1998
CSS 1.0 CSS 1.0

9. HISTORY
WHATWG starts work on
2004 HTML5 under the name
Web Applications 1.0
gone W3C XHTML WHATWG
proposal memo public 1.0 2.0 4.0 1.0 HTML5
1981 1989 1991 1993 1995 1997 2000 2004
1996 1998
CSS 1.0 CSS 1.0

10. HISTORY
2006 “WAIT!” - W3C
gone W3C XHTML WHATWG W3C
proposal memo public 1.0 2.0 4.0 1.0 HTML5 wait!
1981 1989 1991 1993 1995 1997 2000 2004 2006
1996 1998
CSS 1.0 CSS 1.0

11. HISTORY
2008 W3C pushes a working draft
for HTML5
gone W3C XHTML WHATWG W3C W3C
proposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5
1981 1989 1991 1993 1995 1997 2000 2004 2006 2008
1996 1998
CSS 1.0 CSS 1.0

12. HISTORY
2009 W3C announces the XHTML2
working group will stop work
gone W3C XHTML WHATWG W3C W3C
proposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5 XHTML2
1981 1989 1991 1993 1995 1997 2000 2004 2006 2008 2009
1996 1998
CSS 1.0 CSS 1.0

13. HISTORY
2012 HTML5 Candidate Recommendation
gone W3C XHTML WHATWG W3C W3C HTML5
proposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5 XHTML2 candidate
1981 1989 1991 1993 1995 1997 2000 2004 2006 2008 2009 2012
1996 1998
CSS 1.0 CSS 1.0

14. HISTORY
2022 HTML5 Proposed Recommendation
gone W3C XHTML WHATWG W3C W3C HTML5 HTML5
proposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5 XHTML2 candidate proposed
1981 1989 1991 1993 1995 1997 2000 2004 2006 2008 2009 2012 2022
1996 1998
CSS3
CSS 1.0 CSS 1.0

15. HTML5
the content layer

16. New Doctype
NEW
<?DOCTYPE html>
OLD
<?DOCTYPE html PUBLIC “-//W3C//DTD
XHTML 1.1//EN” “h p://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd”>

17. Character Set
NEW
<meta charset="utf-8" />
OLD
<meta h p-equiv="Content-Type"
content="text/html; charset=utf-8" />

18. Javascript Embed
NEW
<script> </script>
OLD
<script type="text/javascript"> </script>

19. Styles Embed
NEW
<style> </style>
OLD
<style type="text/css"></script>

20. Stylesheet Linking
NEW
<link rel="stylesheet" href="file.css" />
OLD
<link rel="stylesheet" href="file.css"
type="text/css" media="all" />

21. Tag Etique e
<img src=”../img/mjackson.jpg” /> ok
<img src=../img/mjackson.jpg /> ok
<IMG SRC=../img/mjackson.jpg /> ok
<img src=../img/mjackson.jpg > ok
<br /> or <br> ok
<input /> or <input> ok

22. Block-Level Links
You can now wrap links <li>
around block-level <a href="page.html">
elements, rather than <img src="pic.jpg">
having to create links
around every element <h3>Title</h3>
inside the block <p>Text</p>
element. </a>
</li>

23. “drop it like
Removed Tags it’s hot”
big applet
center dir
u basefont
frame
s, strike frameset
font noframes
acronym

24. New Tags
Provides new <HEADER>
semantic vocabulary
for parts of a page <NAV>
previously served by
DIVs with ID and
Class a ributes. <SECTION>
IE requires some
workarounds using <ASIDE>
JavaScript to make <ARTICLE>
these elements work.
<FOOTER>

25. <figure>
Allows for <FIGURE>
associating captions
with embedded
content, including
videos, audio,
pullquotes, or
images.
CONTENT
(IMG,VIDEO,ETC.)
<LEGEND>

26. <video>
CODECS/CONTAINER IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
Theora+Vorbis+Ogg - 3.5+ - 5.0+ 10.5+ - -
H.264+AAC+MP4 9.0+ - 3.0+ - - 3.0+ 2.0+
WebM 9.0+ 4.0+ - 6.0+ 10.6+ - 2.3+
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="pr6.mp4" />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "h p://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBu ering":true}}' />
<p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
</object>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>

27. <audio>
BROWSER OGG VORBIS MP3 WAV
Firefox 3.6+ yes - yes
Safari 5+ - yes yes
Chrome 6 yes yes -
Opera 10.5+ yes - yes
IE 9 - yes yes
ATTRIBUTES
src url <audio src="bieberfever.ogg"></audio>
autoplay boolean <audio src="bieberfever.ogg" autoplay></audio>
loop boolean <audio src="bieberfever.ogg" loop></audio>
controls boolean <audio src="bieberfever.ogg" controls></audio>
preload none/auto <audio src="bieberfever.ogg" preload="auto"></audio>

28. <audio>
<audio controls preload="none">
<source src="bieberfever.ogg" type="audio/ogg">
<source src="bieberfever.mp3" type="audio/mpeg">
<object type="application/x-shockwave...
</audio

29. <meter>
Represents a scalar measurement within a
known range...
<meter> 2 out of 10 </meter>
<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>
<p>Your score is: <meter value="91" min="0" max="100" low="40"
high="90" optimum="100">A+</meter></p>

30. <progress>
Defines work-in-progress. Use it to display the
progress of a time consuming function in Javascript
<progress>
<span>76</span>%
</progress>
<progress max="50" value="23">
<span>23</span> of <span>50</span>
</progress>

31. <time>
Defines a time or a date, or both.
<p>We scrum it up at <time>9:00</time> every morning.</p>
<time datetime="2011-03-1709:00" pubdate>9:00</time>

32. <mark>
Defines marked or highlighted text.
<p>Search Results for <mark>mildred</mark></p>
Some Good Uses
Highlighting search terms on a page
Directing a ention to a word or phrase
Adding emphasis

33. WEB FORMS!
New A ributes
required
autocomplete
placeholder
autofocus

34. required
<input type="text" required >
The required a ribute specifies that an input
field must be filled out before submi ing.

35. autocomplete
<input type="text" autocomplete >
The autocomplete a ribute specifies that the
form or input field should have an autocomplete
function. Tells the browser to allow the field to
be autocompleted or not.

36. placeholder
<input type="text" placeholder="Search..." >
The placeholder a ribute provides a hint that
describes the expected value of an input field.

37. autofocus
<input type="text" autofocus >
The autofocus a ribute specifies that a field
should automatically get focus when a page is
loaded.

38. WEB FORMS (cont)
Input Types
search number
email range
url date
tel color

39. search
<input type="search">
The search field behaves like
a regular text field. Some
browsers add special styling
and/or functionality for
clearing.
+ mobile

40. email
<input type="email">
Used for input fields that should
contain an e-mail address.
+ mobile

41. url
<input type="url">
Used for input fields that should
contain a URL address.
+ mobile

42. number
<input type="number">
used for input fields that should
contain a numeric value.
+ mobile

43. number
<input type="number">
used for input fields that should
contain a numeric value.
<input type="number"
min="0"
max="10"
step="2"
value="6">
+ mobile

44. tel
<input type="tel">
Used for input fields that should
contain numbers only
+ mobile

45. range
<input type="range"
min="0"
max="10"
step="2"
value="6">
Used for input fields that should contain
a value from a range of numbers.
+ mobile

46. date pickers
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime"> (utc time)
<input type="datetime-local"> (local time)

47. color
<input type="color">
Used for input fields that
should contain a color

48. NEW API’s
Drag and Drop Canvas
Cross-Document Messaging SVG
Web Storage
O line Web Apps

49. drag’n drop
Allows objects (images and links, by
default) to be dragged and then
dropped onto a target.
h p://instantsprite.com

50. cross doc messaging
Cross Document Messaging
allows documents of
di erent domains to
communicate.
Sending document can call
postMessage() and
receiving document listens
for a ‘message’ event.

51. web storage
“The sessionStorage DOM a ribute stores session
data for a single window, like cookies on crack.”
<input type="checkbox"
onchange="
localStorage.insurance=checked
" />
+ mobile

52. o line web apps
Allows the client to <html manifest="/cache.manifest">
refer directly to its
CACHE MANIFEST
cache for certain
index.html
resources even help.html
while o line. style/default.css
images/logo.png
Resources under images/background.png
"network" are
never cached NETWORK:
server.cgi
+ mobile

53. canvas svg scalable vector graphics
Canvas is like making a Making layers that retain
flat drawing without distinctive shapes. Like
layers. Like a whiteboard. construction paper.
+ mobile + mobile

54. geolocation
Allows users to share their location for
location-aware services.
Some Uses
Show users position on a map
Tag content (photos/sound/video)
Turn-by-turn navigation
Alert users of nearby points of interest
Social networking
Users must be allowed to opt-in to location sharing
+ mobile

55. CAN WE EVEN USE
THIS STUFF?

56. “The future is already here. It’s just
not very evenly distributed”
William Gibson

57. PROGRESSIVE
DEGRAHANCEMENT
graceful degradation & progressive enhancement
start awesome start with necessary
strip features/fallbacks for enhance for more capable
lesser browsers browsers

58. implementations
making the magic happen
Some CSS
HTML5 Shiv
Modernizr

59. Some CSS
Sectioning elements need a line break:
header, nav, section,
article, aside, footer { display: block }

60. HTML5 Shiv
In IE8- new tags are recognized so they
need to be created.
document.createElement(‘header’);
document.createElement(‘section’);
etc.
HTML5 Shiv determines browser version
and creates the elements for us if needed.

61. Modernizr.js
O ers a 3.7k javascript file you can add to
your project.
Includes the HTML5 shiv
Uses feature detection to easily control fallbacks
Works with both HTML5 and CSS3 elements

62. CSS3
the presentation layer
coming soon

63. Sources
Because I didn’t make this stu up.
Up to Speed on HTML5 & CSS3 M.Jackson Wilkinson and Jason Garber
HTML5 the 30,000’ View Peter Lubbers
Echo HTML5 John Dyer and Nathan Smith
In Control 2010 HTML5 Christopher Schmi
The Future of the Web: HTML5 Derek Bender
Semantics of HTML5 Jesh Barlow
Dive into HTML5 Mark Pilgrim
W3Schools.com
HTML5 Doctor h p://html5doctor.com/about/
HTML5 for Web Designers Jeremy Keith