Contents
1 New Structural Elements in HTML5
BEGINNER RECIPE: Building an HTML5 Starter Document
Where Do All the New Elements Come From?
BEGINNER RECIPE: Using the header Element to Create a Site Header
BEGINNER RECIPE: Using the hgroup Element to Group Headings
BEGINNER RECIPE: Creating Navigation with the nav Element
INTERMEDIATE RECIPE: Using the New article Element
INTERMEDIATE RECIPE: Grouping Content with the section Element
Which Should You Use: article or section?
BEGINNER RECIPE: Creating a Sidebar with the aside Element
BEGINNER RECIPE: Using the footer Element
INTERMEDIATE RECIPE: Using the HTML5 Outliner to Ensure the Correct Structure
ADVANCED RECIPE: Using All the New Elements to Build a News Page
ADVANCED RECIPE: Using All the New Elements to Build a Search Results Page
2 Grouping, Text-Level, and Redefined Semantics
BEGINNER RECIPE: Marking Up Figures and Captions with the figure and figcaption Elements
BEGINNER RECIPE: Marking Up the Date and Time with the time Element
BEGINNER RECIPE: Making a Native Toggle Widget with the details Element
BEGINNER RECIPE: Using the address Element for Contact Information
BEGINNER RECIPE: Highlighting Text with the mark Element
BEGINNER RECIPE: Using the s Element to Show Inaccurate or Irrelevant Content
BEGINNER RECIPE: Wrapping Links Around Elements
INTERMEDIATE RECIPE: Adding Semantic Information with Microdata
INTERMEDIATE RECIPE: Using WAI-ARIA with HTML5
ADVANCED RECIPE: Marking Up an Article Page with Comments
BEGINNER RECIPE: Dealing with Internet Explorer
Using JavaScript to Make HTML5 Compatible
BEGINNER RECIPE: Testing for HTML5 Features
INTERMEDIATE RECIPE: Leveraging jQuery to Replace a Calendar
INTERMEDIATE RECIPE: Using Modernizr to Detect Features
Useful HTML5 Verification Sites
4 New Layout and Style Techniques with CSS3
INTERMEDIATE RECIPE: Creating a Responsive Design with CSS3 Media Queries
Targeting the iPhone and Android Devices
BEGINNER RECIPE: Using Custom Fonts with @font-face
File Formats and the Cross-Browser Fix
INTERMEDIATE RECIPE: Making Buttons with CSS Gradients and Multiple Backgrounds
INTERMEDIATE RECIPE: Enhancing a Site with Transformations and Transitions
ADVANCED RECIPE: Creating Animations with CSS
BEGINNER RECIPE: Creating a Form to Collect Contact Information
BEGINNER RECIPE: Creating a Search Form with input type="search"
BEGINNER RECIPE: Creating Calendar and Time Controls
Placing Restrictions on Dates and Times
BEGINNER RECIPE: Creating a Number Picker
BEGINNER RECIPE: Creating a Slider (Without the Need for JavaScript)
BEGINNER RECIPE: Creating a Color Picker
BEGINNER RECIPE: Displaying Results with the output Element
BEGINNER RECIPE: Using Form Placeholder Text
BEGINNER RECIPE: Creating an Autocomplete Feature with list and datalist
BEGINNER RECIPE: Tracking the Completion of a Task with the progress Element
BEGINNER RECIPE: Measuring with the meter Element
BEGINNER RECIPE: Jumping to a form Element When the Page Loads
BEGINNER RECIPE: Allowing Multiple Entries
BEGINNER RECIPE: Basic Validation with the required Attribute
INTERMEDIATE RECIPE: Writing Your Own Validation Rule
BEGINNER RECIPE: Limiting User Input
INTERMEDIATE RECIPE: Customizing and Styling the Form
ADVANCED RECIPE: Putting It All Together to Make a Sign-Up Form
BEGINNER RECIPE: Laying a Grid on the Canvas
BEGINNER RECIPE: Making Simple Shapes and Lines
Drawing and Styling a Rectangle or Square
INTERMEDIATE RECIPE: Drawing Polygons with a Path
INTERMEDIATE RECIPE: Drawing Arcs and Circles
BEGINNER RECIPE: Drawing an Image
INTERMEDIATE RECIPE: Cropping an Image
INTERMEDIATE RECIPE: Animating a Sprite Map
ADVANCED RECIPE: Animating an Image
ADVANCED RECIPE: Animating a Vertical Bar Chart
BEGINNER RECIPE: Including Video with the video Element
Why Should You Care About Codecs?
INTERMEDIATE RECIPE: Enabling Video for All Browsers
Adding Fallback Content for Older Browsers
INTERMEDIATE RECIPE: Creating a Video with Subtitles and Captions
Other Subtitle Styling Options
ADVANCED RECIPE: Making Your Own Custom Controls
BEGINNER RECIPE: Including Audio with the audio Element
INTERMEDIATE RECIPE: Enabling Audio for All Browsers
Adding Fallback Content for Older Browsers
INTERMEDIATE RECIPE: Creating a Beat Mixer
ADVANCED RECIPE: Adding Streaming Radio
BEGINNER RECIPE: Adding to History with pushState
BEGINNER RECIPE: Creating an Image Viewer
INTERMEDIATE RECIPE: Popping State in the Image Viewer
BEGINNER RECIPE: Changing History with replaceState
INTERMEDIATE RECIPE: Changing the Page History
ADVANCED RECIPE: Using Advanced State Data Objects to Pass Information Across Pages
INTERMEDIATE RECIPE: Testing History Security
10 Location Awareness with the Geolocation API
Where in the World: getCurrentPosition
BEGINNER RECIPE: Determining Your Location with a Simple getCurrentPosition
INTERMEDIATE RECIPE: Mapping a Location with getCurrentPosition
INTERMEDIATE RECIPE: Determining Distance with PositionOptions
ADVANCED RECIPE: Following a Moving Location with watchPosition
Keys and Values: sessionStorage and localStorage
BEGINNER RECIPE: Getting and Setting Session Storage
Chrome Developer Tools for Viewing Storage
BEGINNER RECIPE: Styling from Session Storage
INTERMEDIATE RECIPE: Storing Forms with Local Storage
ADVANCED RECIPE: Catching Events in Local Storage
ADVANCED RECIPE: Using a Web Database for a Grocery List
12 Communication and Threading
BEGINNER RECIPE: Talking Through Web Sockets
BEGINNER RECIPE: Creating a Web Worker
INTERMEDIATE RECIPE: Adding Two-Way Communication
ADVANCED RECIPE: Leveraging a Shared Web Worker
13 Browser Experience in HTML5
BEGINNER RECIPE: Dragging and Dropping Across divs
ADVANCED RECIPE: Leveraging Events and dataTransfer
BEGINNER RECIPE: Creating a Manifest File
Updating the Cache via the Manifest
BEGINNER RECIPE: Using Web Pages Offline
BEGINNER RECIPE: Displaying a Simple Notification
ADVANCED RECIPE: Creating a Tweet Notification Page
BEGINNER RECIPE: Getting File Attributes
BEGINNER RECIPE: Processing Multiple Files with Drag and Drop
INTERMEDIATE RECIPE: Previewing Images Through readAsDataURL
ADVANCED RECIPE: Parsing a CSV File with readAsText
File API Extended Specifications
ADVANCED RECIPE: Creating a Local File
BEGINNER RECIPE: Retrieving All Contacts and Mobile Numbers
INTERMEDIATE RECIPE: Capturing Pictures with File Input
Device Orientation and Motion Events