HTML5: It goes to ELEVEN

7,373 views
7,280 views

Published on

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

Published in: Technology, Design
1 Comment
14 Likes
Statistics
Notes
  • please provide a pdf for non-mac users
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,373
On SlideShare
0
From Embeds
0
Number of Embeds
248
Actions
Shares
0
Downloads
125
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide
  • …and today I’d like to talk about…
  • …and today I’d like to talk about…
  • …and today I’d like to talk about…







  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.






















  • 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.
  • 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.
  • 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.
  • <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.
  • <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.
  • <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.
  • <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.
  • <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.
  • That’s it for Level 1.
  • That’s it for Level 1.
  • That’s it for Level 1.
  • That’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’s it for level 2 – this stuff will work in modern browsers, while still being functional in older browsers
  • That’s it for level 2 – this stuff will work in modern browsers, while still being functional in older browsers
  • That’s it for level 2 – 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 <canvas> in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about <canvas> in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about <canvas> in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about <canvas> in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about <canvas> in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about <canvas> in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.
  • Hendrik Dacquin will talk about <canvas> in a minute.
    HTML5 offline functionality can be useful for Flash applications as well.





















  • 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

    ×