HTML5
Incremental Improvements to the Web
Anne van Kesteren%08%D3%12%DF)%D8%C0%18%2F%11%D3%00%DE%E9%23%CE%C0%E8.%F5%A6%F3%26%E6%D3%D5.%15%E0%3D%20W%A2%C1%84%09%16%EC%AC%03v%E1%854x%BCPX%E8%C7%07A%03%12%13%18%2C%D8%E8'%A2%88%06%186%8A%5Cp%EF%40H%91%08%E4%FF%95%90%A0%F1%A2%90%87%D3%1A%BA%B0%F0(%A6D%06%D3%16%B8%FC%F0%CE%DF%88%065%8D%7D8%80%13%D8%3F%130%23%0C%C9%E7%09%9A%0B%A2%F0%EE%99%80%85%81%D1%25%A9%3D%010%08%EA%14(%1F%06%60%1F%94%2C%BA%11%91%D3%12%C5%12%0D%09%D7%F4E%83%A2%C0%94%A5%EAs%C0%81%03%90%7C%22%F6%5C%60%01B%3F%06%17%BD%3E%A8p%E0%40%83PP%E3%15%FA%BAla0!%14%81)%7D%0A%D7%D3%83%84%25%FAE%B0k%B7%E7%BF%BDui%E6%FD%20X%D8%88%C4%10%ECr3%FD%C1%19%02%9Cg%7FD%F6%E4%91%C5%5Bx%F16q%AB%C0%D9%C1C%B9%A0%7D%23%D2%E4U%EB%02%8D%98%A1%5Ev%E0%EC%C1N%11%E6%16%408%24%17%C8lD%93%5B%DC%86'%AFxj%CE%0D%18%F3%84%04a%02UA%C5%11%3Dh%95X%82.%99%3F%2B%3A%A8U%FB%C6%00%02%04%0C%E8%D7%F5%8C%C0%00%ED%95%D9R%82h%C1%F4f%81xY%05%05%40%FFD%C5%3D%E0%20%03%EC%05%98%C82%3Dm%16%1057%E4%A7%40%00%02(%60%00%01%22%F0%E7%89%06%19%04%90%40%01%06%FC%87%C2v%D9%E8%C6%07o%9C%5D%D8%CEx%D3%9C%25%18B%10%08%C3%22%22%AC%7D%00%0B%02%11%A4%F5%1C%0C%06%24%20%80%00%1C%1A%90%19n%1A(%80%24%87%26%A6h%C2%8E%9E%60FB%3F%14%F4%D6%93LYI%F0%87i%A5MY%94!%15%95%00%D34%D9%C1%E0d%00l%B2iBZ%92%7D%60%40%9Bl%22Y%00%88%3FI%A8%D5%90%AD%7D%F5%1D%04E%DD%02%DA%09%A2%3D%10A%05%88%DE%B2%9D%05%DB%C5%C6%96'R%BD%B0%26%9D%01%98%90U%9C%1F%0C0)%9D%05%A8He%1F(%FCu%C1%05E%1D5%A8%09%04Z%96%D0v%93%D43%99I%7C%00rP%04EY%D9%82%01O%D2)%80%92%18%E1%96%E6%9C%94%B2%A9d%AA%FA%9C%D0%007%90%EEt%EA%80%0A%F2q%19iE%B5%82L%AB%90%CC%82%A5%FF%9A%C1%B2%99%C0%80z%C6%F6%01%01%B9%B6)%40%01%80%C2%E3-%09%0DP%C0M%24%CF%99%E7%25A%0D%20%20%EF%BC%F2%5Et%C0%BCV%22%20A%20%AD%99%03%9F%08%EFHp%AE%0A%1Bf%3B%EEJ%F0%FC%2B%02%B8%C1f%B0A%B3%2F%F6%92%23A%85-%AC%A2%0D%15%A3%3B%E4%01%B6%BA%80k%B6I%92%F0%E8''%10%D0%B0%06%F0TwC%01%07k%B1)%A5%02%E0%F9%C1%99%88%1CU%02%C3mf%80%B2M8%E0Z%80%08%03%14%F0%B3%15%03%80%5C%A7%CC%22%020c%C9%B9f%D0%01w9%B0%8Cg%D1%09%5CLE%D1F%07%A0%22S%7C%F48%C2%C7l%5ERl%0A%03%94%5DB%D9V%17%10%00%AFT%5B%DD%C2%7DV_%2C%B7%D94%0C%60%24%C81C%87%A6%0A%2C%3B%0C%B1J%23h%DA%26%9E%04%14%AC%00%88%04%24%A0m%02%8Ck%AB%A4%02C%CB%19y%91%FF%CDi%E7%C2%09%F8%A7%80%02%99%AA%8D%24%AF3%04%1D%AE%FF%AE%20%1Eh%D4%0A%0A%E8%CC3%0A%2C%0B%5Du%A6Gn%8E%E4%7D%A3s%FA%81%91*%3A%99%BB%00%FFiZ%80%93%BC%3E%D9%E1%07%2C%9Fh%A4%CC3Xn%B0%01%0E%5C%BA%A7%0A%048%CD%0E%9F%81%2B%3E%80%03*%B2%9C%E2%00%3E%7F%BB%E1%87%F9%99%F8%F5%AE%DF%1E%A9%E4%00-%8F%60%F2%B6r%5E%FE%81%00U%3B%00n%E44%10%C0%B2%C1%9D%B250%09%1C%00%B3%DE%0A%C5%93%D2%07%D8t%3D%EC%89%EF%03%1B%22%C1%01Ep0%5C%0D%0FWS%FB%9D%E2%D87%3F%11%E0*E%85%D3Z%0E%0Aw%24%98y%08N%8FI%01%08%EB%83%02%E5%81%08~h%B3%5B%A5%10%B8B%11%2C%90x%01(%5C%02%9Cd%BF%15%A2%2F%00BsS%F9%86%066%F8!%0F%075%1C%5D%06%14%B03Ltl%04%E1%C0%00%E0R%C02%CEY%0Fm%07L%E0%08%5E%08.%23%7D%08~-%93Z%D9%14%B7%B0%96%E1%CAC%3F%E4%81%01%0A%A0%B8%AB%A6m%40l%18%98%80%DC*%10%99%0B%1C1%05x%12_%EB%CA%D6%3A%11HQ%04%5C%24%81%E2V%E8%24%01%8C%80%86%F7%E1%10%E2%D2%B7%C00%F2%20%3F%BFcS%06%04%A0%014%CAK%02%C8%8A%C4%12Q%E0%24%C6%91o%80%C2c%1F%0BI%D0%BD%F1%0D%0D%5C%9C%EB%A2%89%904%BC%0A%8A%B2%8CH%C8%8F~8%E0%81%0B%E8%CBK%08%B8%C0%A1f%60%BF%19%82%8Ex%8C%A3%DF%1DE%80%A2%12%84%D2%8E%C83%80%02N%24'%5E%F5%F2k%1B%3A%1C.%9C%B4%0F%220%AE%99B%D0%1E4%83%60%BFiZ%F3%9A%D8%CC%A66%B7%C9%CDnzs%10!%00%00%3B)
31 May 2007 — reboot 9.0
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…
text/html MIME typeTell me more about those features!
DOCTYPE<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!doctype html><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"
oninput="list.data = '?p=' +
encodeURIComponent(value)">
<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>canvas drawing applicationcontenteditable attributeRich text editing in HTML!
Yay! Code used:
<p contenteditable="true">…</p>
datagrid elementmeter and progress<meter>max: 100; current: 75</meter><progress><span>0</span>%</progress> with the span element being updated by a scriptvideo and audio elementsSince applications need APIs…
HTML5 has added some…
Thank you!
whatwg.orgw3.org/htmlhtml5"