Evolving the Web: HTML5

Anne van Kesteren

17 April 2007 — QUT

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…

Enough drama!

<p><u>A<i>B</u>C</i></p>
p
+-- u
|   +-- "A"
|   |
|   +-- i
|       +-- "B"
+-- i
    +-- "C"

How do we solve this mess?

And now some implicit design principles…

Those are the basis for HTML5.

Who's doing HTML5?

What the hell is HTML5 anyway?

How does HTML5 work?

Tell me more about those features!

First the basics…

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>
<!doctype html>
<html lang=en>
 <body>
  <form>
   <p><label>
    Please enter your favorite markup language:
    <input list=markup-languages name=ml>
    <datalist id=markup-languages>
     <option>HTML</option>
     <option disabled>XHTML</option>
    </datalist>
   </label></p>
  </form>
 </body>
</html>

Declarative form validation…

<input required>
<input pattern=[a-z]>
<input type="range"
       min="2"
       max="40"
       step="2">

Apologies to those who are put of by the syntax. The following variants are allowed…

Repetition model

HTML5 does more though…

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>

Simple drawing application

datagrid element

meter and progress

video and audio elements

Any questions?