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
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 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.