HTML5

Simon Pieters <zcorpan@gmail.com>

2007-05-23

Who are developing HTML5?

You can participate in the development

Who are WHATWG?

Who are HTML WG?

What is HTML5?

HTML4

XHTML1

DOM2 HTML

HTML5

De facto standards in HTML5

Implemented new stuff

What can be used today?

How?

  1. Don’t change your habits!
  2. Include scripts for “old” browsers
  3. Use the new stuff

What about validation?

Scripts?

<canvas>
http://excanvas.sourceforge.net/
getElementsByClassName()
http://dean.edwards.name/weblog/2007/03/yet-another/
Web Forms 2.0
https://sourceforge.net/projects/wf2/

<canvas>

<canvas id="c"></canvas>
<script>
 var canvas = document.getElementById("c");
 var context = canvas.getContext("2d");
 context.fillStyle = "lime";
 context.fillRect(0, 0, 300, 150);
</script>

<canvas> demos

getElementsByClassName()

var elms = document
.getElementsByClassName("foo");
<input class="foo"> <!-- bingo -->
<input class="bar"> <!-- nope -->
<input class="bar foo"> <!-- bingo -->

getElementsByClassName()

var elms = document
.getElementsByClassName("foo bar");
<input class="foo"> <!-- nope -->
<input class="bar"> <!-- nope -->
<input class="bar foo"> <!-- bingo -->

Web Forms 2.0

<input>

<output>

<input name="range" type="range">

<output onformchange="value =
range.value">0</output>

pattern=""

<label> Credit Card Number:
 <input pattern="[0-9]{13,16}" name="cc">
</label>

Google Suggest with <datalist>

<input name="q" list="suggest" oninput="
list.data = '?p=' + encodeURIComponent(value)">

<datalist id="suggest"></datalist>

Serializations

text/html: boilerplate

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="Content-Type"
  content="text/html; charset=utf-8" />

text/html: boilerplate

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="Content-Type"
  content="text/html; charset="utf-8" />

text/html: boilerplate

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />

text/html: attribute syntax

XHTML5

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>

HTML vs. XHTML in text/html

(X)HTML5 on the server side?

HTML5 parsers

html5lib: parser output formats

html5lib: ElementTree

import html5lib
from html5lib import treebuilders
import xml.etree.ElementTree as ElementTree

f = open("test.html")
p = html5lib.HTMLParser(tree=treebuilders
      .getTreeBuilder("etree", ElementTree))
elementtree = p.parse(f)

The future