HTML5: About Damn Time

HTML5:
About Damn Time
Kevin Lawver | kevin@lawver.net | @kplawver

Tuesday, April 20, 2010

A Short History Lesson
• HTML 2.0 - 11/1995
• HTML 3.2 - 01/1997
• HTML 4.01 - 12/1999
• XHTML 1.0 - 01/2000
• XHTML 1.1 - 05/2001 (no one uses this)
• XHTML 2? - Dead as of 12/2009

HTML5: Guerilla
• The What Working Group (http://
whatwg.org) was started by Ian Hickson
(then at Opera, now at Google).
• Started as a response to what was wrong
with XHTML 2 and to move HTML
forward.
• HTML5 specs brought into W3C in
03/2007.


So, What’s New?
• Document sematics
• Form controls
• Canvas
• Audio and Video as ﬁrst-class citizens
• Ofﬂine storage
• Embedded meta data inside elements

And What’s Gone?
• Presentational elements like font, big,
center, etc
• Presentational attributes like bgcolor,
border, etc
• Frames, frameset and noframes
• acronym (abbr serves both purposes now)


A Basic Document
http://dev.lawver.net/html5/blank.html


<!DOCTYPE html>
<html>
<head>
<title>My Awesome HTML5 Document</title>
<meta charset="utf-8"/>

</head>
<body>

</body>
</html>

Things to See
• The HTML comment at the top must be
there or things will look silly in any current
version of Internet Explorer
• The DOCTYPE is tiny. Since it’s no longer
an “X”, there’s no DTD.
• Other than that, not much is different
here, right?


Document Semantics

• No more divs! (OK, OK, fewer divs)
• Real semantics: header, footer, section,
article & aside


Let’s Make a Blog

• I used Tumblr, because their templating
language won’t get in the way.
• It’s live now: http://tedxcreativecoast.com
(convenient victim)


Let’s look at the
masthead...


<header>
<h1><a href="/">TEDx Creative Coast</a></h1>
</header>
<nav class="pages">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/event-details">Event Details</a></li>
<li><a href="/speakers">Speakers</a></li>
<li><a href="/sponsors">Sponsors</a></li>
<li><a href="/about">About TEDx</a></li>
<li><a href="/about_tedxcreativecoast">Volunteers and Crew</
a></li>
</ul>
</nav>


Did you notice...

• The header element?
• That I still used an h1?
• That nav is a new element speciﬁcally for
navigation?


A Blog Post...
http://dev.lawver.net/html5/tedx.html


<article class="hentry text">
<h3><a href="http://tedxcreativecoast.com/post/
482465925/musicians-welcome">Musicians Welcome</
a></h3>
<div class="entry-content">
...
</div>
<details>
<a href="http://tedxcreativecoast.com/post/
482465925/musicians-welcome">Permalink</a> | posted
1 day ago
</details>
</article>


What did you see?


Here’s what I saw...
• The article element surrounding the post.
• The new details element for displaying
meta data about the post.
• I didn’t use another header element around
the h3, but I could have.
• Did anyone notice the microformat I snuck
in there?


And the footer...


<footer>
<nav class="pagination">
<ul>
<li><details>You are on page 1 of 1.</details></li>
<ul>
</nav>
<nav>
<ul>
<li><a href="#">Top</a></li>
<li><a href="/">Home</a></li>
<li><a href="/about" title="TEDxCreativeCoast About TED and
TEDx">About</a></li>
<li><a href="/mobile">Mobile</a></li>
<li><a href="/event-details" title="TEDxCreativeCoast Event
Details">Event</a></li>
<li><a href="/speakers" title="TEDxCreativeCoast
Presenters">Speakers</a></li>
<li><a href="/sponsors" title="TEDxCreativeCoast
Sponsors">Sponsors</a></li>
<ul>
<p>This independent TEDx event is operated under license from <a
href="http://ted.com" target="_blank" title="This independent TEDx event is
operated under license from TED">TED</a>.</p>
</nav>
<details class="theme"></details>
</footer>

