HTML5: It goes to ELEVEN

  • 6,074 views
Uploaded on

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

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 in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • please provide a pdf for non-mac users
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,074
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
123
Comments
1
Likes
15

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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





















Transcript

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