HTML5: The Missing Manual

Introduction

At first glance, you might assume that HTML5 is the fifth version of the HTML web-page-writing language. But the real story is a whole lot messier.

HTML5 is a rebel. It was dreamt up by a loose group of freethinkers who weren’t in charge of the official HTML standard. It allows page-writing practices that were banned a decade ago. It spends thousands of words painstakingly telling browser makers how to deal with markup mistakes, rather than rejecting them outright. It finally makes video playback possible without a browser plug-in like Flash. And it introduces an avalanche of JavaScript-fueled features that can give web pages some of the rich, interactive capabilities of desktop software.

Understanding HTML5 is no small feat. The most significant challenge is that people use the word HTML5 to refer to a dozen or more separate standards. (As you’ll learn, this problem is the result of HTML5’s evolution. It began as a single standard and was later broken into more manageable pieces.) In fact, HTML5 has come to mean “HTML5 and all its related standards” and, even more broadly, “the next generation of web-page-writing technologies.” That’s the version of HTML5 that you’ll explore in this book: everything from the HTML5 core language to a few new features are lumped in with HTML5 even though they were never a part of the standard.

This brings you to the second challenge of HTML5: browser support. Different browsers support different parts of HTML5, and there are some painfully new features that still don’t work in any browser, anywhere.

Despite these difficulties, there’s one fact that no one challenges: HTML5 is the future. Huge software companies like Apple and Google have lent it support; the W3C (World Wide Web Consortium) has given up its work on XHTML to formalize and endorse it; and every browser maker now supports a significant part of it. And if you read this book, you too can join the HTML5 party while it’s still fun and exciting, and create cool pages like the one shown in Figure 1.

Figure 1. In the dark old days of the Web (in other words, last year), you had to build your web page games with a browser plug-in like Flash. But with HTML5’s new features, including the canvas (shown here), you can use trusty, plug-in-free JavaScript. Here, HTML5 powers a maze game that you’ll dissect in Chapter 7.

What You Need to Get Started

This book covers HTML5, the latest and greatest version of the HTML standard. And while you don’t need to be a markup master to read it, you do need some previous web design experience. Here’s the official rundown:

• Web page writing. This book assumes you’ve written at least a few web pages before (or at the very least, you understand how to use HTML elements to structure content into headings, paragraphs, and lists). If you’re new to web design, you’re better off with a gentler introduction, like my own Creating a Website: The Missing Manual. (But don’t worry, you won’t be trapped in the past, as all the examples in Creating a Website are valid HTML5 documents.)

• Style sheet experience. No modern website is possible without CSS (the Cascading Style Sheet standard), which supplies the layout and formatting for web pages. To follow along in this book, you should know the basics of style sheets—how to create them, what goes inside, and how to attach one to a page. If you’re a bit hazy on the subject, you can catch up in Appendix A. But if you need more help, or if you just want to sharpen your CSS skills to make truly cool layouts and styles, check out a supplementary book like CSS: The Missing Manual by David Sawyer McFarland (O’Reilly).

• JavaScript experience. No, you don’t need JavaScript to create an HTML5 page. However, you do need JavaScript if you want to use many of HTML5’s slickest features, like drawing on a canvas or talking to a web server. If you have a smattering of programming experience but don’t know much about JavaScript, then Appendix B can help you get up to speed. But if the idea of writing code sounds about as comfortable as crawling into bed with an escaped python, then you’ll either end up skipping a lot of material in this book, or you’ll need to fill in the gaps with a supplementary book like JavaScript & jQuery: The Missing Manual by David Sawyer McFarland (O’Reilly).

If these requirements made your head spin a bit—well, that’s the cost of living on the bleeding edge of web design.

Writing HTML5

You can write HTML5 pages using the same software you use to write HTML pages. That can be as simple as a lowly text editor, like Notepad (on Windows) or TextEdit (on Mac). Many current design tools (like Adobe Dreamweaver and Microsoft Expression Web) have templates that let you quickly create new HTML5 documents. However, the basic structure of an HTML5 page is so simple that you can use any web editor to create one, even if your web editor wasn’t specifically designed for HTML5.

Note

And of course, it doesn’t matter whether you do your surfing and web page creation on a Windows PC or the latest MacBook—HTML5 supports operating systems of all stripes.

Viewing HTML5

