HTML5 - techMaine Presentation 5/18/09

HTML5 - A Look Ahead
presented to:

techMaine Web Design User’s Group
May 18, 2009

The obvious question.....

WTF do we need

HTML5
?!?!?!

Why HTML5?

“HTML 5 will enable better cross-browser compatibility
and better support for ‘Web 2.0-style’ Web applications in
addition to documents.”

Brendan Eich
CTO, Mozilla

Why HTML5?

HTML5 will have an application cache that is capable of
storing all resources in your Web app so that the
browser can load them and use them even when you’re
ofﬂine

Why HTML5?

HTML5 enables mobile and desktop Web site designers
to deliver the advantages of client-side and server-side
development to their users simultaneously.

API development and workability in the browsers will
take a leap forward.

Problems with HTML5

• Not backwards-compatible?

• extensible? - questionable

• <P> = <p> ...and... <div class=”foo”> = <DIV class=foo>

• removal of certain tags - <acronym>

• removal of access keys? This could set back the usability/accessibility of
markup (or, there could be good reasons for doing this)

Please remain calm.....

It’s just a
working
draft, people!

What does HTML5 mean to Web designers?

• new tags for semantic layout

• improved microformatting

• new tags for incorporating rich media

• new tags for APIs, applications

Browser support

Browser
support?

What browser
support??

Browser Support

• Opera 9.x (supposedly) offers best support

• Safari 3.x - sketchy (best support in my experience)

• Firefox 3.x - sketchy

• Chrome? - sketchy

• IE8 - veeerrrry sketchy

• IE7 - nope

• IE6? (LOL!)

New Tags

• article • datatemplate • nav
• aside • embed • nest
• audio • event-source • output
• canvas • ﬁgure • progress
• command • footer • source
• datagrid • header • time
• datalist • mark • video
• meter

doctype - “Look Ma! No DTD!”

<!DOCTYPE HTML>

doctype

xHTML:
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0
Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtdquot;>

HTML5 - basic document structure

<!DOCTYPE HTML>
<html lang=quot;enquot;>
<head>
<meta charset=quot;UTF-8quot;>
<title>HTML5</title>
</head>
<body>
</body>
</html>

Layout - HTML4, xHTML

div=”header”
div=”nav”
div=”section”

di
div=”article” div=”sidebar”

div=”footer”

Layout - HTML5

<header>
<nav>
<section>

di
<article> <aside>

<footer>

Layout - HTML5
<body>
<header>
<h1>HTML 5</h1>
</header>
<nav>
<ul></ul>
</nav>
<section>
<article>
<p></p>
</article>
<aside>
<p></p>
</aside>
</section>
<footer>
<p></p>
</footer>
</body>

HTML5 - Quirks in IE

<script type=quot;text/javascriptquot;>
document.createelement('header');
</script>

<header>javascript must be used to force ie to style this element</header>

HTML5 & CSS

• CSS works ﬁne in most cases w/t/new tags

• New tags are treated as inline elements; need to use display:block;

• Need to use javascript to force IE to recognize new HTML5 tags and apply
CSS to them

Microformats - now

<div class=quot;veventquot;>
<a class=quot;urlquot; href=quot;http://aneventapart.comquot;>http://aneventapart.com</a>
<span class=quot;summaryquot;>An Event Apart Boston</span>
<abbr class=quot;dtstartquot; title=quot;2009-06-22quot;>June 22</abbr> -
<abbr class=quot;dtendquot; title=quot;2009-06-23quot;>23</abbr>
in <span class=quot;locationquot;>Boston Marriott, Copley Place, Boston, MA</span>
</div>

Microformats - w/HTML5

<div class=quot;veventquot;>
<a class=quot;urlquot; href=quot;http://aneventapart.comquot;>http://aneventapart.com</a>
<span class=quot;summaryquot;>An Event Apart Boston</span>
<time class=quot;dtstartquot; title=quot;2009-06-22quot;>June 22</time> -
<time class=quot;dtendquot; title=quot;2009-06-23quot;>23</time>
in <span class=quot;locationquot;>Boston Marriott, Copley Place, Boston, MA</span>
</div>

<audio>

<audio src=quot;/tunes/boom.mp3quot; controls=quot;truequot;>
<a href=quot;/tunes/boom.mp3quot;>Listen</a>
</audio>

<video>

<video src=quot;/video/ac-testimonial-web.movquot; controls=quot;truequot;>
<p>your browser does not support the video tag</p>
</video>

<canvas>

<canvas id=”a_canvas” width=”400” height=”300”>
<p>Oops! Your browser can’t display the canvas.</p>
</canvas>

New Rules for markup

This is legal in HTML5:

<li>
<a href=quot;/2009/seattle/quot;>
<h2><img src=quot;/i/09/city-seattle.jpgquot; alt=quot;Seattlequot; /></h2>
<h3>May 4—5, 2009</h3>
<p>Bell Harbor International Conference Center</p>
</a>
</li>

New Rules for markup

This is how you do it in HTML4/xHTML:

<li>
<h2><a href=quot;/2009/seattle/quot;><img src=quot;/i/09/city-seattle.jpgquot; alt=quot;Seattlequot; /> </a> </h2>
<h3><a href=quot;/2009/seattle/quot;>May 4—5, 2009 </a> </h3>
<p><a href=quot;/2009/seattle/quot;>Bell Harbor International Conference Center </a> </p>
</li>

Validation

validator.nu

What does it all mean?

• It’s a work in progress

• It’s going to be awhile before we’re using HTML5

• It may turn up in mobile browsers ﬁrst

• HTML5 will lead to browser-based apps that are more powerful and more
responsive

<Thank you!>

Rob Landry
rob@pemaquid.com
twitter: @portlandhead, @pemaquid

HTML5 - techMaine Presentation 5/18/09

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to HTML5 - techMaine Presentation 5/18/09

Similar to HTML5 - techMaine Presentation 5/18/09 (20)

Recently uploaded

Recently uploaded (20)

HTML5 - techMaine Presentation 5/18/09

Editor's Notes