Book Review / Overview: “HTML5: Up and Running” by Mark Pilgrim



I’ve just finished reading “HTML5: Up and Running” by Mark Pilgrim ( I liked the book, as it’s a good introduction to the new features of HTML5, and even broken down the way I wanted it to be, i.e. a chapter for each new set of features. However, I was a little disappointed by some of it, so I feel it’s deserving of 3 stars out of 5. The good: an entertaining history of the HTML img tag; introductions to 3rd party libraries Modernizr, html5shiv, and explorecanvas; the example board game in the chapter on the canvas tag (later updated to use local storage); the development gotchas mentioned in the chapter on offline web applications; the detail on new form elements; and the chapter covering microdata. The bad: too much emphasis on Modernizr in chapter 2; too much detail on codecs in the video chapter; and an emphasis on geo.js in the geolocation chapter.

I don’t think I’ll refer back to this book in the future, as it really is just an introduction to HTML5 features, and there are lots of places on the web I can find such a list. If you’ve already been introduced to these features, you might be better off finding a more in depth reference on HTML5. I’ll be looking for one myself, after the new year.

And here’s the overview, chapter by chapter:

Chapter 1 has a nice little section on the history of HTML5 and an example of how the img tag made its way in. A story is a nice start to the book.

Chapter 2 contains a brief listing of the new HTML 5 features, with a short description of each, and the way to detect if your browser supports it. There’s too much of an emphasis on the Modernizr library, though it’s certainly nice to learn that it exists. I also found a useful link to Video for Everybody! in the HTML 5 video section, which I’m likely to look into.

Chapter 3 contains a quick look at some changes in HTML 5 from previous versions, and then proceeds to show a list of the new semantic elements. These are all included in a sample web page with an interesting technique to use these today in non-capable browsers via html5shiv:

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • time
  • mark

As someone that uses the keyboard  a lot for navigation, and can imagine how cumbersome it can be to skip over links in screen readers, I found this technique for Skip Navigation particularly interesting:

Chapter 4 is an introduction to the canvas element. This is the browser element that allows you to “draw” on a web page using JavaScript. This is a nice basic description with browser compatibility and a straightforward example that happens to be a simple board game. It makes me want to really dig in. The canvas element has been supported in most browsers for a while now, but not in IE < version 9. But explorercanvas exists to imitate the Canvas in current versions of IE.

Chapter 5 introduces us to the video element, <video />. There is probably more details about audio and video codecs and media container formats than I really need or want to know just now, but the inclusion of this information, is useful for future reference and to get across the idea that in general, video on the web is not simple. The things that struck me are: “There is no single combination of containers and codecs that works in all HTML5 browsers.” and: “To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.” There’s also a nice sampling of video encoding tools, including one for Firefox called Firefogg  which encodes Ogg Video (Theora video + Vorbis audio in Ogg container).

Chapter 6 is a brief description of the geolocation support in HTML5. It doesn’t really go very deep and it references a library, geo.js, that uses gears, but Google is not continuing with Gears:, so I’m not sure how useful this library is.

Chapter 7 presents an overview of Local Storage. It has a nice history overview and some details on how to use it, but it does not go into much depth. There is a nice example of how to save and restore a game’s state though. There is extra stuff on Web SQL Database and IndexedDB, but since this stuff is not production ready, it’s interesting, but not very usable.

Chapter 8 contains a good introduction to offline applications. This seemed like particularly good information with a bunch of gotchas for developing apps that work offline, so I think this chapter was just right. I’m sure once I try to develop an app that works offline, I’ll want to dig in deeper, but it’s a nice start. After all, with mobile apps use on the rise, this could be very important info.

Chapter 9 includes the new list of form elements. First off: Thanks for placeholder text!! I won’t need to write JavaScript to do this anymore. Any input field can now contain placeholder text. There’s also a new autofocus attribute, so sites can specify which form field of which form should get focus when a page is loaded.

The new input types are:

  • email
  • url
  • number (with additional attributes: min, max, & step) – can be represented as a spinner image
  • range (also supports: min, max, & step) – can be represented as a slider image
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local
  • search
  • color (which is not currently supported by any browsers)

If a browser doesn’t support the new type, it will just fall back to type=”text”, meaning sites can use these new types right now. HTML5 does specify browser based validation of these new fields, but only Safari has any support at all for this so far (email, url).

Chapter 10 is microdata: “Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.” This chapter describes HTML5 microdata, and some specific examples of how to markup your markup to use it. The examples use microdata formats from Google available at, including ones for event, person and review. This lets you add semantic meaning to your markup without needing more extensions to HTML. Google uses some microdata in it’s search results pages.

This entry was posted in Book Reviews, Web Development. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s