Starting Up with HTML 5

What people mean by HTML5

HTML5 as specified by W3C
W3C APIs external to HTML5 (Geoloc, DOM4, WebGL)
CSS 3 and 4
vendor-specific features :(
"all the cool & new stuff"

Less redundant syntax

```
<!DOCTYPE html>
```
```
<meta charset=UTF-8>
```
closing tags often optional:
```
<ul><li>hello<li>bye</ul>
```

Basic HTML5 document

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

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

<script>
<style>
<link rel=stylesheet
    href=styles.css>
<input>

New HTML elements

multimedia:
```
<audio> <video> <source> <canvas>
```

sections & content grouping:

<section> <article> <aside>
<hgroup> <header> <footer> <nav>
<figure> <figcaption>

New HTML elements

text-level semantics:
```
<mark> <time> <ruby> <rt> <rp>
```
forms:
```
<output> <progress> <meter> <datalist>
```
ui:
```
<details> <summary> <command>
```

<audio> and <video>

…are for sounds and videos what <img> is for images
```
<audio src=friday.ogg></audio>
```
```
<video src=nggyu.webm></video>
```
…not that easy in practice :(

Many sources for multimedia

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

Canvas

An element that JavaScript can draw on

<canvas width="500" 
    height="400">
…fallback content here…
</canvas>

Contexts (outside HTML5):

W3C Canvas 2d context
Khronos WebGL - 3d context

Canvas API and 2d context

var canvas=$("canvas")[0],
    ctx=canvas.getContext("2d");

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

Demo

HTML5 Forms

new <input> types
new elements (<output>, <progress>, <meter>)
client-side validation (without JS)

New input types

email tel url search
color range number
date datetime datetime-local time month week

Demo

<input type=email>

<input type=tel>

Multi-file upload

<input type=file multiple>

server-side sees this the same way as many single inputs with the same name
degrades to a single-file input when unsupported
JS: fileInput.files - a FileList
Demo (FileList), demo (FileAPI)

<progress> & <meter>

<progress value="250"
  max="1000">
  25 out of 1000
</progress>

<meter min=0 max=100 value=25>
25%</meter>

Demo

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)

wufoo.com has a nice support table

Form validation

some input types won't allow sending invalid content (email, number etc.)
required boolean attribute for required elements
pattern attribute can be used if other restrictions needed:
```
<input pattern="[a-z]{3}">
```

What to do?

Use widely-implemented parts of HTML5
Use parts of HTML5 that degrade well
Use progressive enhancement
Use polyfills and shims (html5shiv needed for IE8-)
Stay out of the really unstable features

Thanks! Questions?

For follow-ups: marcoos@marcoos.com, @marcoos.

Slides are online: j.mp/suwhtml5

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)

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

Minimal syntax

Default attribute values

New HTML elements

New HTML elements

HTML5 Multimedia

<audio> and <video>

Audio & video formats

Many sources for multimedia

Video Solutions:

Video examples

Canvas

Canvas API and 2d context

Canvas examples

Content sectioning and grouping

HTML5 Forms & UI

HTML5 Forms

New input types

Multi-file upload

<progress> & <meter>

Pros and cons of new input types

Form validation

APIs hyped as "HTML5 APIs..."

The APIs list

HTML5 now

What to do?

Where to get more information?

Helpful tools

And one more thing...

Thanks! Questions?