The question everyone likes to ask is, “Which browsers support HTML5?” Sadly, it’s a question with no clear-cut answer. As you’ll discover in this book, HTML5 is really a collection of independent standards. Some of it is already supported; some of it won’t be supported for several years (and may never be). All the rest falls somewhere in the middle—which means that HTML5 works in some versions of some browsers.

Here are some browsers that support some significant portion of HTML5 without requiring workarounds:

• Internet Explorer 9 and later

• Firefox 3.5 and later

• Google Chrome 8 and later

• Safari 4 and later

• Opera 10.5 and later

Support improves with later releases. For example, Firefox 5 has far better HTML5 support than Firefox 3.5.

Before encouraging you to use a new HTML5 feature, this book clearly indicates that feature’s current level of browser support. Of course, browser versions change relatively quickly, so you’ll want to perform your own up-to-date research before you embrace any feature that might cause problems. The website http://caniuse.com lets you look up specific features and tells you exactly which browser versions support it. (You’ll learn more about this useful tool on When Will HTML5 Be Ready?.)

Note

This book discusses features that are known not to work in some browsers. Don’t panic. It’s perfectly fine if you just want to dip a toe into the waters of HTML5 and focus on the bits you can use today. Think of the rest as a sneak peek into the future of the Web.

When Will HTML5 Be Ready?

The short answer is “now.” Even the despised Internet Explorer 6, which is 10 years old and chock-full of website-breaking quirks, can display HTML5 documents. That’s because the HTML5 standard was intentionally created in a way that embraces and extends traditional HTML.

The more detailed answer is “it depends.” As you’ve already learned, HTML5 is a collection of different standards with different degrees of browser support. So although every web developer can switch over to HTML5 documents today (and some big sites, like Google, YouTube, and Wikipedia, already have), it may be years before it’s safe to use the bulk of HTML5’s fancy new features—at least without adding some sort of fallback mechanism for less-enlightened browsers.

Note

It really doesn’t matter whether a given feature is part of one specification or another—what matters is its current web browser support (and the likelihood that nonsupporting browsers will add support in the future). When this book introduces a new feature, it carefully points out where it’s defined and how well it’s supported.

As a standards-minded developer, you also might be interested in knowing how far the various standards are in their journey toward official status. This is complicated by the fact that the people who dreamt up HTML5 have a slightly subversive philosophy, and they often point out that what browsers support is more important than what the official standard says. (In other words, go ahead and use everything that you want right now, if you can get it to work.) But web developers, big companies, governments, and other organizations often take their cue about whether a language is ready to use by looking at the status of its standard.

Technically, the HTML5 language is now in the hands of the W3C as a working draft. This designation indicates it’s a fairly mature standard, but one that could still change as it passes through the candidate recommendation stage (probably sometime in 2012). The actual recommendation stage, which involves plenty of testing, could be many years later. But that isn’t as important, because there’ll be few changes at that point, and everyone who wants to use HTML5 will already be on the bandwagon.

About the Outline

This book crams a comprehensive HTML5 tutorial into 12 chapters. Here’s what you’ll find:

Part One: Meet the New Language

• Chapter 1 explains how HTML turned into HTML5. You’ll take your first look at an HTML5 document, see how the language has changed, and take a look at browser support.

• Chapter 2 tackles HTML5’s semantic elements—a group of elements that can inject meaning into your markup. Used properly, this extra information can help browsers, screen readers, web design tools, and search engines work smarter.

• Chapter 3 goes deeper into the world of semantics with add-on standards like microdata. And while it may seem a bit theoretical, there’s a fat prize for the web developers who understand it best: better, more detailed listings in search engines like Google.

Part Two: Creating Modern Web Pages

• Chapter 4 explores HTML5’s changes to the web form elements—the text boxes, lists, checkboxes, and other widgets that you use to collect information from your visitors. HTML5 adds a few frills and some basic tools for catching data-entry errors.

• Chapter 5 hits one of HTML5’s most exciting new features: its support for audio and video playback. You’ll learn how to survive Web Video Codec Wars to create playback pages that work in every browser, and you’ll even see how to create your own customized player.

• Chapter 6 introduces the two-dimensional drawing surface called the canvas. You’ll learn how to paint it with shapes, pictures, and text, and even build a basic drawing program (with a healthy dose of JavaScript code).

