Successfully reported this slideshow.

HTML5: It goes to ELEVEN

15

Share

Upcoming SlideShare
CSS 3
CSS 3
Loading in …3
×
1 of 134
1 of 134

HTML5: It goes to ELEVEN

15

Share

Download to read offline

Very basic introduction to HTML5, explaining what it is and how it can be used today.

Presented at the Adobe User Group Belgium Web SIG Event, 27th May 2010. http://mths.be/abh

Very basic introduction to HTML5, explaining what it is and how it can be used today.

Presented at the Adobe User Group Belgium Web SIG Event, 27th May 2010. http://mths.be/abh

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

HTML5: It goes to ELEVEN

  1. 1. HAI GUISE!
  2. 2. HAI GUISE! • Mathias Bynens
  3. 3. HAI GUISE! • Mathias Bynens • mths.be
  4. 4. HAI GUISE! • Mathias Bynens • mths.be • @mathias
  5. 5. Spın̈al Tap
  6. 6. http://mths.be/11
  7. 7. HTML5
  8. 8. HTML5 It goes to ELEVEN.
  9. 9. HTML5 It goes to ELEVEN. hashtag: #h5e
  10. 10. HTML5?
  11. 11. HTML5? • = HTML 4 + 1
  12. 12. HTML5? • = HTML 4 + 1 • = HTML 4.01 + 0.99
  13. 13. HTML5? • = HTML 4 + 1 • = HTML 4.01 + 0.99 • Backwards compatible
  14. 14. What’s new in HTML5?
  15. 15. What’s new in HTML5? • Simplified syntax
  16. 16. What’s new in HTML5? • Simplified syntax • Some HTML 4 elements are redefined
  17. 17. What’s new in HTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements
  18. 18. What’s new in HTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements
  19. 19. What’s new in HTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements
  20. 20. What’s new in HTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements • New inline elements • New interactive elements
  21. 21. What’s new in HTML5? • 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
  22. 22. What’s new in HTML5? • 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. 23. What’s new in HTML5? • 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. 24. What’s new in HTML5? • 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. 25. Level 1
  26. 26. Level 1 Don’t worry about browser support;
  27. 27. Level 1 Don’t worry about browser support; It Just Works™
  28. 28. Simplified syntax
  29. 29. Simplified syntax • DOCTYPE
  30. 30. XHTML 1.0 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
  31. 31. XHTML 1.1 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd">
  32. 32. HTML 4.01 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">
  33. 33. HTML5 DOCTYPE <!doctype html>
  34. 34. Simplified syntax • DOCTYPE • Character encoding
  35. 35. HTML 4.01 charset <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  36. 36. HTML 5 charset <meta charset="utf-8">
  37. 37. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there
  38. 38. HTML 4.01 <link rel="stylesheet" type="text/css" href="foo.css">
  39. 39. HTML5 <link rel="stylesheet" href="foo.css">
  40. 40. HTML 4.01 <style type="text/css"> body { background: gray url(boring.gif) no-repeat; } </style>
  41. 41. HTML5 <style> body { background: pink url(unicorns.png) repeat; } </style>
  42. 42. HTML 4.01 <script type="text/javascript"> alert('CAN HAZ HTML 4.01?'); </script>
  43. 43. HTML5 <script> // O HAI SIMPLIFIED HTML5 SYNTAX! </script>
  44. 44. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>)
  45. 45. HTML5 <img src="x.png" alt="Bazinga"> <img src="x.png" alt="Bazinga"/> <img src="x.png" alt="Bazinga" />
  46. 46. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>)
  47. 47. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>) • Easier to remember
  48. 48. Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>) • Easier to remember • Shorter
  49. 49. Simplified syntax
  50. 50. Simplified syntax • It’s how browsers work
  51. 51. Simplified syntax • It’s how browsers work • HTML5 specs current behavior
  52. 52. Simplified syntax • It’s how browsers work • HTML5 specs current behavior • Future-proof
  53. 53. Redefined elements
  54. 54. Redefined elements • <small>
  55. 55. Redefined elements • <small> • <strong>
  56. 56. Redefined elements • <small> • <strong> • <b> and <i>
  57. 57. Redefined elements • <small> • <strong> • <b> and <i> • …
  58. 58. Redefined elements • <small> • <strong> • <b> and <i> • … • Block level anchors
  59. 59. Block level anchors
  60. 60. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a>
  61. 61. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a>
  62. 62. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a> a { display: block; }
  63. 63. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a> a { display: block; }
  64. 64. Level 2
  65. 65. Level 2 Stuff that degrades gracefully by default
  66. 66. Level 2 Stuff that degrades gracefully by default
  67. 67. New attributes/values
  68. 68. New attributes/values <input type="email">
  69. 69. New attributes/values <input type="email"> url, tel, number
  70. 70. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week
  71. 71. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week …
  72. 72. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week … <input type="email" placeholder="foo@bar.baz">
  73. 73. 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”
  74. 74. 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”
  75. 75. New attributes/values
  76. 76. New attributes/values Graceful degradation isn’t enough?
  77. 77. New attributes/values Graceful degradation isn’t enough? → Use JavaScript for feature detection
  78. 78. New attributes/values Graceful degradation isn’t enough? → Use JavaScript for feature detection → Provide a fallback
  79. 79. Level 3
  80. 80. Level 3 We need some extra love
  81. 81. Level 3 We need some extra love
  82. 82. New sectioning elements
  83. 83. New sectioning elements <header> and <footer>
  84. 84. New sectioning elements <header> and <footer> <section> and <article>
  85. 85. New sectioning elements <header> and <footer> <section> and <article> <nav>
  86. 86. New sectioning elements <header> and <footer> <section> and <article> <nav> <aside>
  87. 87. New sectioning elements <header> and <footer> <section> and <article> <nav> <aside> …
  88. 88. New sectioning elements <header> and <footer> <section> and <article> <nav> <aside> … → Semantic alternatives to divs in HTML 4.01
  89. 89. 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
  90. 90. New inline elements
  91. 91. New inline elements <mark>
  92. 92. New inline elements <mark> <time>
  93. 93. New inline elements <mark> <time> …
  94. 94. New inline elements <mark> <time> … → Semantic alternatives to spans in HTML 4.01
  95. 95. New inline elements <mark> <time> … → Semantic alternatives to spans in HTML 4.01 → Fallback: HTML5 shiv http://mths.be/html5shiv
  96. 96. Interactive elements <details> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
  97. 97. Interactive elements
  98. 98. Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
  99. 99. 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
  100. 100. 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
  101. 101. JavaScript APIs
  102. 102. JavaScript APIs <video>
  103. 103. JavaScript APIs <video> <audio>
  104. 104. JavaScript APIs <video> <audio> <canvas>
  105. 105. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offline apps, inline editing, workers, web sockets, and many, many more…
  106. 106. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offline apps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis
  107. 107. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offline apps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis → Fallback = Flash
  108. 108. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offline apps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis → Fallback = Flash
  109. 109. Remember!
  110. 110. HTML5, Level 1
  111. 111. HTML5, Level 1 • Simplified syntax
  112. 112. HTML5, Level 1 • Simplified syntax • DOCTYPE
  113. 113. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding
  114. 114. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding • Optional type attributes
  115. 115. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding • Optional type attributes • Optional solidus (/>)
  116. 116. HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding • Optional type attributes • Optional solidus (/>) • Perfectly safe; no reason not to use
  117. 117. HTML5, Level 2
  118. 118. HTML5, Level 2 • New attributes/values
  119. 119. HTML5, Level 2 • New attributes/values • New input types
  120. 120. HTML5, Level 2 • New attributes/values • New input types • placeholder=""
  121. 121. HTML5, Level 2 • New attributes/values • New input types • placeholder="" • …
  122. 122. HTML5, Level 2 • New attributes/values • New input types • placeholder="" • … • Degrades gracefully
  123. 123. HTML5, Level 2 • New attributes/values • New input types • placeholder="" • … • Degrades gracefully • Use fallback to emulate
  124. 124. HTML5, Level 3
  125. 125. HTML5, Level 3 • New sectioning elements
  126. 126. HTML5, Level 3 • New sectioning elements • New inline elements
  127. 127. HTML5, Level 3 • New sectioning elements • New inline elements • New interactive elements
  128. 128. HTML5, Level 3 • New sectioning elements • New inline elements • New interactive elements • Won’t work / degrade in older browsers
  129. 129. 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
  130. 130. 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
  131. 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 • JavaScript • Flash
  132. 132. Fin

