HTML Manual of Style This page intentionally left blank HTML Manual of Style A Clear, Concise Reference for Hypertext Markup Language (Including HTML5) Fourth Edition Larry Aronson Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Cape Town • Sydney • Tokyo • Singapore • Mexico City Many of the designations used by manufacturers and sellers to distinguish their Editor-in-Chief products are claimed as trademarks. Where those designations appear in this book, Mark Taub and the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. Acquisitions Editor Trina MacDonald The author 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 Development Editor or omissions. No liability is assumed for incidental or consequential damages in Songlin Qiu connection with or arising out of the use of the information or programs contained Managing Editor herein. Kristy Hart 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 Project Editor covers and content particular to your business, training goals, marketing focus, and Anne Goebel branding interests. For more information, please contact: Copy Editor U.S. Corporate and Government Sales Gayle Johnson 800-382-3419 Indexer [email protected] Erika Millen For sales outside the United States, please contact: Proofreader International Sales Apostrophe Editing Services [email protected] Technical Reviewers Visit us on the Web: informit.com/aw Elliotte Rusty Harold Library of Congress Cataloging-in-Publication Data: Benjamin Schupak Aronson, Larry. Publishing Coordinator HTML manual of style : a clear, concise reference for hypertext markup language Olivia Basegio (including HTML5) / Larry Aronson. p. cm. Interior Designer ISBN 978-0-321-71208-0 (pbk. : alk. paper) Bumpy Design 1. Hypertext systems. 2. HTML (Document markup language) I. Title. Cover Designer QA76.76.H94A7624 2010 Anne Jones 006.7’4--dc22 2010031013 Copyright © 2011 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is pro- tected 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. For information regarding permissions, write to: Pearson Education, Inc. Rights and Contracts Department 501 Boylston Street, Suite 900 Boston, MA 02116 Fax 617-671-3447 ISBN-13: 978-0-321-71208-0 ISBN-10: 0-321-71208-0 Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, IN. This book is dedicated to my wife, Heidi Cohen, a much better writer than I am, who provided encouragement and inspiration throughout the project. It was also written in fond memory of people who were major forces in my life, especially my parents, Manny and Dorothy Aronson, and my friends Andy Cohen, Bobo Lewis, Milan Stitt, and Lynne Thigpen. Contents at a Glance Acknowledgments xii About the Author xiii Preface xiv 1 HTML and the Web 2 2 The HTML Language 24 3 Elements of Style 114 4 Using HTML 180 5 Building Websites 208 A HTML5 Quick Reference 267 B CSS Properties 279 Index 305 Table of Contents Acknowledgments xii About the Author xiii Preface xiv Chapter 1 HTML and the Web 2 HTML: The Language of the Web 3 A Bit of Web History 7 Hypertext Content and Online Media 11 Uniform Resource Locators (URLs) 11 Web Browsers and Servers 12 The Web Bestiary 15 HTML5 and Web Standards 19 Do We All Have to Learn HTML5 Now? 21 Summary 21 Chapter 2 The HTML Language 24 Language Overview 25 Page Structure and the DOM 31 HTML5 Syntax 35 Comments 35 Character Entities 36 Markup Elements 37 HTML5 Semantics 40 HTML Attributes 51 Event Handlers 55 Block Elements 57 Headings 57 Paragraphs, Block Quotes, and Address Blocks 61 Lists 67 Division and Section Elements 73 Tables 77 Links and Anchors 85 Uniform Resource Locators 86 Anchor States 88 Anchor Attributes 89 Inline Images 90 Audio and Video 95 Input Forms 99 The HTML5 Canvas 110 Summary 113 Chapter 3 Elements of Style 114 Cascading Style Sheets 115 CSS Selectors 119 Pseudo-Classes and Pseudo-Elements 124 Typography 128 Font Style 131 Font Weight 131 Font Variant 132 Font Size 132 Font 136 Colors 138 Background Properties 141 Text Properties 144 text-align 144 text-decoration 144 text-indent 146 text-transform 146 line-height 146 Letter and Word Spacing 148 white space 150 vertical-align 150 Box Properties 152 Height and Width 153 Margins and Padding 154 Borders 157 List Styles 161 CSS Positioning 166 Other CSS Properties 171 Display and Visibility 172 Overflow 177 Float and Clear 177 Summary 178 Chapter 4 Using HTML 180 Tools of the Trade 182 Blogging 185 Google Docs 192 eBay Selling 198 Wikipedia 200 HTML Email 203 Summary 207 Chapter 5 Building Websites 208 Development Approaches 209 Content or Service Site? 211 Static or Dynamic Content? 212 Target Audience 212 Money 213 The Future 214 Websites 215 cgi-bin 218 logs 219 public_html 220 Other Website Files 221 Organization and Navigation 224 Files and Directories 224 Page Layout 225 Navigation 228 Imagemaps 235 Toggles and Accordions 237 Tabbed Content Sections 240 Opening New Windows 246 Page Head Information 249 meta Elements 249 link Elements 251 Other Head Elements 254 Search Engine Optimization 256 Avoiding Common Mistakes 261 Designing the Presentation Before the Information Architecture 261 Using Outdated Tools and Construction Methods 262 Not Validating the HTML and CSS 263 Not Testing in Different Browsers 264 Not Putting in Enough Comments 265 Summary 265 Appendix A: HTML5 Quick Reference 267 Root Element 268 Document Head Elements 268 Section Elements 269 Heading Elements 270 Block Elements 270 List Elements 271 Inline Elements 271 Embedded Elements 273 Table Elements 275 Form and Control Elements 276 Legacy Elements 277 Appendix B: CSS Properties 279 Explanation of Values 279 CSS Properties 280 Aural Properties 300 Index 305 Preface What This Book Is About and Why You’ll Find It Useful This book is about using HTML to put your stuff on the Web. HTML (Hyper- Text Markup Language) is the language that tells a web browser what to do with the text, images, and other media—the stuff—you want others to see. There are good ways to use these tools, and there are bad ways. Web brows- ers are smart application programs. They can take badly written HTML and still present a respectable-looking web page. However, there are still very good reasons for learning how to write good markup. This book is about creating web pages that . Are pleasing to look at and fun to play with . Are friendly to search engine robots . Are easy to update and maintain over time The Web can be understood through a number of metaphors that allow us to think of a website as a place within a realm we explore. We even socialize within its “spaces.” But that is just a useful illusion. Under the hood, the Web is not like that at all. Chapter 1 introduces the client/server technology that web authors and developers use to create the illusion. Even if you consider yourself an experienced web user, Chapter 1 is worth skimming. Chapter 2 is all about the elements of HTML, including some of the more interesting HTML5 additions. It has many examples illustrating how to mark up documents semantically so that the resulting web page provides all the right information to readers, both human and robot, and that it is easy to update. Our first obligation in design is to please ourselves. With good document structure, a website can be easily styled in a consistent manner across all pages. Chapter 3 explains, with many examples, how to use Cascading Style Sheet (CSS) statements to apply styling to document elements and create people-pleasing web pages. Chapter 4 is about using HTML as a contributor to other websites that accept marked-up content. Five examples are given: blogging, Google Docs, eBay selling, Wikipedia editing, and HTML email. xiv Despite the many options for putting content online, sometimes your orga- nization’s objectives or your personal goals dictate building and running your own website. Chapter 5 explores many of the issues involved, including website structure, organization and navigation, and search engine optimization. At the end of this book you’ll find quick-reference guides to HTML ele- ments and CSS properties, including the new elements and properties in the HTML5 and CSS3 draft specifications. There is no list of references to resources. The W3C’s website at w3.org and Wikipedia’s articles on HTML and CSS should cover anything from a technical perspective. You know how to search the Web for other guides, tutorials, and examples. Finally, this book is about you, because you are changing from a person who uses the Web for information and services to one who contributes to the Web. People are discovering that the joys of online shopping pale in compari- son to the pleasures of creative collaboration. There is a place on this new Web for your stuff, and this book is about how to create content with style. I hope you will find it useful. What’s Not Covered in This Book and Why Not This book is not intended to be a complete reference guide to HTML5. Such a book would be at least three times larger than this one and would be out of date shortly after publication.