This book is available now as part of Tuts+ Premium. As a member, you’ll also receive Jeffrey Way’s in-depth video course, HTML5 Fundamentals and 20 top-selling Rockable eBooks! Join Tuts+ Premium for $19/mo.
In Decoding HTML5 , Jeffrey Way dives straight in and delivers something that the every day designer or developer can immediately pick up and understand!
This book focuses less on the politics of HTML5 (though it does touch on this), and more on the ways to immediately integrate HTML5 —and its friends—into your web projects.
If you’re in need of a book that will get you up and running with many of the new tags, form elements, and JavaScript APIs as quickly as possible, then this is the book for you.
Jeffrey Way is one of the most popular web development teachers on the net. He is the editor of Nettuts+, author of two top-selling books, and is the Head of Web Development Courses at Tuts+ Premium.
Join Jeffrey as he jumps in and starts Decoding HTML5 .
Hear From The Author
Hi, I’m Jeffrey, the author of Decoding HTML5 . I’m a web developer who has been diving into the HTML5 spec for years. Toying with new JavaScript APIs is like Christmas for me!
When I set out to write this book, I had one goal in mind: decipher that incredibly confusing spec into something that any John Q. designer or developer can understand. It’s what I wish I had in the beginning.
Have you ever found yourself thinking, “I wish there was somebody who could sit next to me and make me understand this code…because I don’t!” I’ve been in that position countless times.
Well, if you can relate, I think this book just might do the trick. Rather than using high level jargon that no beginner could possibly understand, I’ve done my best to break these complicated concepts into chunks that everyone can grasp.
What The Book Covers
The History of HTML5
Learn how HTML5 came to be…HTML5! You’ll learn about the politics and history, as well as the difference between all of those confusing acronyms, like W3C , WHAT WG, and HTML WG .
The State of HTML5
You’ve likely heard various reports that HTML5 won’t be “ready” until 2022. This couldn’t be further from the truth. In fact, HTML5 is ready to use…right now!
Semantic Markup
Before we can learn about the semantic new tags that are available, we must first learn what to remove, and how to ensure that Internet Explorer 8 and below still get to play with the cool kids. Once we’ve stripped all unnecessary content and attributes, we can shift our focus to the new elements.
Easy Queries with the Selectors API
The Selectors API introduces two new ways to query the DOM . Now we can use the CSS selectors that we’re already familiar with to dive into the DOM . JavaScript library users will feel right at home!
Custom Data Attributes
In the past, we often resorted to random element attributes for the purposes of containing, or storing data. It wouldn’t be uncommon to “communicate” with a script, via a class attribute. A smarter solution is to take advantage of HTML5 custom attributes.
Fun Fun Forms
Perhaps a bit ironically titled, this chapter will focus on all of the new HTML5 elements and attributes that are available to us. I know, I know; forms are boring. Luckily, HTML5 makes them — not fun — but less boring! If you’ve ever found yourself setting default placeholder text, performing client-side validation, or using date picker plugins, you’ve no doubt had first-hand experience with the limitations of the browser. Though it’s taking a bit longer than we might hope, browsers are beginning to come around, with Opera and Webkit leading the pack.
The Essentials of Feature Detection
While ultimately I will recommend that you use a tool called Modernizr to perform feature tests, it’s certainly important to understand how it’s done manually. Abstractions are fantastic — just as long as you have a modest idea what’s going on behind the scenes. This chapter details the essentials of manually performing feature detection.
Automated Detection With Modernizr
Performing feature detection manually isn’t always a walk in the park. Once you factor in all browsers, both desktop and mobile based, you end up with a host of false positives and bugs. Modernizr’s entire reason for existing is to take care of this tedious work for you! This chapter outlines the essentials of working with the library.
Finally… Native Media
Native media is easily one of the most flashy and press-worthy new additions to HTML . We now have the ability to provide native audio and video playback in the browser. No longer must we rely on buggy, browser-crashing third party tools, like Flash. Right? Well, sort of, but I’m getting ahead of myself.
Track That Sucka with Geolocation
Sometimes, when we read the acronym, “API,” we immediately assume a certain level of complexity. But luckily, HTML5 geolocation is incredibly simple. Don’t believe me? It only takes a few lines of code to get started. Ironically, the bulk of your time will be spent focusing less on geolocation and more on third party tools such as the Google Maps API .
The Basics of Working with Canvas
Canvas is an incredibly powerful new 2D drawing tool in HTML5 that will very likely revolutionize the landscape of web applications in the future. While a true review of the API requires an entire book, this chapter will detail the essentials.
Don’t Irritate Visitors – Use Web Storage
You’ll be happy to hear that local storage is incredibly easy to understand. It allows us to store key-value pairs for future use. Unlikes sessions or cookies, local storage is considered by the browser to be long term. It’s as plain and simple as that. By implementing this natively in the browser, we now have access to an easy-to-use, standardized API . I’ll show you exactly how to work with it in this chapter.
The History API
One of the earliest criticisms of AJAX was that it made it difficult to save state. For example, if we asynchronously pull in some set of data when a link is clicked, the user will not have the ability to link specifically to that state of the page. This has long since been fixed by clever developers, however, now, with the updated HTML5 History API , we can rely on a native solution to remedy this issue — at least within the browsers which support it.
The File & Drag and Drop APIs
Before HTML5 , we had no standardized way to work with a user’s local file system. Thankfully, that’s no longer the case. We now have the ability to read, validate, and modify a file’s contents—just as long as the user takes an active role in the process. This chapter will outline the process of working with both the File and the Drag and Drop APIs.
Web Workers are Ants
What I mean by this is that you can think of web workers in the same way that you think of ants. Still confused? That’s okay; it’ll all make sense by the end of this chapter.
Tools, Folks, and Blogs
More important than every HTML5 book ever written is the people and tools that push it forward. Consider this to be the obligatory round-up chapter.