1. HTML5 - What the h#@$ is it? Carlos A. Ramon June 27, 2011

3. What is HTML5?

4. Why use it?

5. Who’s supporting it?

6. When should you use it?

7. Steps for modernization

9. 1989 –Tim Berners Lee writes a memo proposing an internet-based hypertext system

10. 1991 –HTML tags first mentioned in PUBLIC!

11. 1993 – 1.0 goes live

12. 1995 – 2.0

13. 1996 – CSS 1.0

14. 1997 – W3C 4.0

15. 2000 – XHTML 1.0 Released

16. 2002 – Hooray Tableless CSS layouts

17. 2004 –WHATWG starts work on HTML5 under the name Web Applications 1.0

18. 2005 – Hello AJAX!

19. 2008 –W3C pushes a working draft for HTML5

20. 2009 –W3C announces the XHTML2 working group will stop work

21. 2012 –HTML5 Candidate Recommendation

23. It’s HTML + CSS + JS

24. A 900 page spec document

25. It contains 8 classes

26. Semantics

27. Offline & Storage

28. Device Access

29. Connectivity

30. Multimedia

31. 3D, Graphics & Effects

32. Performance & Integration

33. CSS3

35. NEW Doctype <?DOCTYPE html>

36. Character Set <meta http-equiv="Content-Type“ content="text/html; charset=utf-8" />

37. NEW Character Set <meta charset="utf-8" />

38. Embedding JS <script type="text/javascript"> </script>

39. NEW Embedding JS <script> </script>

40. Linking CSS <link rel="stylesheet" href="file.css“ type="text/css" media="all" />

41. NEW Linking CSS <link rel="stylesheet“ href="file.css" />

42. Block Level Links <li> <a href=“apage.html"> <imgsrc=“mypic.jpg"> <h3>Title</h3> <p>Text</p> </a> </li>

44. center

45. u

46. tt

47. s, strike

48. font

49. acronym

50. applet

51. dir

52. basefont

53. frame

54. frameset

56. nav

57. article

58. section

59. aside

61. <video> <video width="560" height="340" controls> <sourcesrc="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <sourcesrc="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'> <objecttype="application/x-shockwave... </video>

62. <audio> <audio controlspreload="none"> <sourcesrc="bestcountryandwesternsongever.ogg" type="audio/ogg"> <sourcesrc="bestcountryandwesternsongever.mp3" type="audio/mpeg"> <objecttype="application/x-shockwave... </audio>

64. specifies that an input field must be filled out before submitting.

65. autocomplete - <input type="text" autocomplete >

66. specifies that the form or input field should have an autocomplete function. Tells the browser to allow the field to be autocompleted or not.

67. placeholder - <input type="text" placeholder="Search..." >

68. provides a hint that describes the expected value of an input field.

69. autofocus - <input type="text" autofocus >

71. email

72. url

73. tel

74. number

75. range

76. date

78. Supports existing content

79. Degrades gracefully

80. We’re already familiar with the syntax (HTML or XHTML)

81. Great for mobile

82. Research “Responsive Web Design”

84. IE 9.0+

85. FF 3.5+

86. Opera 10+

87. Safari

88. Chrome

89. Mobile browsers (webkit-based)

90. iOS

91. Android

92. webOS

95. Start HTML5 Ninja Awesome -> Strip features/fallbacks for lesser browsers

96. Progressive enhancement

98. Sectioning elements needs a line break.

99. HTML5 Shiv

100. determines browser version and creates the elements for us if needed.

101. Modernizr

102. 3.7k javascript file you can add to your project.

103. Works with both HTML5 and CSS3 elements