HTML5

Anne van Kesteren (Opera Software)

March 2009 — Mitsue-Links

<input type=date>

How did we got here?

W3C hosted a workshop on Web applications in 2004.

W3C: "XML is the future."

Browser vendors revolted. (Opera, Mozilla & Apple.)

Instead of reinventing HTML, evolve it.

WHATWG

>800 people on the mailing list.

wiki.whatwg.org

blog.whatwg.org

forums.whatwg.org

End of 2006 Tim Berners-Lee had a change of heart: The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work.

w3.org/html + whatwg.org = HTML 5

HTML5 Goals

1. Increasing interoperability by defining the Web platform.

For instance, the contenteditable attribute.

2. Extending the Web platform.

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <bb> <base> <bdo> <blockquote> <body> <br> <canvas> <caption> <cite> <code> <col> <colgroup> <command> <datagrid> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <eventsource> <figure> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <head> <header> <hr> <html> <i> <iframe> <img> <ins> <kbd> <legend> <li> <link> <mark> <map> <menu> <meta> <meter> <nav> <noscript> <object> <ol> <p> <param> <pre> <progress> <q> <samp> <script> <section> <small> <source> <span> <strong> <style> <sub> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <time> <title> <tr> <ul> <var> <video>

Backwards compatible with HTML 4 & XHTML 1.x.

For Web applications & documents.

The DOCTYPE

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>

Character encoding

<meta
 http-equiv="Content-Type"
 content="text/html;
          charset=utf-8">
<meta charset="utf-8">

<canvas>

<canvas width="150" height="200" id="demo">
 <!-- Still using Internet Explorer? -->
</canvas>

<script>
 var canvas = document.getElementById("demo"),
     context = canvas.getContext("2d")
 context.fillStyle = "lime"
 context.fillRect(0, 0, 150, 200)
</script>

Simple canvas drawing application

Demo.

Thanks to Jacob Seidelin, nihilogic.dk.

Video

Video issues: syntax & format.

Syntax

<video src=clip.ogg controls>
  Download the <a href=clip.ogg>clip</a>.
  <!-- browser does not support <video> -->
</video>

Format

Ogg Theora?

Demo time! (No rickrolling, promised.)


labs.opera.com/downloads

Distributing several equivalent video streams

<video>
 <source type=video/mp4 src=clip.mp4>
 <source type=video/ogg src=clip.ogg>
</video>

Validation

html5.validator.nu

validator.w3.org

Other HTML5 features

<iframe src=...
  sandbox="allow-scripts"
  seamless=""
></iframe>
<html manifest=appcache>

SQL storage

localStorage["status"] = "Idling..."

sessionStorage["price"] += 19.95m
socket = new WebSocket("ws://example.org/stream")
socket.postMessage("Hello World!")
socket.onmessage = function(e) { process(e.data) }

Cross-document messaging: postMessage()

Outside HTML5

Geolocation API

"Threading" for JavaScript through Web Workers.

Cross-Origin XMLHttpRequest

Thanks for your time!
Questions?