www.it-ebooks.info HTML5 Developer’s Cookbook www.it-ebooks.info Developer’s Library Series Visit developers-library.com for a complete list of available products 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 opensource programming languages and databases, Linux programming, Microsoft, and Java, to Web development, social networking platforms, Mac/iPhone programming, and Android programming www.it-ebooks.info 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 www.it-ebooks.info 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 designations 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 quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests For more information, 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) HTML (Document markup language) Internet programming 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 publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise To obtain permission to use material from this work, please submit a written request to Pearson Education, Inc., Permissions 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 www.it-ebooks.info 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 ❖ To Alex, my grandfather, thank you for sharing your love of life and books —Chuck To Lucy, thanks for being you —Tom ❖ www.it-ebooks.info This page intentionally left blank www.it-ebooks.info Contents at a Glance Introduction xix Acknowledgments xxvii About the Authors xxix New Structural Elements in HTML5 Grouping, Text-Level, and Redefined Semantics 31 Browser Handling in HTML5 55 New Layout and Style Techniques with CSS3 HTML5 Web Forms 95 Drawing with Canvas 127 Embedding Video with HTML5 163 Embedding Audio with HTML5 187 Changing Browser History 207 10 Location Awareness with the Geolocation API 11 Client-Side Storage 259 12 Communication and Threading 297 13 Browser Experience in HTML5 319 14 Working with Local Files 15 Integrating Device Data Recipes Index 69 411 415 www.it-ebooks.info 359 389 231 This page intentionally left blank www.it-ebooks.info Contents Introduction xix Acknowledgments xxvii About the Authors xxix New Structural Elements in HTML5 BEGINNER RECIPE: Building an HTML5 Starter Document 2 doctype Character Encoding JavaScript and CSS Links Syntax Writing Style 3 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 11 INTERMEDIATE RECIPE: Grouping Content with the section Element 12 Which Should You Use: article or section? BEGINNER RECIPE: Creating a Sidebar with the aside Element BEGINNER RECIPE: Using the footer Element 14 15 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 www.it-ebooks.info ... www.it-ebooks.info 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... 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,... browser, and it is all standard www.it-ebooks.info 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 on their