O’Reilly Ebooks—Your bookshelf on your devices!

When you buy an ebook through oreilly.com, you get lifetime access to the book, and whenever possible we provide it to you in four, DRM-free file formats—PDF, .epub, Kindle-compatible .mobi, and Android .apk ebook—that you can use on the devices of your choice. Our ebook files are fully searchable and you can cut-and-paste and print them. We also alert you when we’ve updated the files with corrections and additions.

Learn more at http://oreilly.com/ebooks/ You can also purchase O’Reilly ebooks through iTunes, the Android Marketplace, and Amazon.com. HTML5: The Missing Manual by Matthew MacDonald

Copyright © 2011 Matthew MacDonald. All rights reserved. Printed in the Unites States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles: http://my.safaribooksonline.com. For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Printing History: August 2011: First Edition.

Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc. HTML5: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

ISBN: 978-1-449-30239-9 [M] Table of Contents

The Missing Credits...... xi Introduction...... 1

Part One: Meet the New Language Chapter 1: Introducing HTML5...... 11 The Story of HTML5 ...... 11 XHTML 1.0: Getting Strict...... 12 XHTML 2: The Unexpected Failure...... 12 HTML5: Back From the Dead...... 13 HTML: The Living Language...... 14 Three Key Principles of HTML5...... 15 1. Don’t Break the Web...... 15 2. Pave the Cowpaths...... 17 3. Be Practical...... 17 Your First Look at HTML5 Markup...... 18 The HTML5 Doctype...... 20 Character Encoding...... 21 The Language...... 21 Adding a Style Sheet...... 22 Adding JavaScript...... 22 The Final Product...... 23 A Closer Look at HTML5 Syntax...... 24 The Loosened Rules...... 24 HTML5 Validation...... 25 The Return of XHTML...... 27

iii HTML5’s Element Family...... 29 Added Elements...... 29 Removed Elements...... 30 Adapted Elements...... 30 Tweaked Elements...... 32 Standardized Elements...... 33 Using HTML5 Today...... 34 Evaluating Browser Support...... 34 Browser Adoption Statistics...... 36 Feature Detection with Modernizr...... 38 Feature “Filling” with Polyfills...... 40

Chapter 2: A New Way to Structure Pages...... 43 Introducing the Semantic Elements...... 44 Retrofitting a Traditional HTML Page...... 45 Page Structure the Old Way...... 47 Page Structure with HTML5...... 49 Subtitles with

...... 52 Adding a Figure with

...... 53 Adding a Sidebar with

...... 56 Browser Compatibility for the Semantic Elements...... 57 Designing a Site with the Semantic Elements...... 60 Deeper into Headers...... 61 Navigation Links with

...... 62 Deeper into Footers...... 67 Deeper into Sections...... 69 The HTML5 Outlining System...... 70 How to View an Outline...... 70 Basic Outlines...... 71 Sectioning Elements...... 73 Solving an Outline Problem...... 76

Chapter 3: Meaningful Markup...... 81 The Semantic Elements Revisited...... 82 Dates and Times with ...... 83 JavaScript Calculations with

...... 84 Highlighted Text with ...... 86 Other Standards that Boost Semantics...... 87 ARIA (Accessible Rich Internet Applications)...... 88 RDFa (Resource Description Framework)...... 89 Microformats...... 89 Microdata...... 95 Google Rich Snippets...... 97 Enhanced Search Results...... 98 The Recipe Search Engine...... 101

iv table of contents Part Two: Creating Modern Web Pages Chapter 4: Web Forms, Refined...... 107 Understanding Forms...... 108 Revamping a Traditional HTML Form...... 109 Adding Hints with Placeholders...... 113 Focus: Starting in the Right Spot...... 115 Validation: Stopping Errors...... 116 How HTML5 Validation Works...... 116 Turning Validation Off...... 118 Validation Styling Hooks...... 119 Validating with Regular Expressions...... 120 Custom Validation...... 121 Browser Support for Validation...... 123 New Types of Input ...... 125 Email Addresses...... 128 URLs...... 128 Search Boxes...... 128 Telephone Numbers...... 129 Numbers...... 129 Sliders...... 130 Dates and Times...... 131 Colors...... 132 New Elements...... 132 Input Suggestions with

...... 138 An HTML Editor in a Web Page...... 138 Using contentEditable to Edit an Element...... 138 Using designMode to Edit a Page...... 141

Chapter 5: Audio and Video...... 143 Understanding Video Today...... 144 Introducing HTML5 Audio and Video...... 145 Making Some Noise with

