HTML5: It goes to ELEVEN
Report
Mathias BynensFollow
May. 27, 2010•0 likes•4,472 views
14 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
![[In Control 2010] HTML5](https://cdn.slidesharecdn.com/ss_thumbnails/incontrolorlandohtml5-100302003930-phpapp01-thumbnail.jpg?width=600&height=600&fit=bounds)
HTML5: It goes to ELEVEN
May. 27, 2010•0 likes•4,472 views
14 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Design
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
Mathias BynensFollow
HTML5: It goes to ELEVEN
- 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 elements
- What’s new in HTML5? • Simplified syntax • Some HTML 4 elements are redefined • New values/attributes for existing elements • New sectioning elements
- 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
- 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
- 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
- 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
- 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
- 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
- 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- strict.dtd">
- 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 (/>) • Easier to remember
- Simplified syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>) • Easier to remember • Shorter
- 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" placeholder="foo@bar.baz">
- 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”
- 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”
- 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 in HTML 4.01
- 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
- 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/html5shiv
- Interactive elements <details> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
- Interactive elements
- Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
- 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
- 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
- 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, many more…
- JavaScript APIs <video> <audio> <canvas> Drag-and-drop, offline apps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis
- 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
- 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
- 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 • Optional solidus (/>)
- HTML5, Level 1 • Simplified syntax • DOCTYPE • Character encoding • Optional type attributes • Optional solidus (/>) • Perfectly safe; no reason not to use
- 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 • Use fallback to emulate
- 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 in older browsers
- 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
- 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
- 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
- Fin
Editor's Notes
- &#x2026;and today I&#x2019;d like to talk about&#x2026;
- &#x2026;and today I&#x2019;d like to talk about&#x2026;
- &#x2026;and today I&#x2019;d like to talk about&#x2026;
- 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&#x2019;s it for Level 1.
- That&#x2019;s it for Level 1.
- That&#x2019;s it for Level 1.
- That&#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&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- That&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- That&#x2019;s it for level 2 &#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 <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.