-- 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
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/htmlMIME 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 thespanelement 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.orgw3.org/html- Search for "
html5"
