Before we tackle the hands-on stuff, we’ll present you with a little bit of history, along with some compelling reasons to start using HTML5 and CSS3 today. We’ll also look at the current state of affairs in terms of browser support, and argue that a great deal of these new technologies are ready to be used today—so long as they’re used wisely.

In this chapter, we’ll show you some of the new structural and semantic elements that are new in HTML5. We’ll also be introducing The HTML5 Herald, a demo site we’ll be working on throughout the rest of the book. Think divs are boring? So do we. Good thing HTML5 now provides an assortment of options: article, section, nav, footer, aside, and header!

Continuing on from the previous chapter, we turn our attention to the new way in which HTML5 constructs document outlines. Then we look at a plethora of other semantic elements that let you be a little more expressive with your markup.

Some of the most useful and currently applicable features in HTML5 pertain to forms. A number of browsers now support native validation on email types like emails and URLs, and some browsers even support native date pickers, sliders, and spinner boxes. It’s almost enough to make you enjoy coding forms! This chapter covers everything you need to know to be up to speed writing HTML5 forms, and provides scripted fallbacks for older browsers.

HTML5 is often touted as a contender for the online multimedia content crown, long held by Flash. The new audio and video elements are the reason—they provide native, scriptable containers for your media without relying on a third-party plugin like Flash. In this chapter, you’ll learn all the ins and outs of putting these new elements to work.

Now that we’ve covered just about all of HTML5, it’s time to move onto its close relative CSS3. We’ll start our tour of CSS3 by looking at some of the new selectors that let you target elements on the page with unprecedented flexibility. Then we’ll follow up with a look at some new ways of specifying color in CSS3, including transparency. We’ll close the chapter with a few quick wins—cool CSS3 features that can be added to your site with a minimum of work: text shadows, drop shadows, and rounded corners.

When was the last time you worked on a site that didn’t have a gradient or a background image on it? CSS3 provides some overdue support to developers spending far too much time wrangling with Photoshop, trying to create the perfect background gradients and images without breaking the bandwidth bank. Now you can specify linear or radial gradients right in your CSS without images, and you can give an element any number of background images. Time to ditch all those spare divs you’ve been lugging around.

Animation has long been seen as the purview of JavaScript, but CSS3 lets you offload some of the heavy lifting to the browser. Transforms let you rotate, flip, skew, and otherwise throw your elements around. Transitions can add some subtlety to the otherwise jarring all-on or all-off state changes we see on our sites. We wrap up this chapter with a glimpse of the future; while CSS keyframe animations still lack widespread support, we think you’ll agree they’re pretty sweet.

Do you prefer Arial or Verdana? Georgia or Times? How about none of those? In this chapter, we’ll look at how we can move past the “web-safe” fonts of yesteryear and embed any fonts right into our pages for visitors to download along with our stylesheets and images. We’ll also look at a promising new CSS feature that allows us to lay out content across multiple columns without using extra markup or the dreaded float.

The latest generation of browsers come equipped with a wide selection of new standard JavaScript APIs. Many of these are specifically geared towards mobile browsers, but still carry benefits for desktop users. In this chapter, we’ll look at three of the most exciting: Geolocation, Offline Web Apps, and Web Storage. We’ll also touch briefly on some of the APIs that we won’t be covering in detail—either because they’re poorly supported, or have limited use cases—and give you some pointers should you want to investigate further.

We devote the book’s final chapter to, first of all, covering two somewhat competing technologies for drawing and displaying graphics. Canvas is new to HTML5, and provides a pixel surface and a JavaScript API for drawing shapes to it. SVG, on the other hand, has been around for years, but is now achieving very good levels of browser support, so it’s an increasingly viable alternative. Finally, we’ll cover one more new JavaScript API—Drag and Drop—which provides native handling of drag-and-drop interfaces.

A key tool in any HTML5 superhero’s utility belt, Modernizr is a nifty little JavaScript library that detects support for just about every HTML5 and CSS3 feature, allowing you to selectively style your site or apply fallback strategies. We’ve included a quick primer on how to use Modernizr in this appendix, even though Modernizr is used throughout the book. This way, you have a ready reference available in one place, while the other chapters focus on the meat of HTML5 and CSS3.

A separate specification that’s often mentioned in the same breath as HTML5, WAI-ARIA is the latest set of tools to help make sophisticated web applications accessible to users of assistive technology. While a whole book could be devoted to WAI-ARIA, we thought it beneficial to include a quick summary of what it is, as well as some pointers to places where you can learn more.

Microdata is part of the HTML5 specification that deals with annotating markup with machine-readable labels. It’s still somewhat in flux, but we thought it was worthwhile to get you up to speed with a few examples.