HTML5: the Missing Manual by Matthew Macdonald
Total Page:16
File Type:pdf, Size:1020Kb
HTML5 The book that should have been in the box® Matthew MacDonald Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo HTML5: The Missing Manual by Matthew MacDonald Copyright © 2011 Matthew MacDonald. All rights reserved. Printed in the Unites States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles: http://my.safaribooksonline.com. For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Printing History: August 2011: First Edition. Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc. HTML5: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-30239-9 [M] Table of Contents The Missing Credits .............................. xi Introduction ................................... 1 Part One: Meet the New Language Chapter 1: Introducing HTML5 ....................... 11 The Story of HTML5 ....................................... 11 XHTML 1.0: Getting Strict ................................... 12 XHTML 2: The Unexpected Failure .............................. 12 HTML5: Back From the Dead ................................. 13 HTML: The Living Language ................................. 14 Three Key Principles of HTML5 .................................. 15 1. Don’t Break the Web .................................... 15 2. Pave the Cowpaths..................................... 17 3. Be Practical ......................................... 17 Your First Look at HTML5 Markup ................................ 18 The HTML5 Doctype ..................................... 20 Character Encoding ...................................... 21 The Language ......................................... 21 Adding a Style Sheet ..................................... 22 Adding JavaScript ....................................... 22 The Final Product ....................................... 23 A Closer Look at HTML5 Syntax ................................. 24 The Loosened Rules ..................................... 24 HTML5 Validation ....................................... 25 The Return of XHTML ..................................... 27 iii HTML5’s Element Family ..................................... 29 Added Elements ....................................... 29 Removed Elements ...................................... 30 Adapted Elements ...................................... 30 Tweaked Elements ...................................... 32 Standardized Elements .................................... 33 Using HTML5 Today ........................................ 34 Evaluating Browser Support ................................. 34 Browser Adoption Statistics ................................. 36 Feature Detection with Modernizr .............................. 38 Feature “Filling” with Polyfills ................................ 40 Chapter 2: A New Way to Structure Pages ............... 43 Introducing the Semantic Elements ................................ 44 Retrofitting a Traditional HTML Page ............................... 45 Page Structure the Old Way ................................. 47 Page Structure with HTML5 ................................. 49 Subtitles with <hgroup> ................................... 52 Adding a Figure with <figure> ................................ 53 Adding a Sidebar with <aside> ................................ 56 Browser Compatibility for the Semantic Elements ........................ 57 Designing a Site with the Semantic Elements .......................... 60 Deeper into Headers ..................................... 61 Navigation Links with <nav> ................................. 62 Deeper into Footers ..................................... 67 Deeper into Sections ..................................... 69 The HTML5 Outlining System ................................... 70 How to View an Outline ................................... 70 Basic Outlines ......................................... 71 Sectioning Elements ..................................... 73 Solving an Outline Problem ................................. 76 Chapter 3: Meaningful Markup ...................... 81 The Semantic Elements Revisited ................................. 82 Dates and Times with <time> ................................ 83 JavaScript Calculations with <output> ............................ 84 Highlighted Text with <mark> ................................ 86 Other Standards that Boost Semantics .............................. 87 ARIA (Accessible Rich Internet Applications) ........................ 88 RDFa (Resource Description Framework) .......................... 89 Microformats ......................................... 89 Microdata ........................................... 95 Google Rich Snippets ....................................... 97 Enhanced Search Results ................................... 98 The Recipe Search Engine .................................. 101 iv table of contents Part Two: Creating Modern Web Pages Chapter 4: Web Forms, Refined ...................... 107 Understanding Forms ...................................... 108 Revamping a Traditional HTML Form .............................. 109 Adding Hints with Placeholders ............................... 113 Focus: Starting in the Right Spot ............................... 115 Validation: Stopping Errors .................................... 116 How HTML5 Validation Works ................................ 116 Turning Validation Off .................................... 118 Validation Styling Hooks ................................... 119 Validating with Regular Expressions ............................ 120 Custom Validation ...................................... 121 Browser Support for Validation .............................. 123 New Types of Input ....................................... 125 Email Addresses ...................................... 128 URLs ............................................ 128 Search Boxes ........................................ 128 Telephone Numbers .................................... 129 Numbers .......................................... 129 Sliders ............................................ 130 Dates and Times ....................................... 131 Colors ............................................ 132 New Elements .......................................... 132 Input Suggestions with <datalist> ............................. 133 Progress Bars and Meters ................................. 135 Toolbars and Menus with <command> and <menu> ................... 138 An HTML Editor in a Web Page ................................. 138 Using contentEditable to Edit an Element ......................... 138 Using designMode to Edit a Page .............................. 141 Chapter 5: Audio and Video ........................ 143 Understanding Video Today .................................. 144 Introducing HTML5 Audio and Video .............................. 145 Making Some Noise with <audio> ............................. 145 Getting the Big Picture with <video> ............................ 148 Format Wars and Fallbacks ................................... 149 Meet the Formats ...................................... 150 Browser Support for Media Formats ............................ 152 Multiple Formats: How to Please Every Browser ..................... 154 The <source> Element ................................... 154 The Flash Fallback ..................................... 155 Controlling Your Player with JavaScript ............................. 160 Adding Sound Effects .................................... 160 Creating a Custom Video Player .............................. 163 JavaScript Media Players .................................. 166 Captions and Accessibility ................................. 168 table of contents v Chapter 6: Basic Drawing with the Canvas ............... 171 Getting Started with the Canvas ................................. 172 Straight Lines ......................................... 174 Paths and Shapes ....................................... 177 Curved Lines ......................................... 179 Transforms ......................................... 182 Transparency ........................................ 185 Building a Basic Paint Program ................................. 188 Preparing to Draw ..................................... 189 Drawing on the Canvas ................................... 190 Saving the Picture in the Canvas .............................. 192 Browser Compatibility for the Canvas ............................. 195 Polyfilling the Canvas .................................... 196 The Canvas Fallback and Feature Detection ......................... 197 Chapter 7: Deeper into the Canvas .................... 199 Other Things