HTML 5: The Future of the
Web
Tim Wright | csskarma.com | @csskarma
Friday, July 23, 2010 1
A Brief Introduction
• University of Southern California Web Services
• CSSKarma
• Smashing Magazine & SitePoint
csskarma.com/presentations/penn
Friday, July 23, 2010 2
What we’ll cover
• What is it?
• Living in the past
• Debunking some rumors
• New Attributes & Elements
• Audio & Video APIs
Friday, July 23, 2010 4
What else we’ll cover
• Forms
• Accessibility
• Geolocation
• HTML 5 Storage & sockets
• Browser & Device Support
• Current Events
Friday, July 23, 2010 5
Quick History
1991 - Informal HTML 1998 - CSS 2
1994 - HTML 2 2000 - XHTML 1
1996 - CSS 1 & JavaScript 2002 - Tableless designs
1997 - HTML 4 2005 - Ajax
2009 - HTML 5
Friday, July 23, 2010 7
Is HTML 5 Ready?
via ishtml5readyyet.com
Friday, July 23, 2010 8
The real scoop
• Last call for a working draft: Oct. 2009
• Candidate recommendation: 2012
• finished spec
• Proposed recommendation: 2022
• 2 browsers with full implementation
via adactio.com
Friday, July 23, 2010 9
Notable changes
Block-level anchors
Presentational elements like <i>, <b>,
<cite> & <small> redefined
Friday, July 23, 2010 17
What was removed
Annoying elements: <font>, <big>
(but not small), <center>,
<frame>, <acronym>
Weird attributes we don’t use: bgcolor,
axis, border, summary
via adactio.com
Friday, July 23, 2010 18
Markup freedom
<li class="foo">Hello world</li>
<img src="barf.jpg" alt="picture of vomit" />
<li class=foo>Hello world
<img src=barf.jpg alt=picture of vomit>
<LI CLASS="foo">Hello world</LI>
<IMG SRC="barf.jpg" ALT="picture of vomit">
<li class=foo>Hello world</li>
<img src=foo alt=bar>
via adactio.com
Friday, July 23, 2010 19
Embedding data-*
<section data-latitude=”38.254” data-
longitude=”85.72”>
[ content ]
</section>
Data for the application to consume
Friday, July 23, 2010 26
Video
<video controls autoplay poster=”titlescreen.jpg”>
<src=”monkey.ogv”>
<src=”monkey.mp4”>
Your browser still stinks
</video>
Friday, July 23, 2010 42
Fallbacks
<video controls autoplay>
<src=”monkey.ogv”>
<src=”monkey.mp4”>
[ flash fallback ]
[ text fallback ]
</video>
Mobile solution?
Friday, July 23, 2010 43
Let’s see one
http://www.csskarma.com/lab/demomachine/
Friday, July 23, 2010 51
Degradation & Benefits
Degrades to a text box
Increased usability & conversion rates
Easier styling with attribute selectors
Easy validation & less spam
Friday, July 23, 2010 52
Accessibility
Built-in vs. Bolt-on
Friday, July 23, 2010 53
New <video>
<video src=”video.mp4” controls preload>
Friday, July 23, 2010 72
What does clean mean?
• Reduced page weight
• Speed & Responsiveness
• Higher conversions
• Better usability
• Happy users
• Device development
Friday, July 23, 2010 73
New JavaScript
...and Ninja-like qualities
Friday, July 23, 2010 74
New JavaScript
Finding elements by class (DOM API)
document.getElementbyClassname(“skipmenu”);
Finding elements by CSS syntax (selectors API)
document.querySelectorAll(“#nav ul > li”);
document.querySelector(“:hover”);
<li class=foo>Hello world</li>
<img src=foo alt=bar>
Friday, July 23, 2010 75
classList API
var element = $(‘div’);
element.classList.add(‘class-name’);
element.classList.remove(‘class-name’);
element.classList.toggle(‘class-name’);
via davidwalsh.name
Friday, July 23, 2010 76
Local Storage (demo)
http://www.csskarma.com/lab/html5/localstorage/
Using:
contentEditable=”true”
localStorage.setItem()
localStorage.getItem()
localStorage.clear()
Friday, July 23, 2010 91
Web Sockets
Bi-directional, full-duplex communications channels,
over a single TCP socket, designed to be implemented
in Web browsers and Web servers.
http://dev.w3.org/html5/websockets/
Friday, July 23, 2010 92
WebM video format
High-quality open video format
YouTube for compression over ogg (.ogv)
IE9, Chrome, Firefox & Opera support
WebM converter -> mirovideoconverter.com
Friday, July 23, 2010 99
Resources
• webmproject.org
• HTML5Doctor.com
• HTML5gallery.com
• data-vocabulary.org
• WHATWG.org
• HTML5 for Designers
Friday, July 23, 2010 102
What we covered
• What is it?
• Living in the past
• Debunking some rumors
• New Attributes & Elements
• Audio & Video APIs
Friday, July 23, 2010 103
What we covered (cont.)
• Forms
• Accessibility
• Geolocation
• HTML 5 Storage & sockets
• Browser & Device Support
• Current Events
Friday, July 23, 2010 104
Steal my work
csskarma.com/presentations/penn/
Friday, July 23, 2010 105
“Never memorize
something you that can
look up”
- Albert Einstein
Friday, July 23, 2010 106