HTML 5 in context
Sander van Lambalgen (Have Skill Webdevelopment)
2009-03-06 — MozCamp Utrecht
Sander van Lambalgen (Have Skill Webdevelopment)
2009-03-06 — MozCamp Utrecht
Q2 2004:
Mozilla/Opera position paper; requirements:
All other participants saw the future as a stack of (mostly) XHTML+XFORMS+SVG+SMIL+...
Microsoft was talking about XAML (now Silverlight)
Brendan Eich — The non-world non-wide non-web:
The sad fact is that the w3c is not concerned with the world wide web, AKA the Internet. Rather, the focus for a while now seems to be on vertical tool/plugin and service/cellphone markets, where interoperation is not a requirement, content authors are few and paid by the vertical service provider
Mozilla + Opera + Apple: WHATWG
Web Forms 2.0
Web Applications 1.0 => html 5
Tim Berners Lee — Reinventing HTML:
It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work.
March 2007 Charter:
<input type="foo"> degrades to <input type="text">)contenteditable)<br/>)Oct 2009: Last Call
2012: Candidate Recommendation
2011–2019: Test Suite
2020: Reissued Last Call
2022: Proposed Recommendation
Important date: 2022Oct 2009 & 2012
Why?
HTML documents will exist: 10 years from now. 100 years from now. 1000 years from now?
Enable entry into the market for new browser vendors, with the work of reverse engineering behaviour of existing browsers significantly reduced.
<meta http-equiv="refresh">innerHTML / outerHTML / insertAdjacentHTML()contenteditableWhy?
HTML 4.01 is a document language. Not quite suited for web applications. HTML 5 additions mostly aimed at rectifying this.
These additions are not meant to be complete; only covering the 80% use cases.
<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<bb>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<command>
<datagrid>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noscript>
<object>
<ol>
<option>
<optgroup>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<ul>
<var>
<video>
Semantics based on what many websites do now:
<header><footer><section><article><aside>A doctype you can remember: <!doctype html>
<canvas>
<audio> / <video>
<input type="email">:
<input type="date">:
<input type="range">:
<input list="languages" name="language">
<datalist id="languages">
<option value="Norwegian"></option>
<option value="Dutch"></option>
<option value="English"></option>
</datalist>HTML 5 differences from HTML 4
HTML 5 Reference: A Web Developer’s Guide to HTML 5
These slides:
http://have-skill.com/presentation/2009/mozcamp
E-mail: mozcamp-presentation at the domain have-skill dot com