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 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? • Simpliﬁed syntax

What’s new in HTML5? • Simpliﬁed syntax • Some HTML 4 elements are redeﬁned

What’s new in HTML5? • Simpliﬁed syntax • Some HTML 4 elements are redeﬁned • New values/attributes for existing elements

What’s new in HTML5? • Simpliﬁed syntax • Some HTML 4 elements are redeﬁned • New values/attributes for existing elements • New sectioning elements

What’s new in HTML5? • Simpliﬁed syntax • Some HTML 4 elements are redeﬁned • New values/attributes for existing elements • New sectioning elements • New inline elements

What’s new in HTML5? • Simpliﬁed syntax • Some HTML 4 elements are redeﬁned • New values/attributes for existing elements • New sectioning elements • New inline elements • New interactive elements

What’s new in HTML5? • Simpliﬁed syntax • Some HTML 4 elements are redeﬁned • 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™

Simpliﬁed syntax

Simpliﬁed 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>

Simpliﬁed 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">

Simpliﬁed 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>

Simpliﬁed 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" />

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

Simpliﬁed syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>) • Easier to remember

Simpliﬁed syntax • DOCTYPE • Character encoding • type attributes here and there • Optional solidus (/>) • Easier to remember • Shorter

Simpliﬁed syntax

Simpliﬁed syntax • It’s how browsers work

Simpliﬁed syntax • It’s how browsers work • HTML5 specs current behavior

Simpliﬁed syntax • It’s how browsers work • HTML5 specs current behavior • Future-proof

Redeﬁned elements

Redeﬁned elements • <small>

Redeﬁned elements • <small> • <strong>

Redeﬁned elements • <small> • <strong> • <b> and <i>

Redeﬁned elements • <small> • <strong> • <b> and <i> • …

Redeﬁned 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> a { display: block; }

Level 2

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

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

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, ofﬂine apps, inline editing, workers, web sockets, and many, many more…

JavaScript APIs <video> <audio> <canvas> Drag-and-drop, ofﬂine apps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis

JavaScript APIs <video> <audio> <canvas> Drag-and-drop, ofﬂine apps, inline editing, workers, web sockets, and many, many more… See http://mths.be/jsapis → Fallback = Flash

Remember!

HTML5, Level 1

HTML5, Level 1 • Simpliﬁed syntax

HTML5, Level 1 • Simpliﬁed syntax • DOCTYPE

HTML5, Level 1 • Simpliﬁed syntax • DOCTYPE • Character encoding

HTML5, Level 1 • Simpliﬁed syntax • DOCTYPE • Character encoding • Optional type attributes

HTML5, Level 1 • Simpliﬁed syntax • DOCTYPE • Character encoding • Optional type attributes • Optional solidus (/>)

HTML5, Level 1 • Simpliﬁed 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

http://www.slideshare.net	179
http://speakerrate.com	6
http://paper.li	6

HTML5: It goes to ELEVEN

by Mathias Bynens on May 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 191

Statistics

HTML5: It goes to ELEVEN — Presentation Transcript