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. One stumbling block 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” or, 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 lumped in with HTML5 even though they were never a part of the standard.
The second challenge of HTML5 is browser support. Different browsers support HTML5 to different degrees. The most notable laggard is Internet Explorer 8, which supports very little HTML5 and is still found on one out of every 20 web-surfing computers. (At least it was at the time of this writing. How to Find Out Which Browsers Are on the Web explains how you can get the latest browser usage statistics.) Fortunately, there are workarounds that can bridge the browser support gaps—some easy, and some ugly. In this book, you’ll learn a bit of both on your quest to use HTML5 in your web pages today.
Despite the challenges HTML5 presents, there’s one fact that no one disputes—HTML5 is the future. Huge software companies like Apple, Google, and Microsoft have lent it support, and the W3C (World Wide Web Consortium) has given up its work on XHTML to formalize and endorse it. With this book, you too can join the party and use HTML5 to create cool pages like the one shown in Figure 1.
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, Third Edition. (But don’t worry; you won’t be trapped in the past, as all the examples in the third edition of 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 CSS3: The Missing Manual by David Sawyer McFarland.
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 Visual Studio, 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 it wasn’t specifically designed for HTML5.
You’ll get support for most HTML5 features in the latest version of any modern browser, including the mobile browsers than run on Apple and Android devices. As long as your browser is up to date, HTML5 will perform beautifully—and you’ll be able to try out the examples in this book.
Currently, no browser supports every last detail of HTML5, in part because HTML5 is really a collection of interrelated standards. Google Chrome generally leads the browser race in HTML5 support, with Firefox and Opera in close pursuit. Safari lags the pack a bit, and Internet Explorer trails still further behind. The real problem lies in the old copies of Internet Explorer that can’t be updated because they’re running on creaky operating systems like Windows Vista or Windows XP (which is still chugging away on a fifth of the world’s desktop computers). Using HTML5 Today has a closer look at this problem and some advice on how to deal with it.
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 basic 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 many big sites, like Google, YouTube, and Wikipedia, already have), it may be some time before it’s safe to use all of HTML5’s fancy new features—at least without adding some sort of fallback mechanism for less-enlightened browsers.
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 them. (You’ll learn more about this useful tool on How to Find the Browser Requirements for Any HTML5 Feature.)
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, you can 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 cues about whether a language is ready to use by looking at the status of its standard.
At this writing, the HTML5 language is in the candidate recommendation stage, which means the standard is largely settled but browser makers are still polishing up their HTML5 implementations. The next and final stage is for the standard to become a full recommendation, and HTML5 is expected to hit that landmark in late 2014. In the meantime, the W3C has already published a working draft of the next version of the standard, which it calls HTML 5.1. (For more help making sense of all the different versions, see the box on the next page.)
About the Outline
This book crams a comprehensive HTML5 tutorial into 13 chapters. Here’s what you’ll find:
Part One: Meet the New Language
Chapter 1 explains how HTML turned into HTML5. You’ll meet your first 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.
Part Two: Video, Graphics, and Glitz
Chapter 5 hits one of HTML5’s most exciting 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 latest version of the CSS3 standard, which complements HTML5 nicely. You’ll learn how to jazz up your text with fancy fonts and add eye-catching effects with transitions and animation.
Chapter 7 explores CSS3 media queries. You’ll learn how to use them to create responsive designs—website layouts that seamlessly adapt themselves to different mobile devices.
Chapter 9 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.
Part Three: Building Web Apps
Chapter 11 explores the HTML5 caching feature that can let a browser keep running a web page, even if it loses the web connection.
Chapter 12 dips into the challenging world of web server communication. You’ll start with the time-honored
Chapter 13 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 browser history feature, which lets you sync up the web page URL to the current state of the page.
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/html5tmm2e 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.
The Try-Out Site
There’s another way to use the examples: on the 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 (www.oreilly.com), you’ll be eligible for special offers—like discounts on future editions of HTML5: 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 of 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/html52e-mm to report an error and view existing corrections.
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.