table of contents v Chapter 6: Basic Drawing with the Canvas...... 171 Getting Started with the Canvas...... 172 Straight Lines...... 174 Paths and Shapes...... 177 Curved Lines...... 179 Transforms...... 182 Transparency...... 185 Building a Basic Paint Program...... 188 Preparing to Draw...... 189 Drawing on the Canvas...... 190 Saving the Picture in the Canvas...... 192 Browser Compatibility for the Canvas...... 195 Polyfilling the Canvas...... 196 The Canvas Fallback and Feature Detection...... 197

Chapter 7: Deeper into the Canvas...... 199 Other Things You Can Draw on the Canvas...... 200 Drawing Images...... 200 Slicing, Dicing, and Resizing an Image...... 202 Drawing Text...... 203 Shadows and Fancy Fills...... 205 Adding Shadows...... 205 Filling Shapes with Patterns...... 207 Filling Shapes with Gradients ...... 208 Putting It Together: Drawing a Graph...... 211 Making Your Shapes Interactive...... 216 Keeping Track of What You’ve Drawn...... 217 Hit Testing with Coordinates...... 220 Animating the Canvas...... 222 A Basic Animation...... 223 Animating Multiple Objects...... 224 A Practical Example: the Maze Game...... 229 Setting Up the Maze...... 229 Animating the Face...... 232 Hit Testing with Pixel Colors...... 234

Chapter 8: Boosting Styles with CSS3...... 237 Using CSS3 Today...... 238 Strategy 1: Use What You Can...... 238 Strategy 2: Treat CSS3 Features as Enhancements...... 238 Strategy 3: Add Fallbacks with Modernizr...... 240 Browser-Specific Styles...... 243

vi table of contents Web Typography...... 244 Web Font Formats...... 245 Using a Font Kit...... 247 Using Google Web Fonts...... 250 Using Your Own Fonts...... 252 Putting Text in Multiple Columns...... 253 Adapting to Different Devices...... 255 Media Queries...... 256 More Advanced Media Queries...... 259 Replacing an Entire Style Sheet...... 261 Recognizing Mobile Devices...... 261 Building Better Boxes...... 263 Transparency...... 263 Rounded Corners...... 265 Backgrounds...... 266 Shadows...... 268 Gradients...... 269 Creating Effects with Transitions...... 271 A Basic Color Transition...... 272 More Transition Ideas...... 274 Transforms...... 274

Part Three: Building Web Apps with Desktop Smarts Chapter 9: Data Storage...... 281 Web Storage Basics...... 282 Storing Data...... 283 A Practical Example: Storing the Last Position in a Game...... 285 Browser Support for Web Storage...... 287 Deeper into Web Storage...... 288 Removing Items...... 288 Finding All the Stored Items...... 288 Storing Numbers and Dates...... 289 Storing Objects...... 290 Reacting to Storage Changes...... 292 Reading Files...... 294 Getting Hold of a File...... 295 Browser Support for the File API...... 295 Reading a Text File...... 296 Replacing the Standard Upload Control...... 298 Reading Multiple Files at Once...... 298 Reading an Image File...... 299

table of contents vii Chapter 10: Offline Applications...... 303 Caching Files with a Manifest...... 304 Creating a Manifest...... 305 Using Your Manifest...... 307 Putting Your Manifest on a Web Server...... 308 Updating the Manifest File...... 310 Browser Support for Offline Applications...... 312 Practical Caching Techniques...... 314 Accessing Uncached Files...... 314 Adding Fallbacks...... 315 Checking the Connection...... 317 Pointing Out Updates with JavaScript...... 318

Chapter 11: Communicating with the Web Server...... 323 Sending Messages to the Web Server...... 324 The XMLHttpRequest Object...... 325 Asking the Web Server a Question...... 325 Getting New Content...... 330 Server-Sent Events...... 333 The Message Format...... 334 Sending Messages with a Server Script...... 335 Processing Messages in a Web Page...... 337 Polling with Server-Side Events...... 339 Web Sockets...... 340 Assessing Web Sockets...... 341 A Simple Web Socket Client...... 343 Web Socket Examples on the Web...... 344

Chapter 12: More Cool JavaScript Tricks...... 347 Geolocation...... 348 How Geolocation Works...... 349 Finding a Visitor’s Coordinates...... 351 Dealing with Errors...... 353 Setting Geolocation Options...... 355 Showing a Map...... 356 Monitoring a Visitor’s Moves...... 360 Web Workers...... 360 A Time-Consuming Task...... 362 Doing Work in the Background...... 364 Handling Worker Errors...... 367 Canceling a Background Task...... 367 Passing More Complex Messages...... 368

