Summary of Contents Preface . xiii 1. What is HTML5? . 1 2. The Anatomy of HTML5 . 7 3. Structuring Documents . 17 4. HTML5 Forms . 33 5. HTML5 Multimedia: Audio and Video . 51 JUMP START HTML5 BASICS BY TIFFANY B. BROWN iv Jump Start HTML5 Basics by Tiffany B. Brown Copyright © 2013 SitePoint Pty. Ltd. Product Manager: Simon Mackie English Editor: Paul Fitzpatrick Technical Editor: Craig Buckler Cover Designer: Alex Walker Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: [email protected] ISBN 978-0-9922794-9-3 (print) ISBN 978-0-9922794-8-6 (ebook) Printed and bound in the United States of America v About Tiffany B. Brown Tiffany B. Brown is a freelance web developer and technical writer based in Los Angeles. She has worked on the web for more than a decade at a mix of media companies and agencies. Before founding her consultancy, Webinista, Inc., she was part of the Opera Software De- veloper Relations & Tools team. Now she offers web development and consulting services to agencies and small design teams. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more. About Jump Start Jump Start books provide you with a rapid and practical introduction to web development languages and technologies. Typically around 150 pages in length, they can be read in a weekend, giving you a solid grounding in the topic and the confidence to experiment on your own. To my husband, Jason Toney, who made it possible for me to write this book by playing the role of a supportive wife. To my sisters by choice: Shoshana and Cheryl. To my unexpected cheerleaders: Divya Manian, Chris Mills, David Storey, and Jen Hanen. To my mom for being mom. And to my late father, who was more of an inspiration than I ever realized. Table of Contents Preface . xiii Who Should Read This Book . xiii Conventions Used . xiii Code Samples . xiii Tips, Notes, and Warnings . xiv Supplementary Materials . xv Tools You’ll Need . xv Do You Want to Keep Learning? . xvi Chapter 1 What is HTML5? . 1 A Brief History of HTML5 . 2 HTML: The Early Years . 2 A Detour Through XHTML Land . 3 The Battle for World DOM-ination . 4 Applets and Plugins . 4 What HTML5 Isn’t . 5 A Note on the HTML5 Specification . 6 Chapter 2 The Anatomy of HTML5 . 7 Your First HTML5 Document . 8 The Two Modes of HTML5 Syntax . 9 HTML Syntax . 10 To Quote or Not Quote: Attributes in HTML5 . 12 A Pared-down HTML5 Document . 12 "XHTML5": HTML5’s XML Syntax . 13 x Chapter 3 Structuring Documents . 17 The article Element . 20 Putting It Together . 23 The section Element . 25 div Versus section . 27 Other Document Elements . 28 figure and figcaption . 28 main Element . 29 Chapter 4 HTML5 Forms . 33 Starting an HTML5 Form . 34 The input Element . 35 Collecting Names . 35 Using Form Labels . 36 Requiring Form Fields . 36 Styling Required Forms . 37 Collecting Email Addresses, Phone Numbers, and URLs . 38 Uploading Files . 42 The datalist Element . 44 Other Input Types . 45 Date and Time Inputs . 49 Chapter 5 HTML5 Multimedia: Audio and Video . 51 Adding Controls . 52 Autoplaying and Looping Media . 53 Video-only Attributes . 54 Place Holding with poster . 54 Controlling Video Dimensions . 55 xi Bandwidth Use and Playback Responsiveness . 55 Cross-browser Audio and Video . 56 Using Multiple Video or Audio Files . 58 Preface HTML (HyperText Markup Language) is the predominant language of web pages. Whenever you read or interact with a page in your browser, chances are it’s an HTML document. Originally developed as a way to describe and share scientific papers, HTML is now used to mark up all sorts of documents and create visual in- terfaces for browser-based software. With HTML5, however, HTML has become as much an of API (Application Pro- cessing Interface) for developing browser-based software as it is a markup language. In this book, we’ll talk about the history of HTML and HTML5 and explore some of its new features. Who Should Read This Book Although this book is meant for HTML5 beginners, its brevity means that it can’t be comprehensive. As a result, we do assume some prior knowledge of HTML. If you are completely new to web development, SitePoint’s Build Your Own Website Using HTML and CSS may be a better book for you. Conventions Used You’ll notice that we’ve used certain typographic and layout styles throughout this book to signify different types of information. Look out for the following items. Code Samples Code in this book will be displayed using a fixed-width font, like so: <h1>A Perfect Summer's Day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p> If the code is to be found in the book’s code archive, the name of the file will appear at the top of the program listing, like this: xiv example.css .footer { background-color: #CCC; border-top: 1px solid #333; } If only part of the file is displayed, this is indicated by the word excerpt: example.css (excerpt) border-top: 1px solid #333; If additional code is to be inserted into an existing example, the new code will be displayed in bold: function animate() { new_variable = "Hello"; } Also, where existing code is required for context, rather than repeat all the code, a ⋮ will be displayed: function animate() { ⋮ return new_variable; } Some lines of code are intended to be entered on one line, but we’ve had to wrap them because of page constraints. A ➥ indicates a line break that exists for formatting purposes only, and should be ignored. URL.open("http://www.sitepoint.com/responsive-web-design-real-user- ➥testing/?responsive1"); Tips, Notes, and Warnings Hey, You! Tips will give you helpful little pointers. xv Ahem, Excuse Me … Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information. Make Sure You Always … … pay attention to these important points. Watch Out! Warnings will highlight any gotchas that are likely to trip you up along the way. Supplementary Materials http://www.sitepoint.com/store/jump-start-html5-basics/ The book’s website, containing links, updates, resources, and more. https://github.com/spbooks/jshtml-basics1 The downloadable code archive for this book. http://www.sitepoint.com/forums/ SitePoint’s forums, for help on any tricky web problems. [email protected] Our email address, should you need to contact us for support, to report a prob- lem, or for any other reason. Tools You’ll Need All you’ll need to develop HTML5 documents is a text editor for writing, and a browser for viewing your work. Don't use word processing software. Those programs are made for writing documents, not for programming. Instead, you’ll need software that can read and write plain text. xvi If you’re a Windows user, try Notepad++1, a free and open-source text editor. Mac OS X users may want to try TextWrangler2 by Bare Bones software. It's free, but not open source. Brackets3 is another option for Windows and Mac users. Linux users can use gEdit, which is bundled with Ubuntu Linux, or try the free and open source Bluefish4. Paid software options are also available, and are sometimes more refined than free and open-source options. You'll also need at least one browser that supports HTML5 in order to make use of the examples in this book. Make sure you’re using the latest version of Google Chrome, Microsoft Internet Explorer, Apple Safari, Opera, or Mozilla Firefox available for your operating system. Internet Explorer and Safari are bundled with Microsoft Windows and Mac OS X, respectively. Other browsers may be downloaded from their company web sites. Do You Want to Keep Learning? You can now get unlimited access to courses and all SitePoint books at Learnable5.