HTML5

Anne van Kesteren

@annevk

History

HTML4

Initial version ready in six months.

Lots of details left undefined.

XHTML1

Identical to HTML4, just a different syntax.

W3C started working on XForms and XHTML2.

"The Workshop"

W3C hosted a workshop on Web applications in 2004.

W3C: "XML is the future."

Browser vendors revolted. (Opera, Mozilla & Apple.)

Instead of reinventing HTML, evolve it.

WHATWG

Lots of people on the mailing list.

wiki.whatwg.org

blog.whatwg.org

forums.whatwg.org

End of 2006 Tim Berners-Lee had a change of heart: 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.

w3.org/html + whatwg.org = HTML5

Increasing Interoperability

For instance, by defining the contenteditable attribute.

Defining how to parse HTML.

It would be nice if in one hundred years we can still read what we write today.

Enabling competition by defining the Web platform in greater detail.

Extending HTML

Addressing needs of Web applications.

Better structure for documents based on author conventions. E.g. <header>, <footer>, <section>, and <aside>.

Hooks for scripts using data-* attributes. (jQuery Mobile is based around this.)

Simpler HTML

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">

type="" is now optional

<style type="text/css">
 /* ... */
</style>

<script src="…" type="text/javascript"></script>

type="" is now optional

<style>
 /* ... */
</style>

<script src="…"></script>

<canvas>

<canvas width="150" height="200" id="demo">
 <!-- Still using Internet Explorer? -->
</canvas>

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

Simple canvas application

Video

Syntax

<video src=clip.webm controls>
  Download the <a href=clip.ogg>clip</a>.
  <!-- browser does not support <video> -->
</video>

Format

WebM

Distributing several equivalent video streams

<video>
 <source type=video/mp4 src=clip.mp4>
 <source type=video/webm src=clip.webm>
</video>

(Yes, there's an equivalent audio element.)

Forms

<input list="languages" name="language">
<datalist id="languages">
  <option value="Dutch"></option>
  <option value="English"></option>
  <option value="Norwegian"></option>
  <option value="Portuguese"></option>
</datalist>

<input type="number">:

<input type="range">:

<input pattern="[a-z]">

<input type=range min=10 max=50 step=5>

<input required="">

<input type=file multiple>

Near Future

There is a lot more coming.

3D via WebGL

Bidirectional communication channel via the WebSocket protocol and API.

Video conferencing APIs.

Thanks! Questions?