viii table of contents History Management...... 371 The URL Problem...... 372 The Traditional Solution: Hashbang URLs...... 373 The HTML5 Solution: Session History...... 374 Browser Compatibility for Session History...... 377

Part Four: Appendixes Appendix A: A Very Short Introduction to CSS...... 381 Appendix B: A Very Short Introduction to JavaScript...... 397

Index...... 419

table of contents ix chapter 1 Introducing HTML5

f HTML were a movie, HTML5 would be its surprise twist. HTML wasn’t meant to survive into the 21st century. The official web standards Iorganization, called the W3C (short for World Wide Web Consortium), left HTML for dead way back in 1998. The W3C pinned its future plans on a modern- ized successor called XHTML. It took a group of disenfranchised rebels to resusci- tate HTML and lay the groundwork for the features that you’ll explore in this book. In this chapter, you’ll get the scoop on why HTML died, and how it came back to life. You’ll learn about HTML5’s philosophy and features, and you’ll consider the thorny issue of browser support. You’ll also get your first look at a bona fide HTML5 docu- ment—both in its simplest form, and as a more practical template that you can use as a starting point for any website. The Story of HTML5 As you know, HTML is the language you use to write web pages. The basic idea of HTML—that you use elements to structure your content—hasn’t changed since the Web’s earliest days. In fact, even the oldest web pages still work perfectly well in the most modern web browsers (including several browsers that didn’t exist at the time, like Firefox and Chrome). Being old and successful also carries some sizable risks—namely, everyone wants to replace you. In 1998, the W3C stopped working on HTML and attempted to im- prove it with an XML-powered successor called XHTML 1.0.

11 ​The Story of HTML5 XHTML 1.0: Getting Strict XHTML has most of the same syntax conventions as HTML, but it enforces stricter rules. Much of the sloppy markup that traditional HTML permitted just isn’t accept- able in XHTML. For example, suppose you want to italicize the last word in a heading, like so:

The Life of a Duck

And you accidentally swap the final two tags:

The Life of a Duck

When a browser encounters this slightly messed-up markup, it can figure out what you really want. It italicizes the last word, without even a polite complaint. However, the mismatched tags break the official rules of XHTML. If you plug your page into an XHTML validator (or use a web design tool like Dreamweaver), you’ll get a warn- ing that points out your mistake. From a web design point of view, this is helpful— it lets you catch minor mistakes that might cause inconsistent results on different browsers, or might cause bigger problems when you edit and enhance the page. At first, XHTML was a success story. Professional web developers, who were frus- trated with browser quirks and the anything-goes state of web design, flocked to XHTML. Along the way, they were forced to adopt better habits and give up a few of the half-baked formatting features found in HTML. However, many of XHTML’s imagined benefits—like interoperability with XML tools, easier page processing for automated programs, portability to mobile platforms, and extensibility of the XHTML language itself—never came to pass. Still, XHTML became the standard for most serious web designers. And while every- one seemed pretty happy, there was one dirty secret: Although browsers understood XHTML markup, they didn’t enforce the strict error-checking that the standard required. That means a page could break the rules of XHTML, and the browsers wouldn’t blink. In fact, there was nothing to stop a web developer from throwing together a mess of sloppy markup and old-fashioned HTML content, and calling it an XHTML page. There wasn’t a single browser on the planet that would complain. And that made the people in charge of the XHTML standard deeply uncomfortable.

XHTML 2: The Unexpected Failure The solution was supposed to be XHTML 2. It was set to tighten up the error- handling rules, forcing browsers to reject invalid XHTML 2 pages. XHTML 2 also threw out many of the quirks and conventions it had inherited from HTML. For ex- ample, the system of numbered headings (

,

,

, and so on) was super- seded by a new element, whose significance depended on its position in a web page. Similarly, the element was eclipsed by a feature that let web developers transform any element into a link, and the element lost its alt attribute in favor of a new way to supply alternate content.

12 html5: the missing manual ​The Story of HTML5

These changes were typical of XHTML 2. From a theoretical point of view, they were cleaner and made more sense. From a practical point of view, they forced everyone to change the way they wrote web pages (to say nothing of updating the web pages they already had), without adding new functionality to make all the work worth- while. And along the way, XHTML 2 dumped a few well-worn elements that some web designers still loved, like (for bold text), (for italics), and