HTML5 Cookbook HTML5 Cookbook Christopher Schmitt and Kyle Simpson Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo HTML5 Cookbook by Christopher Schmitt and Kyle Simpson Published by O'Reilly Media, Inc., , , . Printing History: ISBN: 978-1-449-39679-4 1315931630 Table of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix 1. Fundamental Syntax & Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Introduction 1 Specifying the DOCTYPE 1 Problem 1 Solution 1 Discussion 2 See Also 2 Specifying the Character Set 2 Problem 2 Solution 2 Discussion 2 See Also 4 Specifying the Language 4 Problem 4 Solution 4 Discussion 4 See Also 4 Optimizing scripts and links 4 Problem 4 Solution 4 Discussion 5 See Also 5 Adding Document Structure With HTML5’s New Elements 5 Problem 5 Solution 5 Discussion 6 See Also 9 Choosing Between article and section 9 Problem 9 Solution 9 v Discussion 11 See Also 11 Checking Your Document Outline 11 Problem 11 Solution 11 Discussion 11 See Also 14 Modifying the Document Outline 14 Problem 14 Solution 14 Discussion 14 See Also 14 Emphasizing Text 15 Problem 15 Solution 15 Discussion 15 See Also 15 Adding Importance to Text 16 Problem 16 Solution 16 Discussion 16 See Also 16 Highlighting Text for Reference 17 Problem 17 Solution 17 Discussion 17 See Also 17 Marking Up Small Print 17 Problem 17 Solution 18 Discussion 18 See Also 18 Defining Acronyms & Abbreviations 18 Problem 18 Solution 18 Discussion 19 See Also 19 Adding Links to Block-Level Content 19 Problem 19 Solution 19 Discussion 20 See Also 20 Marking Up Figures and Captions 20 vi | Table of Contents Problem 20 Solution 20 Discussion 20 See Also 21 Marking Up Dates and Times 21 Problem 21 Solution 21 Discussion 22 What About Microformats? 22 Publication Dates 23 See Also 23 Setting the Stage for Native Expanding and Collapsing 23 Problem 23 Solution 23 Discussion 24 See Also 24 Controlling the Numbering of Your Lists 25 Problem 25 Solution 25 Discussion 25 See Also 26 Hide Content to Show Later 26 Problem 26 Solution 26 Discussion 26 See Also 27 Making Portions of a Page Editable 27 Problem 27 Solution 27 Discussion 27 See Also 28 Set the Stage for Native Drag and Drop 28 Problem 28 Solution 28 Discussion 28 See Also 29 2. Progressive Markup & Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Introduction 31 Adding More Semantic Meaning 31 Problem 31 Solution 32 Discussion 32 Table of Contents | vii See Also 32 Picking a Markup Style 33 Problem 33 Solution 33 Discussion 33 See Also 34 Understanding Browser Support for HTML5 34 Problem 34 Solution 34 Discussion 35 See Also 35 Making Internet Explorer Recognize HTML5 Elements 35 Problem 35 Solution 35 Discussion 37 See Also 37 Detecting HTML5 Features with JavaScript 38 Problem 38 Solution 38 Discussion 42 See Also 42 Using HTML5 Boilerplate 42 Problem 42 Solution 42 Discussion 44 See Also 45 Validating HTML5 45 Problem 45 Solution 45 Discussion 47 See Also 47 Mapping HTML5 Elements to id and class Names 48 Problem 48 Solution 48 Discussion 50 See Also 51 3. Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Introduction 53 Displaying a Search Input Field 53 Problem 53 Solution 53 Discussion 54 viii | Table of Contents See Also 55 Contact Information Input Fields 55 Problem 55 Solution 55 Discussion 56 See Also 58 Utilizing Date and Time Input Fields 58 Problem 58 Solution 58 Discussion 59 See Also 61 Number Inputs 61 Problem 61 Solution 61 Discussion 62 See Also 63 Selecting From a Range of Numbers 64 Problem 64 Solution 64 Discussion 64 See Also 65 Selecting Colors 65 Problem 65 Solution 65 Discussion 65 See Also 67 Creating an Editable Drop-down 67 Problem 67 Solution 67 Discussion 67 See Also 69 Requiring a Form Field 69 Problem 69 Solution 69 Discussion 70 See Also 71 Auto-focusing a Form Field 71 Problem 71 Solution 71 Discussion 71 See Also 72 Displaying Placeholder Text 72 Problem 72 Table of Contents | ix Solution 72 Discussion 73 See Also 73 Disabling Autocomplete 74 Problem 74 Solution 74 Discussion 74 See Also 75 Restricting Values 75 Problem 75 Solution 75 Discussion 75 See Also 77 Making HTML5 Work in Older Browsers 77 Problem 77 Solution 77 Discussion 80 See Also 80 Validating Form Data in Older Browsers with JavaScript 81 Problem 81 Solution 81 Discussion 82 Example: Sample Form 82 Problem 82 Solution 82 Discussion 83 4. Native Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Introduction 85 Adding HTML5 Audio 85 Problem 85 Solution 85 Discussion 88 See Also 90 Manipulating the Audio Stream 90 Problem 90 Solution 90 Discussion 91 See Also 92 Generating audio Using JavaScript 92 Problem 92 Solution 93 Discussion 93 x | Table of Contents [...]... http://www .oreilly. com/catalog/9781449396794 To comment or ask technical questions about this book, send email to: bookquestions @oreilly. com For more information about our books, courses, conferences, and news, see our website at http://www .oreilly. com Find us on Facebook: http://facebook.com /oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia... What? HTML5 isn't an all or nothing proposition You can pick and choose what works best for you So on HTML5 Elsewhere Feed your HTML5 fix with resources from our partners: Loving HTML5 Semantic Sally Copyright © 2011 HTM5,... has a natural heading See Also HTML5 Doctor has a handy flow chart to help choose the right HTML5 structural elements at http://html5doctor.com/happy-1st-birthday-us/#flowchart Checking Your Document Outline Problem You want to view your document’s content outline Solution Run your page through the HTML5 Outliner tool: http://gsnedders .html5. org/outliner/ Discussion HTML5 has an outline algorithm that... running with HTML5 basics Covering the fundamental recipes, from declaring the DOCTYPE and character set to dealing with ambiguities of the new HTML5 semantics, this chapter helps lay the groundwork for the rest of the book Specifying the DOCTYPE Problem You want to create an HTML5 page Solution Specify the HTML5 DOCTYPE at the very beginning of your page: HTML5, for... "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict With HTML5, the version is dropped from the DOCTYPE This allows HTML5 to be backwards compatible in terms of syntax and, hopefully, makes the transition to HTML5 easier Let’s say you have a site that is valid HTML 4.0, but you want to transition to HTML5 Start with just the DOCTYPE change, and you not only have a valid site, but also a valid HTML5 site Additionally, all browsers... standards mode There are some elements that have changed between HTML4 and HTML5, so some now removed or deprecated parts of your HTML4 document For example, ) might not technically validate as HTML5 See Also The W3C Working Draft discussion on differences between HTML 4 and HTML5 includes DOCTYPE at http://www.w3.org/TR /html5- diff/#doctype Specifying the Character Set Problem You need to define... usually includes the title, author, publisher, and ISBN For example: HTML5 Cookbook by Christopher Schmitt and Kyle Simpson (O’Reilly) Copyright 2011 Christopher Schmitt and Kyle Simpson, 978-1-449-39679-4.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions @oreilly. com xx | Preface How to Contact Us Please address comments... but still validates older documents that do include the attribute See Also The W3C Working Draft discussion on differences between HTML 4 and HTML5 includes changed attributes at http://www.w3.org/TR /html5- diff/#changed-attributes Adding Document Structure With HTML5 s New Elements Problem You want to define your document structure with the new header, footer, nav, aside, section and article elements... DOCTYPE, Now What? Simplified links and scripts HTML5' s more flexible and simplified syntax Block-Level Links With HTML5, as can contain block Looking Back In earlier versions of HTML, you had to Add Structure HTML5 gives us several new elements to add This example utilizes heading... would appear in the document outline is HTML5, for Fun & Profit” from the h1 Even reversing the source order of the two headings still only pulls the highest ranked h1 content into the document outline: Tips, Tricks and Resources HTML5, for Fun & Profit See Also Emily Lewis' in-depth discussion of headings, hgroup and the HTML5 outline at http: //ablognotlimited.com/articles/the-beauty-of-semantic-markup-part-3-headings . HTML5 Cookbook HTML5 Cookbook Christopher Schmitt and Kyle Simpson Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo HTML5 Cookbook by. 34 Understanding Browser Support for HTML5 34 Problem 34 Solution 34 Discussion 35 See Also 35 Making Internet Explorer Recognize HTML5 Elements 35 Problem 35 Solution