Beruflich Dokumente
Kultur Dokumente
presented to:
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.
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 youre offline
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.
removal of access keys? This could set back the usability/accessibility of markup (or, there could be good reasons for doing this)
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
IE6? (LOL!)
New Tags
article aside audio datatemplate embed nav nest
event-source
figure footer header mark meter
output
progress source time video
canvas
command datagrid datalist
<!DOCTYPE HTML>
doctype
xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<meta charset="UTF-8">
<title>HTML5</title> </head> <body> </body>
</html>
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="text/javascript"> document.createelement('header'); </script> <header>javascript must be used to force ie to style this element</header>
Microformats - now
<div class="vevent"> <a class="url" href="http://aneventapart.com">http://aneventapart.com</a> <span class="summary">An Event Apart Boston</span> <abbr class="dtstart" title="2009-06-22">June 22</abbr> <abbr class="dtend" title="2009-0623">23</abbr> in <span class="location">Boston Marriott, Copley Place, Boston, MA</span></div>
Microformats - w/HTML5
<div class="vevent"> <a class="url" href="http://aneventapart.com">http://aneventapart.com</a> <span class="summary">An Event Apart Boston</span> <time class="dtstart" title="2009-06-22">June 22</time> <time class="dtend" title="2009-0623">23</time> in <span class="location">Boston Marriott, Copley Place, Boston, MA</span></div>
<audio>
<a </audio>
<video>
<video src="/video/ac-testimonial-web.mov" controls="true"> <p>your browser does not support the video tag</p>
</video>
<canvas>
<canvas id=a_canvas width=400 height=300> <p>Oops! Your browser cant display the canvas.</p> </canvas>
<li><a href="/2009/seattle/"><h2><img src="/i/09/city-seattle.jpg" alt="Seattle" /></h2><h3>May 45, 2009</h3><p>Bell Harbor International Conference Center</p></a></li>
Validation
validator.nu
<Thank you!>