HTML5: The Missing Manual (book cover)

HTML5: The Missing Manual

* The Try-Out Site *

Important Note: This is the list of samples and links from the first edition of the book, published in 2011. For the second edition of the book, visit the more up-to-date page at

Welcome, readers!

Below is a chapter-by-chapter list of all the sample files discussed and demonstrated in the book. Click a link to run one straight from the Web, or download everything as one big ZIP file if you'd prefer to try it out on your own computer.

Examples are, as much as possible, exactly as demonstrated in the book. Most don't use fallbacks for browsers that don't support HTML5. This allows you to see exactly how a given feature works in the browser of your choice. (In fact, although most modern browsers support most of these examples, there is no single browser that can run them all!) In a real application, you'd need to give careful thought to feature detection and polyfilling, as discussed in Chapter 1.

If you're looking for the list of links (web addresses mentioned in the book), you can get that here.

Chapter 1. Introducing HTML5

SuperSimpleHTML5.html The simplest HTML5 page
FeatureDetection.html Uses Modernizr to check for a feature
HTML5Template.html A simple starting point for any HTML5 page
XHTML5Example.xhtml An XHTML5 page (that's served as XML)
XHTML5Example_Invalid.xhtml An invalid XHTML5 page (that's served as XML)

Chapter 2. A New Way to Structure Pages

ApocalypsePage_Original.html The pre-HTML5 version of the single-document page
ApocalypsePage_Revised.html A semantically enhanced HTML5 version of the page
ApocalypseSite.html The HTML5 semantic elements, as applied to the front page of a website
FatFooter.html The semantic elements with a fat footer

Chapter 3. Meaningful Markup

BmiCalculator.html The <output> element in action
Mark.html The <mark> element in action
Microformats.html A Oomph-enhanced page with contact and event microformats
Microdata.html Contact information in microdata format
Microdata_review.html A page with a microdata review

Chapter 4. Web Forms, Refined

ZooKeeperForm_Original.html The pre-HTML5 version of a basic form
ZooKeeperForm_Revised.html A revised version of the form, using HTML5 validation and input types
Datalist.html The <datalist> in action
ProgressAndMeter.html The <progress> and <meter> elements in action
ElementEditing.html An editable element in a page
PageEditing.html An editable page in an <iframe>

Chapter 5. Audio and Video

SimpleAudio.html Playing audio in the browser
SimpleVideo.html Playing video in the browser
VideoWithFlashFallback.html A video page that works in virtually all browsers
SoundEffects.html The ball animation from Chapter 7, with sound effects
UglyPlayer.html Controlling playback with JavaScript

Chapter 6. Basic Drawing with the Canvas

CanvasTemplate.html A blank canvas, ready for drawing
Lines.html Three ways to cap a line
Triangle.html Drawing a triangle
Transparency.html A semi-transparent shape superimposed on a solid shape
Transforms.html Rotating a shape with a transform
Paint.html A basic canvas-powered drawing program

Chapter 7. Deeper Into the Canvas

CroppedPicture.html Painting part of an image
Text.html Drawing text on the canvas
Shadows.html Adding a shadow effect to text, shapes, and images
Pattern.html Filling a shape with a tiled image
Gradients.html Filling shapes with different gradients
PersonalityTest.html A personality test that leads to five scoring charts
InteractiveCircles.html Click to select a circle
InteractiveCircles_WithDrag.html Click and drag circles
Animation.html A bouncing ball animation
Maze.html Guide the face through the maze

Chapter 8. Boosting Styles with CSS3

ApocalypsePage_Revised.html The apocalypse page with embedded fonts and multiple columns
VendorPrefixTest.html Vendor prefixes for radial gradient properties
MediaQueries.html A self-rearranging window with media queries
Transparency.html Semi-transparent colors and layers
RoundedBorders.html Square boxes with shaped corners
BoxBackground.html Multiple background images create a resizable box
Shadows.html Shadowed boxes
Gradients.html Boxes with a gradient fill
TransitionButton.html Hover effects with a transition
ImageGallery.html An image gallery with transitions

Chapter 9. Data Storage

WebStorage.html A demonstration of local storage and session storage
Maze.html The maze game from chapter 7, with the added ability to store your last position
FindAllItems.html Shows all the items in local storage for this website (try this after WebStorage.html)
Open both pages at once. Change local storage in StorageEvents1.html, and get notified in StorageEvents2.html
ReadText.html Read a text file and display its contents
ReadImage.html Read an image file and display it

Chapter 10. Offline Applications

These two pages, and all the resources they use, are cached thanks to personality.appcache

Chapter 11. Communication

WebCalculator.php (source)
This page calls WebCaclulator on the server
ChinaSites.html This page downloads slides from the server
TimeEvents.php (source)
This page receives events from TimeEvents.php

Chapter 12. More Cool JavaScript Tricks

SimpleGeolocation.html Get your geolocation coordinates
GeolocationMap.html You, on a map
PrimeNumberSearch_Blocking.html Search for prime numbers, the old fashioned way
PrimeNumberSearch_WebWorkers.html Search for prime numbers in the background
ChinaSites.html The slideshow page from Chapter 11, with history support

Appendix A. A Very Short Introduction to CSS

ApocalypsePage_Original.html The apocalypse page from Chapter 2

Appendix B. A Very Short Introduction to JavaScript

SimpleJavaScript.html Show a message box
JavaScriptEvents.html Show a message box when the mouse moves over a picture
ManipulateAnElement.html Change a picture when it's clicked