Starting Up withHTML5

What is HTML5

HTML5 is a misnomer!

What people mean by HTML5

The W3C HTML5 spec

HTML5 Markup

HTML5 syntax & parser

Less redundant syntax

Basic HTML5 document

<!DOCTYPE html>
  <meta charset="UTF-8"/>
  <title>Hello, world</title>
  <p>Hello, world!</p>

Minimal syntax

<!DOCTYPE html>
<meta charset=UTF-8>
<title>Hello, world</title>
<p>Hello, world!

Maybe not the best for writing, but good for serving. Minimize your HTML5 with mod_pagespeed

Default attribute values

<link rel=stylesheet

New HTML elements

New HTML elements

HTML5 Multimedia

<audio> and <video>

Audio & video formats

Many sources for multimedia

<video controls>
  <source src="nggyu.webm">
  <source src="nggyu.mp4">

Video Solutions:

Video examples


An element that JavaScript can draw on

<canvas width="500" 
…fallback content here…

Contexts (outside HTML5):

Canvas API and 2d context

var canvas=$("canvas")[0],

ctx.fillStyle = 
  "rgba(255, 0, 0, 0.5)";
ctx.fillRect(x, y, w, h);


Canvas examples

Content sectioning and grouping

Sections in a typical blog

HTML5 Forms & UI

HTML5 Forms

New input types

<input type=email>
<input type=tel>

Multi-file upload

<progress> & <meter>

<progress value="250"
  25 out of 1000
<meter min=0 max=100 value=25>

Pros and cons of new input types

GOOD: Unsupported degrade to text.

BAD: Bad support worse than no support.

Advice: for now, use the ones that are text-like (email, tel, url) has a nice support table

Form validation

APIs hyped as "HTML5 APIs..."

The APIs list

NOT part of HTML5!

HTML5 now

What to do?

Where to get more information?

Helpful tools

And one more thing...

Keep the web OPEN
and ACCESSIBLE to all.

Thanks! Questions?

For follow-ups:, @marcoos.

Slides are online:

Image credits: HTML5 logo by the W3C. Screenshots under fair use.

Slides engine: dzSlides, under WTFPL.

Syntax highlighting thanks to highlight.js by Ivan Sagalaev (license)