HTML5 Developer’s Cookbook

ptg999 ptg999 HTML5 Developer’s Cookbook ptg999 T he Developer’s Library Series from Addison-Wesley provides practicing programmers with unique, high-quality references and tutorials on the latest programming languages and technologies they use in their daily work. All books in the Developer’s Library are written by expert technology practitioners who are exceptionally skilled at organizing and presenting information in a way that’s useful for other programmers. Developer’s Library books cover a wide range of topics, from open- source programming languages and databases, Linux programming, Microsoft, and Java, to Web development, social networking platforms, Mac/iPhone programming, and Android programming. Visit developers-library.com for a complete list of available products Developer’s Library Series ptg999 HTML5 Developer’s Cookbook Chuck Hudson Tom Leadbetter Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Capetown • Sydney • Tokyo • Singapore • Mexico City ptg999 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 the publisher was aware of a trademark claim, the desig- nations have been printed with initial capital letters or in all capitals. The authors and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. The publisher offers excellent discounts on this book when ordered in quan- tity for bulk purchases or special sales, which may include electronic ver- sions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more informa- tion, please contact: U.S. Corporate and Government Sales (800) 382-3419 corpsales@pearsontechgroup.com For sales outside the United States, please contact: International Sales international@pearson.com Visit us on the Web: informit.com/aw Library of Congress Cataloging-in-Publication Data Hudson, Chuck, 1969– HTML5 developer’s cookbook / Chuck Hudson, Tom Leadbetter. p. cm. Includes index. ISBN 978-0-321-76938-1 (pbk. : alk. paper) 1. HTML (Document markup language) 2. Internet programming. 3. Web site development. I. Leadbetter, Tom, 1983– II. Title. QA76.76.H94H836 2012 006.7’4—dc23 2011040007 Copyright © 2012 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the pub- lisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photo- copying, recording, or likewise. To obtain permission to use material from this work, please submit a written request to Pearson Education, Inc., Per- missions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290. ISBN-13: 978-0-321-76938-1 ISBN-10: 0-321-76938-4 Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana. First printing, December 2011 Editor-in-Chief Mark Taub Senior Acquisitions Editor Trina MacDonald Development Editor Michael Thurston Managing Editor John Fuller Project Editor Anna Popick Copy Editor Kim Wimpsett Indexer Jack Lewis Proofreader Lori Newhouse Technical Reviewers Evan Burchard Siddharth Ram Tim Wright Publishing Coordinator Olivia Basegio Cover Designer Gary Adair Compositor Rob Mauhar ptg999 ❖ To Alex, my grandfather, thank you for sharing your love of life and books. —Chuck To L ucy, thank s for being you. —Tom ❖ ptg999 This page intentionally left blank ptg999 Contents at a Glance Introduction xix Acknowledgments xxvii About the Authors xxix 1 New Structural Elements in HTML5 1 2 Grouping, Text-Level, and Redefined Semantics 31 3 Browser Handling in HTML5 55 4 New Layout and Style Techniques with CSS3 69 5 HTML5 Web Forms 95 6 Drawing with Canvas 127 7 Embedding Video with HTML5 163 8 Embedding Audio with HTML5 187 9 Changing Browser History 207 10 Location Awareness with the Geolocation API 231 11 Client-Side Storage 259 12 Communication and Threading 297 13 Browser Experience in HTML5 319 14 Working with Local Files 359 15 Integrating Device Data 389 Recipes 411 Index 415 ptg999 This page intentionally left blank ptg999 Contents Introduction xix Acknowledgments xxvii About the Authors xxix 1 New Structural Elements in HTML5 1 BEGINNER RECIPE: Building an HTML5 Starter Document 2 doctype 2 Character Encoding 2 JavaScript and CSS Links 3 Syntax Writing Style 3 Where Do All the New Elements Come From? 4 BEGINNER RECIPE: Using the header Element to Create a Site Header 5 BEGINNER RECIPE: Using the hgroup Element to Group Headings 7 BEGINNER RECIPE: Creating Navigation with the nav Element 8 INTERMEDIATE RECIPE: Using the New article Element 11 INTERMEDIATE RECIPE: Grouping Content with the section Element 12 Which Should You Use: article or section? 14 BEGINNER RECIPE: Creating a Sidebar with the aside Element 15 BEGINNER RECIPE: Using the footer Element 17 INTERMEDIATE RECIPE: Using the HTML5 Outliner to Ensure the Correct Structure 19 ADVANCED RECIPE: Using All the New Elements to Build a News Page 21 ADVANCED RECIPE: Using All the New Elements to Build a Search Results Page 25 Summary 30 [...]... component in the library of your choice When Will HTML5 Be Ready for Use? HTML5DevelopersCookbook.com By nature, a cookbook of this type is full of code listings that support the recipes Because of how fast the HTML5 technology is being expanded, it is essential that the book have a companion website to keep the material up to date The www.HTML5DevelopersCookbook.com website has been set up for this purpose... that there is a difference And although we do not want to get into a debate over whether HTML5 is a Flash killer (it’s not), the bottom line of HTML5 is that there is now an incredible amount of functionality built directly into the browser, and it is all standard The Cookbook Style Does HTML5 Have a Logo? Yes, HTML5 sure does have a logo In years gone by, web developers and site owners have put icons... not strictly part of the HTML5 specification, geolocation is a cool, new technology being developed at the same time, so it gets talked about in the same breath as HTML5 And yes, we are going to talk about geolocation in this book as well Not everything new in web development is HTML5 CSS3 is not HTML5, but because it is new and very cool, it gets put in the same category as HTML5 CSS is a completely... future of the web ahead of the specifications So, Can I Use HTML5 Now? Yes, you can use HTML5 now! There will not be a time when you have to stop using HTML 4 and start using HTML5 Who knows when the W3C will announce that HTML5 is officially ready; we may all be employing HTML6 features by that point But the browser manufacturers are embracing HTML5 features wholeheartedly and incorporating new features... with HTML5 since early 2009 He blogs about it at HTML5Doctor.com This page intentionally left blank 1 New Structural Elements in HTML5 HTML5 ismorejust aboutnew elements you can useJavaScript APIs and video not interactive voodoo with coolness There are than 20 to author your web pages, adding semantics to deliver more accessible, reusable content In later chapters, you will learn about new HTML5. .. not just the overall page Things like a search form or a table of contents can be included in a header element Here is a basic example: HTML5 Cookbook As the HTML5 specification says, the header element can include navigation aids, so the element in Figure 1.2 could be marked up with a header that includes the... Sites that work now in HTML 4, or XHTML, are expected to work fine in HTML5 Using HTML5 means you can continue to code in the style that you have used previously We will cover this more in Chapter 1, but HTML5 has been written with developers in mind, so you can keep using HTML syntax or XHTML syntax, and browsers will know what to do HTML5 also tells the browsers how it should handle errors caused by... execution and download but also additional resources When Will HTML5 Be Ready for Use? There is the common concern that developers cannot or should not start using HTML5 right now, but that is not the case Do I Have to Wait Until 2022? No, you do not have to wait until 2022! In a 2008 interview, HTML5 editor Ian Hickson gave a timeline that HTML5 would not be ready until 2022 This was blown out of proportion... Information with Microdata INTERMEDIATE RECIPE: Using WAI-ARIA with HTML5 49 ADVANCED RECIPE: Marking Up an Article Page with Comments Summary 54 47 51 Contents 3 Browser Handling in HTML5 55 BEGINNER RECIPE: Dealing with Internet Explorer 55 Using JavaScript to Make HTML5 Compatible Making CSS Compatible Boilerplates 57 BEGINNER RECIPE: Testing for HTML5 Features 57 INTERMEDIATE RECIPE: Leveraging jQuery to... to be very exciting The Principles of HTML5 HTML5 has been created in a way that supports existing content or, in other words, is backward compatible The major concern over the proposed XHTML2 specification was that it would break the majority of websites HTML5 has been built on the foundations of HTML 4, so browsers can continue to support HTML, not just new HTML5 elements but all of the things that . ptg999 ptg999 HTML5 Developer’s Cookbook ptg999 T he Developer’s Library Series from Addison-Wesley provides practicing programmers. Elements in HTML5 1 2 Grouping, Text-Level, and Redefined Semantics 31 3 Browser Handling in HTML5 55 4 New Layout and Style Techniques with CSS3 69 5 HTML5