Evolving the Web: HTML5

Anne van Kesteren

XTech 2007

95% of the web is HTML…

We accumulate lots of information in HTML…

95% of the HTML is syntactically incorrect…

Close to nothing is conforming…

A century from now all information could become inaccessible…

How do we solve this mess?

Define interoperable handling of broken content.
Define better conformance requirements.
Get it implemented.

Who's doing HTML5?

WHATWG
W3C
You!

What the hell is HTML5 anyway?

HTML 4.01
XHTML 1.0
DOM Level 2 HTML
And more!

How does HTML5 work?

Language defined in terms of the DOM
HTML as serialization: text/html MIME type
XML as serialization: any XML MIME type

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">

Better document structure…

<section>

<nav>

<article>

<aside>

<header>

<footer>

Better typed form controls…

<input type=email>

<input type=datetime>

<input type=url>

<input type=number>

Declarative form validation…

<input required>

<input pattern=[a-z]>

<input type="range"
       min="2"
       max="40"
       step="2">

Repetition model

Repeat HTML elements, such as tr
Declarative: <button type="add">, <tr repeat="template">
API to manipulate through scripting

canvas element: img, but scripted…

Used on Y! Pipes…

<!doctype html>
<title>&lt;canvas> demo</title>
<style> canvas { border:solid } </style>
<p><canvas width="150" height="200" id="demo">
 <!-- fallback content here -->
</canvas></p>
<script type="text/javascript">
 var canvas = document.getElementById("demo"),
     context = canvas.getContext("2d")
 context.fillStyle = "lime"
 context.fillRect(0, 0, 150, 200)
</script>

`datagrid` element

Enables sortable tables
Tree-like widgets
Useful for e-mail clients

`meter` and `progress`

<meter>max: 100; current: 75</meter>
<progress><span>0</span>%</progress> with the span element being updated by a script

`video` and `audio` elements

Recently added based on feedback from Apple and Opera
Extensive scripted API for loading and playing media resources

Any questions?

http://www.w3.org/html/
http://www.whatwg.org/
Search for "html5"
For your information: the above does not implicate RTFM. Just ask.