Introduction to HTML5 Scott Vandehey Front-End Web Developer ELC Technologies @spaceninja

Why make a new version of HTML? (For the long version:) diveintohtml5.org/past.html

HTML5 Design Principles ref: bit.ly/html-principles Image credit: Dale Stephanos

Photo credit: Jacinta Lodge Support Existing Content

Photo credit: Kevin Simpson Degrade Gracefully

Photo credit: Jeremy Keith Pave the Cowpaths

Photo credit: Ian “Bluemoose” Priority of Constituencies USERS > AUTHORS > IMPLEMENTORS > SPECIFIERS > PURITY

Photo credit: Kris Krug Top 3 New Features

  1. Better Forms new input types placeholder and many more!

New input types <input type=”email”> <input type=”tel”> <input type=”url”> <input type=”number”> and many more!

Search <input type=”search”>

Placeholder <input placeholder=”your name”>

Validation <input required>

ContentEditable <div contenteditable> Click on me to edit! </div>

  1. Rich Media video & audio

Recognize this? <object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=”640” height=”360” codebase=”http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0”><param name=”flashvars” value=”guid=BQtfIEY1&amp;width=640&amp;height=360&amp;locksiz e=no&amp;dynamicseek=false&amp;qc_publisherId=p-18mFEk4J448M” /><param name=”src” value=”http://v.example.com/ media/plugins/video/flvplayer.swf?ver=1.21” /><param name=”wmode” value=”transparent” /><param name=”allowfullscreen” value=”true” /><embed type=”application/x-shockwave-flash” width=”640” height=”360” src=”http://v.example.com/media/plugins/video/flvplayer.swf? ver=1.21” allowfullscreen=”true” wmode=”transparent” flashvars=”guid=BQtfIEY1&amp;width=640&amp;height=360&amp;loc ksize=no&amp;dynamicseek=false&amp;qc_publisherId=p-18mFEk4J448M”></embed></object>

That’s better <video src=”movie.mp4”></video>

Multiple sources <video controls width=”360” height=”240”> <source src=”movie.webm” type=’video/webm; codecs=”vp8, vorbis”’> <source src=”movie.ogv” type=’video/ogg; codecs=”theora, vorbis”’> <source src=”movie.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’> </video>

Multiple fallbacks <video controls width=”360” height=”240”> <source …> <source …> <source …> <object> … flash stuff here … <a href=”movie.mp4”>Download the movie.</a> </object> </video>

Safari 3+ Firefox 3.5+ Chrome 3+ IE8 (flash)

  1. New Semantic Elements header & footer nav & aside section & article and many more!

Image credit: A List Apart

Image credit: A List Apart

  1. Simplified Elements doctype charset script & style

Doctype & Charset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN” “http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <meta charset=”UTF-8”>

No type for JS & CSS <script type=”text/javascript” src=”x.js”></script>

<script src=”x.js”></script> <link type=”text/css” rel=”stylesheet” media=”screen” href=”x.css” /> <link rel=”stylesheet” media=”screen” href=”x.css”>

How to convert your site to HTML5 in one easy step

It’s Easy! Change this: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> to this: <!DOCTYPE html>

Browser shims Add this to your stylesheet: section, article, header, footer, nav, aside, hgroup { display: block; } Add this conditional comment to your head: <!—[if IE]> <script src=”http://html5shim.googlecode.com/ ↩ svn/trunk/html5.js”></script> <![endif]—>

Rumor: Browsers don’t support HTML5 False: All modern browsers have implemented HTML5 to some degree, and there’s no reason not to use the parts that work today.

Rumor: HTML5 won’t be ready until 2022 False: 2009: W3C Working Draft 2012: W3C Recommendation 2022: two complete implementations

Rumor: HTML5 takes us back to tag soup False: HTML5 allows you to use HTML or XHTML syntax.

Thank You To learn more: abookapart.com diveintohtml5.org Follow me on Twitter: @spaceninja </presentation>