Presentation should work in versions of Opera 9 and up and in user agents that support projection style sheets as well as contenteditable=, <canvas>, <input type=date>, some scripting and don't do funny things during HTML parsing.

--
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>
Title: HTML5: Incremental Improvements to the Web

HTML5

Incremental Improvements to the Web

Anne van Kesteren — Opera Software

31 May 2007 — reboot 9.0

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!

What is HTML5 for?

  • Documents
  • Applications

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!

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=date>

<input type=url>
<input type=number>

<datalist>: Google suggest

<input name="q"
       list="suggest"
       >
<datalist id="suggest"></datalist>

Declarative form validation…

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

HTML5 does more though…

canvas element: img, but scripted…

Used on Y! Pipes…

<canvas width="150" height="200" id="demo">
 <!-- fallback content here -->
</canvas>

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

Simple canvas drawing application

contenteditable attribute

Rich text editing in HTML!

Yay! Code used:

<p contenteditable="true">…</p>

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

Since applications need APIs…

HTML5 has added some…

APIs

  • Drag and drop support
  • Persistent storage
  • Server-sent events
  • Cross-document messaging

What's next?

  • Reviewing
  • Implementing
  • Testing
  • Evolving the web

Shameless plug

  • Opera Mini
  • New version coming out soon!

Thank you!

Any questions?

  • whatwg.org
  • w3.org/html
  • Search for "html5"

Reply via email to