Editor's Notes

  • &amp;#x2026;and today I&amp;#x2019;d like to talk about&amp;#x2026;
  • &amp;#x2026;and today I&amp;#x2019;d like to talk about&amp;#x2026;
  • &amp;#x2026;and today I&amp;#x2019;d like to talk about&amp;#x2026;







  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  • Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.






















  • If someday a new &lt;script&gt; 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.
  • If someday a new &lt;script&gt; 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.
  • If someday a new &lt;script&gt; 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.
  • &lt;strong&gt; now represents importance rather than strong emphasis.
    &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning.
    Changes to &lt;b&gt; and &lt;i&gt; etc.
  • &lt;strong&gt; now represents importance rather than strong emphasis.
    &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning.
    Changes to &lt;b&gt; and &lt;i&gt; etc.
  • &lt;strong&gt; now represents importance rather than strong emphasis.
    &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning.
    Changes to &lt;b&gt; and &lt;i&gt; etc.
  • &lt;strong&gt; now represents importance rather than strong emphasis.
    &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning.
    Changes to &lt;b&gt; and &lt;i&gt; etc.
  • &lt;strong&gt; now represents importance rather than strong emphasis.
    &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning.
    Changes to &lt;b&gt; and &lt;i&gt; etc.
  • That&amp;#x2019;s it for Level 1.
  • That&amp;#x2019;s it for Level 1.
  • That&amp;#x2019;s it for Level 1.
  • That&amp;#x2019;s it for Level 1.


  • Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  • Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  • Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  • Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  • Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  • Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  • Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  • That&amp;#x2019;s it for level 2 &amp;#x2013; this stuff will work in modern browsers, while still being functional in older browsers
  • That&amp;#x2019;s it for level 2 &amp;#x2013; this stuff will work in modern browsers, while still being functional in older browsers
  • That&amp;#x2019;s it for level 2 &amp;#x2013; this stuff will work in modern browsers, while still being functional in older browsers


  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  • The actual contents are hidden by default. You can use the open attribute to override this
  • The actual contents are hidden by default. You can use the open attribute to override this
  • The actual contents are hidden by default. You can use the open attribute to override this
  • The actual contents are hidden by default. You can use the open attribute to override this
  • Hendrik Dacquin will talk about &lt;canvas&gt; in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about &lt;canvas&gt; in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about &lt;canvas&gt; in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about &lt;canvas&gt; in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about &lt;canvas&gt; in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about &lt;canvas&gt; in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about &lt;canvas&gt; in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.





















  • ×