DIVE INTO HTML5 BY MARK PILGRIM WITH ILLUSTRATIONS FROM THE PUBLIC DOMAIN

❧

ive Into HTML5 seeks to elaborate on a hand-pied Selection of features from the HTML5 specification and other fine Standards. e final manuscript has been published on paper by O’Reilly, under the Google Press imprint. Buy the printed Work — artfully titled “HTML5: Up & Running” — and be the first in your Community to receive it. Your kind and sincere Feedba is always welcome. e Work shall remain online under the CC-BY-3.0 License. diveintohtml5.org

DIVE INTO HTML5

TABLE OF CONTENTS

Introduction: Five ings You Should Know About HTML5

0

A ite Biased History of HTML5

1

Detecting HTML5 Features: It’s Elementary, My Dear Watson

2

What Does It All Mean?

3

Let’s Call It a Draw(ing Surface)

4

Video in a Flash (Without at Other ing)

5

You Are Here (And So Is Everybody Else)

6

A Place To Put Your Stuff

7

Let’s Take is Offline

8

A Form of Madness

9

“Distributed,” “Extensibility,” And Other Fancy Words

10

e All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything

11

HTML5 Peeks, Pokes and Pointers

12

❧ “If you’re good at something, never do it for free.” —e Joker (but that doesn’t mean you should keep it to yourself) Copyright MMIX–MMX Mark Pilgrim

diveintohtml5.org

DIVE INTO HTML5

powered by Google™

diveintohtml5.org

Search

DIVE INTO HTML5

You are here: Home ‣ Dive Into HTML5 ‣

TABLE OF CONTENTS Introduction: Five ings You Should Know About HTML5 1. It’s not one big thing

i

2. You don’t need to throw anything away

ii

3. It’s easy to get started

iii

4. It already works

iv

5. It’s here to stay

v

A ite Biased History of HTML5 Diving In

i

MIME types

ii

A long digression into how standards are made

iii

An unbroken line

iv

A timeline of HTML development from 1997 to 2004

v

Everything you know about XHTML is wrong

vi

A competing vision

vii

WHAT Working Group?

viii

Ba to the W3C

ix

Postscript

x

diveintohtml5.org

TABLE OF CONTENTS

Further Reading

xi

Detecting HTML5 Features: It’s Elementary, My Dear Watson Diving In

i

Detection Teniques

ii

Modernizr, an HTML5 Detection Library

iii

Canvas

iv

Canvas Text

v

Video

vi

Video Formats

vii

Local Storage

viii

Web Workers

ix

Offline Web Applications

x

Geolocation

xi

Input Types

xii

Placeholder Text

xiii

Form Autofocus

xiv

Microdata

xv

Further Reading

xvi

What Does It All Mean? Diving In

i

e Doctype

ii

e Root Element

iii

diveintohtml5.org

TABLE OF CONTENTS

e Element

iv

Character Encoding

v

Friends & (Link) Relations

vi

New Semantic Elements in HTML5

vii

A long digression into how browsers handle unknown elements

viii

Headers

ix

Articles

x

Dates and Times

xi

Navigation

xii

Footers

xiii

Further Reading

xiv

Let’s Call It a Draw(ing Surface) Diving In

i

Simple Shapes

ii

Canvas Coordinates

iii

Paths

iv

Text

v

Gradients

vi

Images

vii

What About IE?

viii

A Complete, Live Example

ix

Further Reading

x

diveintohtml5.org

TABLE OF CONTENTS

Video in a Flash (Without at Other ing) Diving In

i

Video Containers

ii

Video Codecs

iii

Audio Codecs

iv

What Works on the Web

v

Licensing Issues with H.264 Video

vi

Encoding Ogg Video with Firefogg

vii

Bat Encoding Ogg Video with ffmpeg2theora

viii

Encoding H.264 Video with HandBrake

ix

Bat Encoding H.264 Video with HandBrake

x

Encoding WebM Video with ffmpeg

xi

At Last, e Markup

xii

What About IE?

xiii

Issues on iPhones and iPads

xiv

Issues on Android devices

xv

A Complete, Live Example

xvi

Further Reading

xvii

You Are Here (And So Is Everybody Else) Diving In

i

e Geolocation API

ii

Show Me e Code

iii

diveintohtml5.org

TABLE OF CONTENTS

Handling Errors

iv

Choices! I Demand Choices!

v

What About IE?

vi

geo.js to the Rescue

vii

A Complete, Live Example

viii

Further Reading

ix

A Place To Put Your Stuff Diving In

i

A Brief History of Local Storage Has Before HTML5

ii

Introducing HTML5 Storage

iii

Using HTML5 Storage

iv

HTML5 Storage in Action

v

Beyond Named Key-Value Pairs: Competing Visions

vi

Further Reading

vii

Let’s Take is Offline Diving In

i

e Cae Manifest

ii

e Flow of Events

iii

e fine art of debugging, a.k.a. “Kill me! Kill me now!”

iv

Let’s Build One!

v

Further Reading

vi

A Form of Madness diveintohtml5.org

TABLE OF CONTENTS

Diving In

i

Placeholder Text

ii

Autofocus Fields

iii

Email Addresses

iv

Web Addresses

v

Numbers as Spinboxes

vi

Numbers as Sliders

vii

Date Piers

viii

Sear Boxes

ix

Color Piers

x

Form Validation

xi

Required Fields

xii

Further Reading

xiii

“Distributed,” “Extensibility,” And Other Fancy Words Diving In

i

What is Microdata?

ii

e Microdata Data Model

iii

Marking Up People

iv

Marking Up Organizations

v

Marking Up Events

vi

Marking Up Reviews

vii

Further Reading

viii

diveintohtml5.org

TABLE OF CONTENTS

e All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything Further Reading

i

HTML5 Peeks, Pokes and Pointers

❧ “If you’re good at something, never do it for free.” —e Joker (but that doesn’t mean you should keep it to yourself) Copyright MMIX–MMX Mark Pilgrim

powered by Google™

diveintohtml5.org

Search

TABLE OF CONTENTS

You are here: Home ‣ Dive Into HTML5 ‣

INTRODUCTION: FIVE THINGS YOU SHOULD KNOW ABOUT HTML5 show table of contents

❧

1. It’s not one big thing You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation. You may think of HTML as tags and angle braets. at’s an important part of it, but it’s not the whole story. e HTML5 specification also defines how those angle braets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a tag; there is also a corresponding DOM API for video objects in the DOM. You can

use this API to detect support for different video formats, play a video, pause, mute audio, tra how mu of the video has been downloaded, and everything else you need to build a ri user experience around the tag itself. diveintohtml5.org

FIVE THINGS YOU SHOULD KNOW ABOUT HTML5

Chapter 2 and Appendix A will tea you how to properly detect support for ea new HTML5 feature.

2. You don’t need to throw anything away Love it or hate it, you can’t deny that HTML 4 is the most successful markup format ever. HTML5 builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period. Now, if you want to improve your web applications, you’ve come to the right place. Here’s a concrete example: HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date piers; others are more subtle. For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup anges or scripting has. is means you can start improving your web forms today, even if some of your visitors are stu on IE 6. Read all the gory details about HTML5 forms in Chapter 9.

3. It’s easy to get started “Upgrading” to HTML5 can be as simple as anging your doctype. e doctype should already be on the first line of every HTML page. Previous versions of HTML defined a lot of doctypes, and oosing the right one could be triy. diveintohtml5.org

FIVE THINGS YOU SHOULD KNOW ABOUT HTML5

In HTML5, there is only one doctype:

Upgrading to the HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5. But it will allow you to use — and validate — new semantic elements like

,

,

, and