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?

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

And now some implicit design principles…

Don't Break the Web
Degrade Gracefully
Don't Reinvent the Wheel
Pave the Cowpaths
Evolution not Revolution
…

Solve Real Problems
Priority of Constituencies
Media Independence
Universal Access
Support World Languages
…

Secure By Design
Well-defined Behavior
Handle Errors
Avoid Needless Complexity
No Versioning

Those are the basis for HTML5.

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

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…

<input type=url>
<input type='url'>
<input type="url"/>

Repetition model

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

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

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.