HTML5: Up and Running

HTML5: Up and Running by Mark Pilgrim
$29.99 from O’Reilly Media

It might surprise you to know that every major browser, including Internet Explorer, currently supports some elements of HTML5. Unless you’re obsessed with web standards, though, you’ve probably been waiting on the HTML5 books to release before fully diving in. Wait no more!

I want to be clear: HTML5: Up and running is not a tutorial on HTML; the assumption is that you already know how to build a simple webpage. If not, there are probably millions of websites that can get you going. This book was written for one purpose: to show you how HTML5 changes webpage design, and how you can use it to provide a better user experience.

Chapter 1, How Did We Get Here, is a bit of an overview; it discusses the history of HTML and previews some of the things that will be covered in the book. This chapter is of mostly historical interest; you don’t need to read it before you get started, but it’s short and an interesting read. The rest of the chapters are broken down by feature, so you can jump around to what you need (although it’s a good idea to read chapter 2 first). In fact, when I started using this book a few months ago, that’s exactly what I did; I needed to know how to do HTML5 video so I started with that section. While the book only released  about a week ago, much of the content was available online before going to print, and I referred to it extensively when I started working with HTML5.

Chapter 2 covers detecting HTML5 features; every modern browser supports a different subset of these, so if you’re relying on a feature, you need to make sure the user’s browser can understand it. This chapter is basically a list of features, such as the new canvas element; after each feature is code showing you how to detect support for that feature by either checking for it in the DOM or using Modernizr, an open-source JavaScript library designed to let you easily detect support for various HTML5 and CSS3 features. Throughout the book, if a feature is not supported in every major browser, the book either shows how it degrades gracefully or provides a workaround.

Chapter three discusses the new semantic elements in HTML5 and discusses how it simplifies web markup. I actually got excited reading this chapter just from how much easier it is to set up the document now; those long, complex DOCTYPEs that you have to copy and paste are now replaced with a simple <!DOCTYPE html>.  Several simplifying things like that make this my favorite chapter; I love something that makes my life easier. If you’re not familiar with the reason for DOCTYPEs and how browsers render different types of documents, there’s also a good explanation at the end of the chapter.

Chapter 4 (which is currently available as a free download on the O’Reilly page for the book)  discusses the canvas element, which creates a blank surface you can use javascript to draw on, thus giving you more control over your images. Amazingly, every modern browser supports the canvas tag, although IE requires a third party library. This chapter is all about drawing on your pages.

Chapter 5 covers the new video tag, which is supported by all major browsers other than IE and Firefox 3.0. Want to make sure that iPad users can see your videos? Skip flash and embed them directly with HTML5! In practice, if you want them to display on every platform and browser, you actually end up doing several encodings to cover all the modern browsers, plus Flash for IE to fall back on. Aside from how to embed the video, this chapter covers how to do your encoding so the video is ready to use.

Chapter 6 covers geolocation: providing services based on where the user is. Unlike other features of HTML5, the user must specifically allow your site to take advantage of his location; calling the geolocation functions will pop up an unconditional (that is, the website cannot bypass it) permissions box asking the user if the site should be allowed to use his location, and whether it should remember that choice. Users can also set separate permissions for low- and high-accuracy geolocation.

Local storage, which allows you to keep information on the user’s hard drive like a cookie (but without having to send it back to the server with every HTTP request,  unlike a cookie!) is actually supported in the latest version of every major browser; even more astonishingly, they support it consistently, allowing each website to store up to 5MB of information on the user’s hard drive. Chapter 7 discusses how to use it.

In the days of high-speed internet, people tend to be always connected…but of course, this isn’t true of mobile devices, which may need to find a wifi connection. Offline applications, which are supported by everything except IE and Opera, allow a web application to automatically download all needed files to the user’s computer, allowing the user to keep working even without a connection; after the connection is reestablished, the application can resync with the server. Chapter 8 discusses some tear-your-hair-out problems that can come up while debugging offline applications.

HTML5 introduces a number of new attributes and types you can use with your web forms. The nice thing about them is that, while no one browser supports all of them, they all degrade gracefully;  unrecognized attributes are ignored and unrecognized types are treated as text, so while older browsers may not see all the bells and whistles you’ve added to your forms, they’ll still work just fine. Chapter 9 shows how you can make your sites more usable with these new form options.

Even with all the new things that the HTML5  specification adds (over 100 new elements!), it still won’t do everything that some people want it to do. Microdata allows you to add your own custom vocabulary to a webpage; it lets you apply additional semantics to data that already exists on the page. Chapter 10 discusses how to use microdata; while no browser currently have native support for microdata, Google does use it Thus, while adding microdata now probably won’t make a big difference to your user experience, it can affect how search engines display results from your site, hopefully improving your search traffic and helping users find what they’re looking for.

The book also includes a short appendix repeating the code for detecting all the new HTML5 elements that need to be detected, along with another recommendation to use Modernizr instead.

Final impressions? As you can probably tell from the length of this review, I loved the book. I did have one minor quibble, unrelated to the content:  the text wasn’t aligned correctly with the page, which looks a little weird, but it doesn’t affect readability. I was sent an advance copy of the book, so for all I know they may have corrected this by now. Overall, though, I found the book extremely readable and informative and feel that it gave me a good grasp of the capabilities of HTML5. Although I’d previously read most of the book online, I love having a hardcopy and plan to keep this close to my desk as a quick reference as I move more into using the latest version of HTML. The book is also very up to date; although it was extremely well edited (and I get annoyed by typos easily, so that’s high praise), it seems to have been updated right up to when they went to print; one section mentions that it was written on May 20th of this year. With how quickly computer technology changes, it’s nice to have a reference book with the latest information.

Overall: Highly recommended.

[rating: 5/5]


This entry was posted by William on Friday, September 3rd, 2010 at 1:56 pm and is filed under Technical . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Comment

  1. William says:

    Even since the book released at the end of August, there have been changes that affect the information presented. For example, this book goes into some detail on alternate file formats to H.264, because the others are open source and the owners of the patent-encumbered H.264 had only committed to keeping it freely available through the end of 2015. As of late August, however, it has been announced that for websites using the technology for freely available video, it will be free of charge forever.

Leave a Reply