• Chapter 7 pumps up your canvas skills. You’ll learn about shadows and fancy patterns, along with more ambitious canvas techniques like clickable, interactive shapes and animation.

• Chapter 8 introduces the latest version of the CSS3 standard, which complements HTML5 nicely. You’ll learn how to jazz up your text with fancy fonts, adapt your page to different types of mobile devices, and add eye-catching effects with transitions.

Part Three: Building Web Apps with Desktop Smarts

• Chapter 9 covers the new web storage feature that lets you store small bits of information on the visitor’s computer. (It’s like a super-convenient version of the cookie feature.) You’ll also learn about ways to process a user-selected file in your web page JavaScript code, rather than on the web server.

• Chapter 10 explores the new HTML5 caching feature that can let a browser keep running a web page, even if it loses the web connection.

• Chapter 11 dips into the challenging world of web server communication. You’ll start with the time-honored XMLHttpRequest object, which lets your JavaScript code contact the web server and ask for information. Then you’ll move on to two newer features: server-side events and the more ambitious (and not-nearly-finished) web sockets.

• Chapter 12 covers three miscellaneous features that address challenges in modern web applications. First, you’ll see how geolocation can pin down a visitor’s position. Next, you’ll use web workers to run time-consuming tasks in the background. Finally, you’ll learn about the new browser history feature, which lets you sync up the web page URL to the current state of the page.

There are also two appendixes that can help you catch up with the fundamentals you need to master HTML5. Appendix A gives a stripped-down summary of CSS; Appendix B gives a concise overview of JavaScript.

About the Online Resources

As the owner of a Missing Manual, you’ve got more than just a book to read. Online, you’ll find example files as well as tips, articles, and maybe even a video or two. You can also communicate with the Missing Manual team and tell us what you love (or hate) about the book. Head over to www.missingmanuals.com, or go directly to one of the following sections.

The Missing CD

This book doesn’t have a CD pasted inside the back cover, but you’re not missing out on anything. Go to http://missingmanuals.com/cds/html5mm to download the web page examples discussed and demonstrated in this book. And so you don’t wear down your fingers typing long web addresses, the Missing CD page offers a list of clickable links to the websites mentioned in each chapter.

Tip

If you’re looking for a specific example, here’s a quick way to find it: Look at the corresponding figure in this book. The file name is usually visible at the end of the text in the web browser’s address box. For example, if you see the file path c:\HTML5\Chapter01\SuperSimpleHTML5.html (Figure 1-1), you’ll know that the corresponding example file is SuperSimpleHTML5.html.

The Try-Out Site

There’s another way to use the examples: on the live example site at www.prosetech.com/html5. There you’ll find live versions of every example from this book, which you can run in your browser. This convenience just might save you a few headaches, because HTML5 includes several features that require the involvement of a real web server. (If you’re running web pages from the hard drive on your personal computer, these features may develop mysterious quirks or stop working altogether.) By using the live site, you can see how an example is supposed to work before you download the page and start experimenting on your own.

Note

Don’t worry—when you come across an HTML5 feature that needs web server hosting, this book will warn you.

Registration

If you register this book at oreilly.com, you’ll be eligible for special offers—like discounts on future editions of Creating a Website: The Missing Manual. Registering takes only a few clicks. Type http://tinyurl.com/registerbook into your browser to hop directly to the Registration page.

Feedback

Got questions? Need more information? Fancy yourself a book reviewer? On our Feedback page, you can get expert answers to questions that come to you while reading, share your thoughts on this Missing Manual, and find groups for folks who share your interest in creating their own sites. To have your say, go to www.missingmanuals.com/feedback.

Errata

To keep this book as up to date and accurate as possible, each time we print more copies, we’ll make any confirmed corrections you suggest. We also note such changes on the book’s website, so you can mark important corrections into your own copy of the book, if you like. Go to http://tinyurl.com/3q56k7v to report an error and view existing corrections.

Newsletter

Our free email newsletter keeps you up to date on what’s happening in Missing Manual land. You can meet the authors and editors, see bonus video and book excerpts, and more. Go to http://tinyurl.com/MMnewsletter to sign up.

Safari® Books Online

Safari® Books Online is an on-demand digital library that lets you search over 7,500 technology books and videos.

With a subscription, you can read any page and watch any video from our library. Access new titles before they’re available in print. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.