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?

Who's doing HTML5?

What the hell is HTML5 anyway?

How does HTML5 work?

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

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

meter and progress

video and audio elements

Any questions?