?⃝ WHATWG

Proposing extensions to HTML4 and the DOM

?⃝

Opera

Apple

Mozilla

and others

?⃝ WHATWG

Proposing extensions to HTML4 and the DOM

HTML

5

<datagrid>

<canvas>

<input type="range">

<input type="email">

<input type="url">

<input type="time">

<input type="date">

autofocus="" required="" pattern="" list="" min=""

onstartdrag=""

contentEditable=""

pushState(...); onback="..."

Now with more semantics

<section>

<article>

<aside>

<nav>

<footer>

<calendar>

<vcard>

<progress> <gauge> <date> <time> <menu>

Now with more flexibility

<p>bla bla
 <ol>
  <li>bla</li>
  <li>bla</li>
 <ol>
</p>

<p>bla bla
 <table>
  <tr>
   <td>1.2</td>
   <td>2.6</td>
   ...

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

Fewer holes

Lots of buzzwords

I18N

Device independent

Multimodal

Media independent

Separates presentation from content

Accessible

Open standard

Wide industry support

Examples

<canvas>

MON TUE

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<canvas>

function paintSparkline(canvas, data) {
  with (canvas.getContext('2d')) {
    save();
    translate(0, canvas.height);
    for (var i = 0; i < data.length; i += 1)
      lineTo(i * canvas.width / data.length,
             data[i] * -canvas.height);
    strokeStyle = 'gray';
    stroke();
    restore();
  }
}

<event-source>

<event-source>

<event-source>

<event-source>

<event-source>

Before:

<iframe src="events.cgi"></iframe>

