Web Standards Solutions The Markup and Style Handbook Special Edition
Dan Cederholm Web Standards Solutions: The Markup and Style Handbook, Special Edition
Copyright © 2009 by Dan Cederholm All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-1920-0 ISBN-13 (electronic): 978-1-4302-1921-7 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail kn`ano)ju The source code for this book is freely available to readers at sss*bneaj`okba`*_ki in the Downloads section. Credits Lead Editor Associate Production Director Ben Renow-Clarke Kari Brooks-Copony Technical Reviewer Production Editor Matt Heerema Laura Cheu Editorial Board Compositor Clay Andres, Steve Anglin, Mark Beckner, Lynn L’Heureux Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Proofreader Michelle Lowman, Matthew Moodie, Duncan Parkes, Lisa Hamilton Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Indexer Matt Wade, Tom Welsh Broccoli Information Management Project Manager Interior and Cover Designer Richard Dal Porto Kurt Krames Copy Editor Manufacturing Director Liz Welch Tom Debolski CONTENTS AT A GLANCE Foreword ...... xvii About the Author ...... xviii About the Technical Reviewer ...... xix Acknowledgments ...... xx Introduction ...... xxi PART ONE GET DOWN WITH MARKUP ...... 1 Chapter 1 Lists ...... 3 Chapter 2 Headings ...... 17 Chapter 3 Tables are Evil? ...... 29 Chapter 4 Quotations ...... 49 Chapter 5 Forms ...... 61 Chapter 6 , , and Other Phrase Elements ...... 83 Chapter 7 Anchors ...... 103 Chapter 8 More Lists ...... 119 Chapter 9 Minimizing Markup ...... 133 iv PART TWO SIMPLEBITS OF STYLE ...... 147 Chapter 10 Applying CSS ...... 149 Chapter 11 Print Styles ...... 167 Chapter 12 CSS Layouts ...... 179 Chapter 13 Styling Text ...... 207 Chapter 14 Image Replacement ...... 223 Chapter 15 Styling
Chapter 16 Next Steps ...... 255
Index ...... 263
v CONTENTS
Foreword ...... xvii About the Author ...... xviii About the Technical Reviewer ...... xix Acknowledgments ...... xx Introduction ...... xxi
PART ONE GET DOWN WITH MARKUP ...... 1
Chapter 1 Lists ...... 3 Let’s go shopping ...... 4 Quiz time ...... 4 Method A: The
breakdown ...... 4 It’s a wrap ...... 5 Method B: The bullet that bites ...... 6 Validation, please ...... 6 Method C: Getting closer ...... 6 Method D: Wrapper’s delight ...... 8 Summary ...... 8 Extra credit ...... 9 Bite the bullet ...... 9 Getting fancier with custom bullets ...... 10 Lists that navigate ...... 11 Mini-tab shapes ...... 14
Chapter 2 Headings ...... 17 What is the best way to mark up the title of a document? ...... 18 Method A: Meaningful? ...... 18 Method B: The p and b combo ...... 19 Difficult to style ...... 19
vii CONTENTS
Method C: Style and substance ...... 19 Easily styled ...... 19 Default distaste ...... 20 Search engine friendly...... 20 An aside on heading order ...... 21 Summary ...... 21 Extra credit ...... 22 Simple styling ...... 22 Adding backgrounds ...... 23 Backgrounds and borders ...... 24 Tiled backgrounds ...... 24 Swappable icons ...... 25 Easy updates ...... 25 The chameleon effect ...... 26 Aligning the element ...... 26 Wrapping up ...... 27
Chapter 3 Tables are Evil? ...... 29 Totally tabular ...... 30 A table that everyone can sit at ...... 30 Adding a summary ...... 33 The head(s) of the table ...... 33 Header and data relationships ...... 35 Using the abbr attribute ...... 36 ,
, and ...... 37 Are tables evil? ...... 39 Extra credit ...... 39 Creating a grid ...... 39 Collapsing the gaps ...... 40 An IE/Mac note ...... 41 Spaced out ...... 41 Customizing the headers ...... 42 Headers with background images ...... 43 Tiny tile ...... 43 The CSS ...... 43 Assigning icons to IDs ...... 44 The icons ...... 45 The CSS ...... 45 Combining rules for simpler bits ...... 46 More table style examples ...... 47 Wrapping up ...... 47Chapter 4 Quotations ...... 49 Method A: Lacks meaning ...... 50 Method B: A class act? ...... 50 Method C:
is best ...... 51 Using a screwdriver to hammer a nail ...... 51 Summary ...... 52 viii CONTENTSExtra credit ...... 52 A cite for curious eyes ...... 52 Inline quotations ...... 53 No need for marks ...... 53 Nesting inline quotations ...... 54 Styling
...... 54 Background quote marks ...... 54 Three images ...... 55 Tagging the elements ...... 55 Three elements, three backgrounds ...... 55 The results ...... 57 Calling out special words ...... 58 How does it degrade? ...... 59 Wrapping up ...... 59Chapter 5 Forms ...... 61 What are our options when marking up a form? ...... 62 Method A: Using a table ...... 62 Method B: Tableless, but cramped ...... 63 Method C: Simple and more accessible ...... 64 The
Chapter 6 , , and Other Phrase Elements ...... 83 Presentational vs. structural ...... 84 Why are and better than and ? ...... 84 Check in with the experts ...... 84 Method A ...... 85 Method B ...... 85 Bold and beautiful ...... 85
ix CONTENTS
What about ? ...... 85 Method A ...... 85 Method B ...... 86 Emphasis mine ...... 86 Just bold or italic, please ...... 86 Worth its (font- )weight in bold ...... 87 That’s italic! ...... 87 Both bold and italic ...... 87 Generic ...... 88 Emphasis with class ...... 88 Summary ...... 89 Extra credit ...... 89 The phrase elements ...... 89 design ...... 90 The specification ...... 90 A change in style ...... 91 Leveraging the structure ...... 91 and ...... 92 Define once ...... 93 The presentation ...... 93 Compatibility issues ...... 94
...... 94 ...... 95 ...... 95 ...... 95 Microformats ...... 96 New growth ...... 96 A simple explanation ...... 96 An hCard example ...... 97 Code Creator ...... 97 The markup ...... 98 The power of microformats ...... 99 Final phrase ...... 101Chapter 7 Anchors ...... 103 When pointing to a specific portion of a page, what is the best way to mark up an anchor? 104 Method A: An empty name ...... 104 Method B: It’s all in a name ...... 105 Beware of global styling ...... 105 Richer name attribute ...... 106 Method C: Lose the name ...... 106 Two birds with one stone ...... 107 Older browsers and the id attribute ...... 107 Method D: The all-in- one ...... 108 Sharing names ...... 108 Summary ...... 108
x CONTENTS
Extra credit ...... 109 The title attribute ...... 110 Title in action ...... 110 Tooltip titles ...... 110 Titles are spoken ...... 111 Styling links ...... 111 Backgrounds ...... 112 Dotted borders ...... 112 Where you been? ...... 113 Hovering ...... 113 Active state ...... 114 LoVe/HAte your links ...... 114 Fitts’ Law ...... 115 A hack for IE6 ...... 116 Anchors aweigh ...... 117
Chapter 8 More Lists ...... 119 What is the best way to mark up a numbered list of items? ...... 120 Method A: Unordered order ...... 120 The numbers game ...... 121 Rendered bullets ...... 121 Method B: An ordered list ...... 121 Automatic numbering ...... 121 Wrapper’s delight II ...... 122 List types ...... 122 What is the best way to mark up a set of terms and descriptions? ...... 123 Method A ...... 124 Method B ...... 124 Structure leads to style ...... 125 Adding icons ...... 125 Other applications ...... 126 Summary ...... 127 Extra credit ...... 127 Identify the parts ...... 127 Custom numbers ...... 128 Adding the numbers to the CSS ...... 128 The results ...... 130 Wrapping up ...... 130
Chapter 9 Minimizing Markup ...... 133 How can we minimize markup when building sites with web standards? ...... 134 Descendant selectors ...... 134 Method A: Class happy ...... 134 Classified CSS ...... 135
xi CONTENTS
Method B: Natural selection ...... 135 Contextual CSS ...... 136 Not just for sidebars ...... 136 Fewer classes mean easier maintenance ...... 137 The unnecessary
...... 138 Method A:happy ...... 138 Method B: Lose the...... 139 Other examples ...... 139 Summary ...... 140 Extra credit ...... 140 The raw markup ...... 140 Adding style ...... 141 Custom bullets ...... 142 Adding a border ...... 143 Conclusion ...... 145PART TWO SIMPLEBITS OF STYLE ...... 147
Chapter 10 Applying CSS ...... 149 How do I apply CSS to a document? ...... 150 Method A: The