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.
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.
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).
If these requirements made your head spin a bit—well, that’s the cost of living on the bleeding edge of web design.
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.
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?.)
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.
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.
This book crams a comprehensive HTML5 tutorial into 12 chapters. Here’s what you’ll find:
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.
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 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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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 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.