<script>parent.document.getElementById("cont
rols").innerHTML = "<table style=\"width:100
%\" class=\"smallfont\"><tr><th colspan=2><b
><span style=\"color:#44ff44\">Friendly plan
et</span></b></th></tr><tr><td>Owner:</td><t
d>Administrators</td></tr><tr><td>Class:</td
><td>Class M</td></tr><tr><td>Population:</t
d><td style='text-align:right;width:90px;'>2
,016,054</td></tr><tr><td>Max population:</t
d><td style='text-align:right;width:90px;'>2
,600,000</td></tr><tr><td>Name:</td><td>Newp
ort</td></tr><tr><td>Location:</td><td>(59,6

<event-source>

Before:

<iframe src="events.cgi"></iframe>

<script>parent.document.getElementById("cont
rols").innerHTML = "<table style=\"width:100
%\" class=\"smallfont\"><tr><th colspan=2><b
><span style=\"color:#44ff44\">Friendly plan
et</span></b></th></tr><tr><td>Owner:</td><t
d>Administrators</td></tr><tr><td>Class:</td
><td>Class M</td></tr><tr><td>Population:</t
d><td style='text-align:right;width:90px;'>2
,016,054</td></tr><tr><td>Max population:</t
d><td style='text-align:right;width:90px;'>2
,600,000</td></tr><tr><td>Name:</td><td>Newp
ort</td></tr><tr><td>Location:</td><td>(59,6

<event-source>

<event-source src="events.cgi"
             onevent="process(event)"/>

Data: Friendly planet
Data: Administrators
Data: Class M
Data: 2016054/2600000
Data: Newport
Data: 59,6

<event-source>

<event-source src="events.cgi"
             onevent="process(event)"/>

Data: Friendly planet
Data: Administrators
Data: Class M
Data: 2016054/2600000
Data: Newport
Data: 59,6

<event-source>

<event-source src="events.cgi"
             onevent="process(event)"/>

Data: Friendly planet
Data: Administrators
Data: Class M
Data: 2016054/2600000
Data: Newport
Data: 59,6

<event-source>

<event-source src="events.cgi"
             onevent="process(event)"/>

Data: Friendly planet
Data: Administrators
Data: Class M
Data: 2016054/2600000
Data: Newport
Data: 59,6

<output>

<output>

Before:

<div id="controls"></div>

<script>parent.document.getElementById("cont
rols").innerHTML = "<table style=\"width:100
%\" class=\"smallfont\"><tr><th colspan=2><b
><span style=\"color:#44ff44\">Friendly plan
et</span></b></th></tr><tr><td>Owner:</td><t
d>Administrators</td></tr><tr><td>Class:</td
><td>Class M</td></tr><tr><td>Population:</t
d><td style='text-align:right;width:90px;'>2
,016,054</td></tr><tr><td>Max population:</t
d><td style='text-align:right;width:90px;'>2
,600,000</td></tr><tr><td>Name:</td><td>Newp
ort</td></tr><tr><td>Location:</td><td>(59,6

<output>

Before:

<div id="controls"></div>

<script>parent.document.getElementById("cont
rols").innerHTML = "<table style=\"width:100
%\" class=\"smallfont\"><tr><th colspan=2><b
><span style=\"color:#44ff44\">Friendly plan
et</span></b></th></tr><tr><td>Owner:</td><t
d>Administrators</td></tr><tr><td>Class:</td
><td>Class M</td></tr><tr><td>Population:</t
d><td style='text-align:right;width:90px;'>2
,016,054</td></tr><tr><td>Max population:</t
d><td style='text-align:right;width:90px;'>2
,600,000</td></tr><tr><td>Name:</td><td>Newp
ort</td></tr><tr><td>Location:</td><td>(59,6

<output>

Before:

<div id="controls"></div>

<script>parent.document.getElementById("cont
rols").innerHTML = "<table style=\"width:100
%\" class=\"smallfont\"><tr><th colspan=2><b
><span style=\"color:#44ff44\">Friendly plan
et</span></b></th></tr><tr><td>Owner:</td><t
d>Administrators</td></tr><tr><td>Class:</td
><td>Class M</td></tr><tr><td>Population:</t
d><td style='text-align:right;width:90px;'>2
,016,054</td></tr><tr><td>Max population:</t
d><td style='text-align:right;width:90px;'>2
,600,000</td></tr><tr><td>Name:</td><td>Newp
ort</td></tr><tr><td>Location:</td><td>(59,6

<output>

<section>
 <form name="controls">
  <h1><output name="alignment"/></h1>
  <p>Owner: <output name="owner"/></p>
  <p>Class: <output name="planetClass"/></p>
  <!-- ... -->
 </form>
</section>

<output>

<section>
 <form name="controls">
  <h1><output name="alignment"/></h1>
  <p>Owner: <output name="owner"/></p>
  <p>Class: <output name="planetClass"/></p>
  <!-- ... -->
 </form>
</section>

<output>

<section>
 <form name="controls">
  <h1><output name="alignment"/></h1>
  <p>Owner: <output name="owner"/></p>
  <p>Class: <output name="planetClass"/></p>
  <!-- ... -->
 </form>
</section>

<output>

<section>
 <form name="controls">
  <h1><output name="alignment"/></h1>
  <p>Owner: <output name="owner"/></p>
  <p>Class: <output name="planetClass"/></p>
  <!-- ... -->
 </form>
</section>

<output>

<section>
 <form name="controls">
  <h1><output name="alignment"/></h1>
  <p>Owner: <output name="owner"/></p>
  <p>Class: <output name="planetClass"/></p>
  <!-- ... -->
 </form>
</section>

<output>

<script>
  function process(event) {
    var data = event.data.split('\n');
    var controls = document.forms.controls;
    controls.alignment.value = data[0];
    controls.owner.value = data[1];
    controls.planetClass.value = data[2];
    // ...
    // show the controls if they are hidden
    controls.parentNode.activate();
  }
</script>

<output>

<script>
  function process(event) {
    var data = event.data.split('\n');
    var controls = document.forms.controls;
    controls.alignment.value = data[0];
    controls.owner.value = data[1];
    controls.planetClass.value = data[2];
    // ...
    // show the controls if they are hidden
    controls.parentNode.activate();
  }
</script>

<output>

<script>
  function process(event) {
    var data = event.data.split('\n');
    var controls = document.forms.controls;
    controls.alignment.value = data[0];
    controls.owner.value = data[1];
    controls.planetClass.value = data[2];
    // ...
    // show the controls if they are hidden
    controls.parentNode.activate();
  }
</script>

<output>

<script>
  function process(event) {
    var data = event.data.split('\n');
    var controls = document.forms.controls;
    controls.alignment.value = data[0];
    controls.owner.value = data[1];
    controls.planetClass.value = data[2];
    // ...
    // show the controls if they are hidden
    controls.parentNode.activate();
  }
</script>

<output>

<script>
  function process(event) {
    var data = event.data.split('\n');
    var controls = document.forms.controls;
    controls.alignment.value = data[0];
    controls.owner.value = data[1];
    controls.planetClass.value = data[2];
    // ...
    // show the controls if they are hidden
    controls.parentNode.activate();
  }
</script>

<output>

<script>
  function process(event) {
    var data = event.data.split('\n');
    var controls = document.forms.controls;
    controls.alignment.value = data[0];
    controls.owner.value = data[1];
    controls.planetClass.value = data[2];
    // ...
    // show the controls if they are hidden
    controls.parentNode.activate();
  }
</script>

<output>

<script>
  function process(event) {
    var data = event.data.split('\n');
    var controls = document.forms.controls;
    controls.alignment.value = data[0];
    controls.owner.value = data[1];
    controls.planetClass.value = data[2];
    // ...
    // show the controls if they are hidden
    controls.parentNode.activate();
  }
</script>

Coming soon

Open

We want your feedback

whatwg@whatwg.org

whatwg.org