Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HAI GUISE!
HAI GUISE!
•   Mathias Bynens
HAI GUISE!
•   Mathias Bynens
•   mths.be
HAI GUISE!
•   Mathias Bynens
•   mths.be
•   @mathias
Spın̈al Tap
http://mths.be/11
HTML5
HTML5
It goes to ELEVEN.
HTML5
It goes to ELEVEN.




                     hashtag: #h5e
HTML5?
HTML5?
•   = HTML 4 + 1
HTML5?
•   = HTML 4 + 1
•   = HTML 4.01 + 0.99
HTML5?
•   = HTML 4 + 1
•   = HTML 4.01 + 0.99
•   Backwards compatible
What’s new in HTML5?
What’s new in HTML5?
•   Simplified syntax
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing ele...
Level 1
Level 1
Don’t worry about browser support;
Level 1
Don’t worry about browser support;
         It Just Works™
Simplified syntax
Simplified syntax
•   DOCTYPE
XHTML 1.0 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-
stric...
XHTML 1.1 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
HTML 4.01 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
HTML5 DOCTYPE
<!doctype html>
Simplified syntax
•   DOCTYPE
•   Character encoding
HTML 4.01 charset
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8">
HTML 5 charset
<meta charset="utf-8">
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there
HTML 4.01
<link rel="stylesheet"
 type="text/css" href="foo.css">
HTML5
<link rel="stylesheet"
 href="foo.css">
HTML 4.01
<style type="text/css">
 body {
   background: gray url(boring.gif)
               no-repeat;
 }
</style>
HTML5
<style>
 body {
   background: pink url(unicorns.png)
               repeat;
 }
</style>
HTML 4.01
<script type="text/javascript">
 alert('CAN HAZ HTML 4.01?');
</script>
HTML5
<script>
 // O HAI SIMPLIFIED HTML5 SYNTAX!
</script>
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)
HTML5
<img src="x.png" alt="Bazinga">
<img src="x.png" alt="Bazinga"/>
<img src="x.png" alt="Bazinga" />
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)



•   E...
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)



•   E...
Simplified syntax
Simplified syntax
•   It’s how browsers work
Simplified syntax
•   It’s how browsers work
•   HTML5 specs current behavior
Simplified syntax
•   It’s how browsers work
•   HTML5 specs current behavior
•   Future-proof
Redefined elements
Redefined elements
•   <small>
Redefined elements
•   <small>

•   <strong>
Redefined elements
•   <small>

•   <strong>

•   <b> and <i>
Redefined elements
•   <small>

•   <strong>

•   <b> and <i>

•   …
Redefined elements
•   <small>

•   <strong>

•   <b> and <i>

•   …
•   Block level anchors
Block level anchors
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>


a { display: block; }
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>


a { display: block; }
Level 2
Level 2
Stuff that degrades gracefully by default
Level 2
Stuff that degrades gracefully by default
New attributes/values
New attributes/values
<input type="email">
New attributes/values
<input type="email">

url, tel, number
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
<input type="email"
plac...
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
<input type="email"
plac...
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
<input type="email"
plac...
New attributes/values
New attributes/values
Graceful degradation isn’t enough?
New attributes/values
Graceful degradation isn’t enough?
→ Use JavaScript for feature detection
New attributes/values
Graceful degradation isn’t enough?
→ Use JavaScript for feature detection
→ Provide a fallback
Level 3
Level 3
We need some extra love
Level 3
We need some extra love
New sectioning elements
New sectioning elements
<header> and <footer>
New sectioning elements
<header> and <footer>

<section> and <article>
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>

…
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>

…

→ Semantic alternatives to divs...
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>

…

→ Semantic alternatives to divs...
New inline elements
New inline elements
<mark>
New inline elements
<mark>

<time>
New inline elements
<mark>

<time>

…
New inline elements
<mark>

<time>

…

→ Semantic alternatives to spans in HTML 4.01
New inline elements
<mark>

<time>

…

→ Semantic alternatives to spans in HTML 4.01
→ Fallback: HTML5 shiv http://mths.be...
Interactive elements
<details>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
</deta...
Interactive elements
Interactive elements
<details open>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
<...
Interactive elements
<details open>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
<...
Interactive elements
<details open>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
<...
JavaScript APIs
JavaScript APIs
<video>
JavaScript APIs
<video>

<audio>
JavaScript APIs
<video>

<audio>

<canvas>
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, ma...
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, ma...
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, ma...
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, ma...
Remember!
HTML5, Level 1
HTML5, Level 1
•   Simplified syntax
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
    •   Optional type attributes
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
    •   Optional type attributes
    •   Op...
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
    •   Optional type attributes
    •   Op...
HTML5, Level 2
HTML5, Level 2
•   New attributes/values
HTML5, Level 2
•   New attributes/values
    •   New input types
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""

    •   …
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""

    •   …
•   Degrades gracefully
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""

    •   …
•   Degrades gracefully...
HTML5, Level 3
HTML5, Level 3
•   New sectioning elements
HTML5, Level 3
•   New sectioning elements
•   New inline elements
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade i...
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade i...
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade i...
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade i...
Fin
HTML5: It goes to ELEVEN
HTML5: It goes to ELEVEN
Upcoming SlideShare
Loading in …5
×

HTML5: It goes to ELEVEN

7,809 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

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

×