Introduction to HTML5

Sunny Wong

http://draco.sg/ (@draco)

30 September 2009, WebSG

HTML4 is old

XHTML2

HTML5

HTML5

XHTML5

DOM5 HTML

2022

The DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!doctype html>

Character encoding

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8">

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">      
</head>
<body>
  <p>Hello world!</p>
</body>
</html>

Implementation issues

IE6/7/8

<script>
  document.createElement("element"); 
</script>

Most modern browsers

Firefox, Safari, Opera, Chrome, etc

element{display:block}

Firefox <3 (Gecko 1.9)

application/xhtml+xml

HTML5 forms

Making life easier for lazy developers

datalist

<input id="datalist" 
  list="flights" type="text">
<datalist id="flights">
  <option value="Singapore" label="SIN">
  <option value="Malaysia" label="MY">
</datalist>

input type="date"

<input type="date" min="2008-02-14" max="2010-02-14">

input type="range"

0

<input name="range" type="range"
  min="1000" max="3000">
<output 
  onformchange="value=range.value">
  0</output>

input pattern=[0-9]{3} required autofocus

Other input type states

New elements

http://www.youtube.com/html5/

video


<video width="640" height="360" 
  src="/demo/google_main.mp4?2" 
  autobuffer>
<div class="video-fallback">You must 
  have an HTML5 capable browser.</div>
</video>

More demos

html5 demos

Questions?

Thanks for listening!

Do read addendum to this presentation

References