5 ways to embrace HTML5 today

( 5 ways to embrace
HTML5 today
Daniel Ryan
DevChatt
March 2010
)

( What is HTML5?
)
⊛ HTML5 is the next major revision of the HTML
spec.

( What is HTML5?
)
spec.

⊛ It is currently in “Last Call” phase at the
WHATWG.

( What is HTML5?
)
spec.

WHATWG.

⊛ It was written both to deﬁne new features and
ratify current behavior.

( What is HTML5?
)
spec.

WHATWG.

⊛ It was written both to deﬁne new features and
ratify current behavior.

⊛ It is scheduled to be a “Proposed
Recommendation” in 2022.

( What browsers
support HTML5? )
⊛ All of them. Sort of.

( What browsers
support HTML5? )
⊛ All of them. Sort of.

⊛ Most of the proposed features can be
implemented today through either native
browser support or a combination of CSS and
JavaScript.

( 5 Features Ready to
Implement )
⊛ New elements (tags) and attributes

Implement )

⊛ Client side storage

Implement )


⊛ <audio> and <video>

Implement )



⊛ Geolocation

Implement )



⊛ Geolocation

⊛ New form types

( 1: New Elements

⊛ section ⊛ video ⊛ rp
)
⊛ article ⊛ audio ⊛ canvas

⊛ aside ⊛ embed ⊛ command

⊛ hgroup ⊛ mark ⊛ details

⊛ header ⊛ progress ⊛ datalist

⊛ footer ⊛ meter ⊛ keygen

⊛ nav ⊛ time ⊛ output

⊛ ﬁgure ⊛ ruby ⊛ dialog

⊛ ﬁgcaption ⊛ rt

( 1: New Elements —
Implementation )
⊛ Add this <script> tag just after <head>:

( 1: New Elements —
Implementation )
⊛ Add this <script> tag just after <head>:

⊛ Add this line to the top of your CSS ﬁle:
section, article, aside, header, footer, nav, ﬁgure, dialog
{ display: block; }

<!DOCTYPE html>
<html>
<head>

<!DOCTYPE html>
<html>
<head>

</head>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<section class="summary-article">

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
<div class="summary">Thursday evening, the Hamilton County School Board voted 6 to 3 to approve a plan to
maintain Normal Park Museum Magnet's current zone and pre-K program despite a 2007 decision to expand the school's
zone. </div>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
zone. </div>
</section>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
zone. </div>
</section>
</section>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
zone. </div>
</section>
</section>
<footer id="ft">

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
zone. </div>
</section>
</section>
<footer id="ft">
<p class="copyright">©2008-2010 Chattarati.</p>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
zone. </div>
</section>
</section>
<footer id="ft">
</footer>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
zone. </div>
</section>
</section>
<footer id="ft">
</footer>
</body>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<section id="main">
<header>
</header>
</article>
</section>
<section id="sb">
<h2>Summary</h2>
zone. </div>
</section>
</section>
<footer id="ft">
</footer>
</body>
</html>

( 1: New Attributes —
Forms & Inputs )
⊛ autofocus

Forms & Inputs )
⊛ autofocus

⊛ form

Forms & Inputs )
⊛ autofocus

⊛ form

⊛ required

Forms & Inputs )
⊛ autofocus

⊛ form

⊛ required

⊛ autocomplete, min, max, multiple, pattern,
step

Forms & Inputs )
⊛ autofocus

⊛ form

⊛ required

⊛ autocomplete, min, max, multiple, pattern,
step

⊛ novalidate

Miscellaneous )
⊛ ol[reversed]

Miscellaneous )
⊛ ol[reversed]

⊛ iframe[sandbox]

Miscellaneous )
⊛ ol[reversed]

⊛ iframe[sandbox]

⊛ script[async]

Miscellaneous )
⊛ ol[reversed]

⊛ iframe[sandbox]

⊛ script[async]

⊛ see more at http://www.w3.org/TR/html5-diff/
#new-attributes

Global )
⊛ contenteditable

Global )
⊛ contenteditable

⊛ contextmenu

Global )
⊛ contenteditable

⊛ contextmenu

⊛ data-*

Global )
⊛ contenteditable

⊛ contextmenu

⊛ data-*

⊛ draggable

Global )
⊛ contenteditable

⊛ contextmenu

⊛ data-*

⊛ draggable

⊛ hidden

Global )
⊛ contenteditable

⊛ contextmenu

⊛ data-*

⊛ draggable

⊛ hidden

⊛ role and aria-* (http://www.w3.org/TR/wai-
aria/)

Global )
⊛ contenteditable

⊛ contextmenu

⊛ data-*

⊛ draggable

⊛ hidden

⊛ role and aria-* (http://www.w3.org/TR/wai-
aria/)

⊛ spellcheck

( 2: Client Side
Storage )
⊛ Store data in the browser via a JavaScript API
(http://bit.ly/b95AIS)

( 2: Client Side
Storage )

⊛ Enable ofﬂine syncing or speed up heavy web
apps

( 2: Client Side
Storage )

apps

⊛ Gracefully degrade with http://
plugins.jquery.com/project/jStorage

( 2: Client Side
Storage )

apps

⊛ Gracefully degrade with http://
plugins.jquery.com/project/jStorage

⊛ Store static assets in a manifest for ofﬂine
access (http://bit.ly/dnOQYc)

( 3: <audio>
)
⊛ Native support for audio ﬁle playback with a
full JavaScript API for controls

( 3: <audio>
)

⊛ Go full native (http://bit.ly/awkhmZ)

( 3: <audio>
)


⊛ Fallback with
<audio src=”ﬁle.mp3”>
<embed src=”ﬂashplayer.swf”></embed>
</audio>

( 3: <audio>
)


⊛ Fallback with
<audio src=”ﬁle.mp3”>
</audio>

⊛ Or, get around the format war with http://bit.ly/
bwny0J

( 4: <video>
)
⊛ Native support for video ﬁle playback with a

( 4: <video>
)

⊛ Go full native (http://bit.ly/cdmRVx)

( 4: <video>
)


⊛ Fallback with
<video src=”ﬁle.mp3”>
</video>

( 4: <video>
)


⊛ Fallback with
</video>

b3AeXi

( 4: <video>
)


⊛ Fallback with
</video>

b3AeXi

⊛ See some demos at http://youtube.com/html5
or http://bit.ly/cfI2ML

( 5: New Form Types

⊛ search ⊛ time
)
⊛ tel ⊛ datetime-local

⊛ url ⊛ number

⊛ email ⊛ range

⊛ datetime ⊛ color

⊛ date

⊛ month

⊛ week

( 5: New Form Types

⊛ Write your own JavaScript validation
)
⊛ Use http://code.google.com/p/webforms2/

⊛ Be sure to still do server-side validation, the
client-side is mainly to beneﬁt your users

( Thanks for
listening
http://dryan.com/html5 for more info
)

5 ways to embrace HTML5 today

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 5 ways to embrace HTML5 today

Similar to 5 ways to embrace HTML5 today (20)

Recently uploaded

Recently uploaded (20)

5 ways to embrace HTML5 today

Editor's Notes