And?

• The shapely footer element, containing...
• multiple nav elements
• and a document-wide details element for
document cruft.


Canvas
http://dev.lawver.net/html5/canvas.html


Drawing the Web Way

• Creates a drawing “area” inside of a
document.
• Has a javascript API for adding shapes, and
allowing for interactivity
• Feature-rich and complex drawing API.


Abstract it all away!

• I use RaphaelJS, which uses Canvas on good
browsers and VML in Internet Explorer.
• It abstracts away a lot of the complexity
and provides a simple but powerful API.
• http://raphaeljs.com


Demos!


Form Elements


More Data-Speciﬁc
Inputs!
• We can ﬁnally do sliders in the markup
• Colors, URLs, e-mail addresses, names,
search queries, telephone numbers, and
times and dates all have their own input
types now!


Demo
http://dev.lawver.net/html5/forms.html


Ofﬂine Storage


Make Your App
Ofﬂineable!
• You can create a manifest which gives a list
of URLs for your app that declares ﬁles to
cache, which ones are only available on the
network, and fallbacks for failed requests.
• Poor cross-browser implementation so far.
• A lot like the old Google Gears API.


No Demo
Because it doesn’t work well enough across multiple
browsers to waste time with... yet.


Audio & Video


No more plugins!


Media is a ﬁrst-class
markup citizen now!


Demo
http://dev.lawver.net/html5/video.html


The Markup

<video src="movie.m4v" id="my-video"></video>
<p>
<a href="javascript:play_it()">play</a> |
<a href="javascript:pause_it()">pause</a>
</p>


The Javascript
function play_it() {
var video = document.getElementById("my-video");
video.play();
}

function pause_it() {
var video = document.getElementById("my-video");
video.pause();
}


Problems with video...
• There’s a big argument about supported
formats. Safari supports h.264, and Firefox
only supports Ogg Theora.
• There are rumors that Google will open
sources their video codec, making this stuff
moot.
• IE doesn’t support the video element at all.
• Works great on the iPad and iPhone
though!


Microdata


Microdata is a way to
embed meta data inside
of elements.


Why?


Turn your HTML
documents into your
API!


Yeah, but we have
microformats!


But, they’re non-trivial
to parse and mis-use
some HTML attributes.


Ok, ﬁne.
http://dev.lawver.net/html5/microdata.html


An Address Card
<ul itemscope itemtype="http://microformats.org/wiki/hcard"
class="vcard" itemid="http://lawver.net">
<li itemprop="fn">Kevin Lawver</li>
<li><a href="http://lawver.net" itemprop="url" rel="bookmark"
class="url">Blog</a></li>
<li itemprop="org">Music Intelligence Solutions</li>
<li itemprop="title">Chief Architect</li>
</ul>


The Big Practical Finish


What Can I Use Right
Now?
• Document semantics (with the HTML5 shiv
script for IE), but not if you use
javascript to add elements to the
DOM!

• Canvas with RaphaelJS
• Ofﬂine API in Firefox and Safari


What Doesn’t Work?

• Most of the new form elements,
unfortunately.
• Most of the new DOM API’s
• See http://a.deveria.com/caniuse/ for an up
to date list of what works and what
doesn’t!


The Future

• Client-side SQL Storage (works in Safari
and Firefox now, with slightly different
API’s)
• Microsoft says that IE9 will support HTML5
and hardware-accelerated SVG (Canvas)
• And we didn’t talk about CSS3 at all...


Resources

• http://adactio.com/extras/slides/
html5onlineconf/
• http://diveintohtml5.org
• http://validator.nu
• http://html5doctor.com


Questions?


HTML5: About Damn Time

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (16)

Similar to HTML5: About Damn Time

Similar to HTML5: About Damn Time (20)

Recently uploaded

Recently uploaded (20)

HTML5: About Damn Time