Introduction to HTML5 Scott Vandehey Front-End Web Developer ELC Technologies @spaceninja
A presentation at WebVisions Portland 2011 in May 2011 in Portland, OR, USA by Scott Vandehey
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
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>
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&width=640&height=360&locksiz e=no&dynamicseek=false&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&width=640&height=360&loc ksize=no&dynamicseek=false&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)
Image credit: A List Apart
Image credit: A List Apart
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>
