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 traditional desktop software.
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.
Figure 1. In the dark old days of the Web, you had to build your web page games with a browser plug-in like Flash. But with HTML5’s 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 9.
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.
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 most powerful 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 book like JavaScript & jQuery: 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.
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.
Note
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.)
This book crams a comprehensive HTML5 tutorial into 13 chapters. Here’s what you’ll find:
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.
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 8 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 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.
Chapter 10 covers the web storage feature that lets you store small bits of information on the visitor’s computer. 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 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
XMLHttpRequestobject, 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 web sockets.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.
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.
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/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.
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.
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 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.
Get HTML5: The Missing Manual, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
