Download as KEY, PPTX
Uploaded byMathias Bynens
HTML5: It goes to ELEVEN
The document discusses the key changes introduced in HTML5 compared to HTML 4, emphasizing simplified syntax, new elements, and attributes. It highlights the backward compatibility of HTML5 and the addition of new APIs for enhanced web functionality. Additionally, it covers aspects such as graceful degradation, semantic elements, and the necessity for feature detection and fallbacks for older browsers.
More Related Content
![[In Control 2010] HTML5](https://cdn.slidesharecdn.com/ss_thumbnails/incontrolorlandohtml5-100302003930-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://cdn.slidesharecdn.com/ss_thumbnails/html5smartmarkupforsmarterwebsites-futureofwebappslasvegas2011-110628193453-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5: It goes to ELEVEN
- 1.
- 2. HAI GUISE! • Mathias Bynens
- 3. HAI GUISE! • Mathias Bynens • mths.be
- 4. HAI GUISE! • Mathias Bynens • mths.be • @mathias
- 5.
- 7.
- 8.
- 9. HTML5 It goes toELEVEN.
- 10. HTML5 It goes toELEVEN. hashtag: #h5e
- 11.
- 12. HTML5? • = HTML 4 + 1
- 13. HTML5? • = HTML 4 + 1 • = HTML 4.01 + 0.99
- 14. HTML5? • = HTML 4 + 1 • = HTML 4.01 + 0.99 • Backwards compatible
- 15. What’s new inHTML5?
- 16. What’s new inHTML5? • Simplified syntax
- 17. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined
- 18. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements
- 19. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements
- 20. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements
- 21. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements • New interactive elements
- 22. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements • New interactive elements • New JavaScript APIs
- 23. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements • New interactive elements • New JavaScript APIs
- 24. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements • New interactive elements • New JavaScript APIs
- 25. What’s new inHTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements • New interactive elements • New JavaScript APIs
- 26.
- 27. Level 1 Don’t worryabout browser support;
- 28. Level 1 Don’t worryabout browser support; It Just Works™
- 29.
- 30. Simplified syntax • DOCTYPE
- 31. XHTML 1.0 DOCTYPE <!DOCTYPEHTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
- 32. XHTML 1.1 DOCTYPE <!DOCTYPEHTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd">
- 33. HTML 4.01 DOCTYPE <!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">
- 34.
- 35. Simplified syntax • DOCTYPE • Character encoding
- 36. HTML 4.01 charset <metahttp-equiv="Content-Type" content="text/html; charset=utf-8">
- 37. HTML 5 charset <metacharset="utf-8">
- 38. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there
- 39. HTML 4.01 <link rel="stylesheet" type="text/css" href="foo.css">
- 40.
- 41. HTML 4.01 <style type="text/css"> body { background: gray url(boring.gif) no-repeat; } </style>
- 42. HTML5 <style> body { background: pink url(unicorns.png) repeat; } </style>
- 43. HTML 4.01 <script type="text/javascript"> alert('CAN HAZ HTML 4.01?'); </script>
- 44. HTML5 <script> // OHAI SIMPLIFIED HTML5 SYNTAX! </script>
- 45. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>)
- 46. HTML5 <img src="x.png" alt="Bazinga"> <imgsrc="x.png" alt="Bazinga"/> <img src="x.png" alt="Bazinga" />
- 47. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>)
- 48. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>) • Easier to remember
- 49. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>) • Easier to remember • Shorter
- 51.
- 52. Simplified syntax • It’s how browsers work
- 53. Simplified syntax • It’s how browsers work • HTML5 specs current behavior
- 54. Simplified syntax • It’s how browsers work • HTML5 specs current behavior • Future-proof
- 55.
- 56. Redefined elements • <small>
- 57. Redefined elements • <small> • <strong>
- 58. Redefined elements • <small> • <strong> • <b> and <i>
- 59. Redefined elements • <small> • <strong> • <b> and <i> • …
- 60. Redefined elements • <small> • <strong> • <b> and <i> • … • Block level anchors
- 61.
- 62. Block level anchors <ahref="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a>
- 63. Block level anchors <ahref="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a>
- 64. Block level anchors <ahref="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a> a { display: block; }
- 65. Block level anchors <ahref="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a> a { display: block; }
- 66.
- 67. Level 2 Stuff thatdegrades gracefully by default
- 68. Level 2 Stuff thatdegrades gracefully by default
- 69.
- 70.
- 71.
- 72. New attributes/values <input type="email"> url,tel, number datetime, date, time, month, week
- 73. New attributes/values <input type="email"> url,tel, number datetime, date, time, month, week …
- 74. New attributes/values <input type="email"> url,tel, number datetime, date, time, month, week … <input type="email" placeholder="foo@bar.baz">
- 75. New attributes/values <input type="email"> url,tel, number datetime, date, time, month, week … <input type="email" placeholder="foo@bar.baz"> → “Web Forms 2.0”
- 76. New attributes/values <input type="email"> url,tel, number datetime, date, time, month, week … <input type="email" placeholder="foo@bar.baz"> → “Web Forms 2.0”
- 77.
- 78. New attributes/values Graceful degradationisn’t enough?
- 79. New attributes/values Graceful degradationisn’t enough? → Use JavaScript for feature detection
- 80. New attributes/values Graceful degradationisn’t enough? → Use JavaScript for feature detection → Provide a fallback
- 81.
- 82. Level 3 We needsome extra love
- 83. Level 3 We needsome extra love
- 84.
- 85. New sectioning elements <header>and <footer>
- 86. New sectioning elements <header>and <footer> <section> and <article>
- 87. New sectioning elements <header>and <footer> <section> and <article> <nav>
- 88. New sectioning elements <header>and <footer> <section> and <article> <nav> <aside>
- 89. New sectioning elements <header>and <footer> <section> and <article> <nav> <aside> …
- 90. New sectioning elements <header>and <footer> <section> and <article> <nav> <aside> … → Semantic alternatives to divs in HTML 4.01
- 91. New sectioning elements <header>and <footer> <section> and <article> <nav> <aside> … → Semantic alternatives to divs in HTML 4.01 → Fallback: HTML5 shiv http://mths.be/html5shiv
- 92.
- 93.
- 94.
- 95.
- 96. New inline elements <mark> <time> … →Semantic alternatives to spans in HTML 4.01
- 97. New inline elements <mark> <time> … →Semantic alternatives to spans in HTML 4.01 → Fallback: HTML5 shiv http://mths.be/html5shiv
- 98. Interactive elements <details> <summary>Moreinfo about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
- 99.
- 100. Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
- 101. Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details> → Fallback: http://mths.be/html5details
- 102. Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details> → Fallback: http://mths.be/html5details → Other elements, other fallbacks
- 103.
- 104.
- 105.
- 106.
- 107. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offlineapps, inline editing, workers, web sockets, and many, many more…
- 108. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offlineapps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis
- 109. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offlineapps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis → Fallback = Flash
- 110. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offlineapps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis → Fallback = Flash
- 111.
- 112.
- 113. HTML5, Level 1 • Simplified syntax
- 114. HTML5, Level 1 • Simplified syntax • DOCTYPE
- 115. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding
- 116. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding • Optional type attributes
- 117. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding • Optional type attributes • Optional solidus (/>)
- 118. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding • Optional type attributes • Optional solidus (/>) • Perfectly safe; no reason not to use
- 119.
- 120. HTML5, Level 2 • New attributes/values
- 121. HTML5, Level 2 • New attributes/values • New input types
- 122. HTML5, Level 2 • New attributes/values • New input types • placeholder=""
- 123. HTML5, Level 2 • New attributes/values • New input types • placeholder="" • …
- 124. HTML5, Level 2 • New attributes/values • New input types • placeholder="" • … • Degrades gracefully
- 125. HTML5, Level 2 • New attributes/values • New input types • placeholder="" • … • Degrades gracefully • Use fallback to emulate
- 126.
- 127. HTML5, Level 3 • New sectioning elements
- 128. HTML5, Level 3 • New sectioning elements • New inline elements
- 129. HTML5, Level 3 • New sectioning elements • New inline elements • New interactive elements
- 130. HTML5, Level 3 • New sectioning elements • New inline elements • New interactive elements • Won’t work / degrade in older browsers
- 131. HTML5, Level 3 • New sectioning elements • New inline elements • New interactive elements • Won’t work / degrade in older browsers • Use feature detection and fallbacks to emulate
- 132. HTML5, Level 3 • New sectioning elements • New inline elements • New interactive elements • Won’t work / degrade in older browsers • Use feature detection and fallbacks to emulate • JavaScript
- 133. HTML5, Level 3 • New sectioning elements • New inline elements • New interactive elements • Won’t work / degrade in older browsers • Use feature detection and fallbacks to emulate • JavaScript • Flash
- 134.
Editor's Notes
- #2 &#x2026;and today I&#x2019;d like to talk about&#x2026;
- #3 &#x2026;and today I&#x2019;d like to talk about&#x2026;
- #4 &#x2026;and today I&#x2019;d like to talk about&#x2026;
- #12 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #13 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #14 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #15 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #16 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #17 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #18 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #19 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #20 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #21 Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- #44 If someday a new <script> type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
- #45 If someday a new <script> type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
- #46 If someday a new <script> type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
- #47 <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- #48 <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- #49 <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- #50 <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- #51 <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- #52 That&#x2019;s it for Level 1.
- #53 That&#x2019;s it for Level 1.
- #54 That&#x2019;s it for Level 1.
- #55 That&#x2019;s it for Level 1.
- #58 Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- #59 Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- #60 Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- #61 Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- #62 Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- #63 Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- #64 Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- #65 That&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- #66 That&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- #67 That&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- #70 HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- #71 HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- #72 HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- #73 HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- #74 HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- #75 HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- #76 HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- #77 Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- #78 Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- #79 Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- #80 Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- #81 Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- #82 The actual contents are hidden by default. You can use the open attribute to override this
- #83 The actual contents are hidden by default. You can use the open attribute to override this
- #84 The actual contents are hidden by default. You can use the open attribute to override this
- #85 The actual contents are hidden by default. You can use the open attribute to override this
- #86 Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- #87 Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- #88 Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- #89 Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- #90 Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- #91 Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- #92 Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.