HTML5

Anne van Kesteren (Opera Software)

FLUGR — September 2010

<input type=date>

History

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

>1500 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 = HTML 5

Increasing Interoperability

Defining how to parse HTML as 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

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bb> <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> <keygen> <label> <legend> <li> <link> <mark> <map> <menu> <meta> <meter> <nav> <noscript> <object> <ol> <optgroup> <option> <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>

Addressing needs of Web applications.

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

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

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

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>

Bedankt! Vragen?