OReilly cascading style sheets the definitive guide 2nd edition jan 2004 ISBN 0596005253

•
•
•
•
•
•


TableofContents
Index
Reviews
ReaderReviews
Errata
Academic

CascadingStyleSheets,2ndEdition
ByEricMeyer

Publisher :O'Reilly
PubDate :March2004
ISBN :0-596-00525-3
Pages :528
Slots :1.0



CascadingStyleSheets:TheDefinitiveGuide,
2ndEditionisathoroughreviewofall
aspectsofCSS2.1andacomprehensive
guidetoCSSimplementation.Thebook

includesnewcontentonpositioning,listsand
generatedcontent,tablelayout,user
interface,pagedmedia,andmore.It
exploresindetaileachindividualCSS
propertyandhowitinteractswithother


properties,andshowshowtoavoidcommon
mistakesininterpretation.



•
•
•
•
•
•


TableofContents
Index
Reviews
ReaderReviews
Errata
Academic

CascadingStyleSheets,2ndEdition
ByEricMeyer

Publisher :O'Reilly
PubDate :March2004
ISBN :0-596-00525-3
Pages :528
Slots :1.0










Copyright
Dedication
Foreword
Preface
ConventionsUsedinThisBook
PropertyConventions
HowtoContactUs
Acknowledgments


Chapter1.CSSandDocuments
Section1.1.TheWeb'sFallfromGrace

Section1.2.CSStotheRescue

Section1.3.Elements



Section1.5.Summary



Section1.4.BringingCSSandXHTMLTogether

Chapter2.Selectors







Section2.1.BasicRules




Section2.3.ClassandIDSelectors

Section2.5.UsingDocumentStructure



Section2.7.Summary

Section2.2.Grouping
Section2.4.AttributeSelectors
Section2.6.Pseudo-ClassesandPseudo-Elements


Chapter3.StructureandtheCascade
Section3.1.Specificity

Section3.2.Inheritance




Section3.3.TheCascade
Section3.4.Summary


Chapter4.ValuesandUnits
Section4.1.Numbers

Section4.2.Percentages

Section4.3.Color




Section4.5.URLs



Section4.7.Summary

Section4.4.LengthUnits
Section4.6.CSS2Units


Chapter5.Fonts
Section5.1.FontFamilies

Section5.2.FontWeights




Section5.3.FontSize

Section5.5.StretchingandAdjustingFonts




Section5.7.FontMatching

Section5.4.StylesandVariants
Section5.6.ThefontProperty
Section5.8.Summary


Chapter6.TextProperties
Section6.1.IndentationandHorizontalAlignment

Section6.2.VerticalAlignment




Section6.3.WordSpacingandLetterSpacing




Section6.5.TextDecoration



Section6.7.Summary

Section6.4.TextTransformation
Section6.6.TextShadows

Chapter7.BasicVisualFormatting
Section7.1.BasicBoxes






Section7.2.Block-LevelElements




Section7.4.AlteringElementDisplay

Section7.3.InlineElements
Section7.5.Summary


Chapter8.Padding,Borders,andMargins
Section8.1.BasicElementBoxes

Section8.2.Margins

Section8.3.Borders



Section8.5.Summary

Section8.4.Padding


Chapter9.ColorsandBackgrounds
Section9.1.Colors

Section9.2.ForegroundColors




Section9.3.Backgrounds
Section9.4.Summary


Chapter10.FloatingandPositioning
Section10.1.Floating

Section10.2.Positioning

Section10.3.Summary


Chapter11.TableLayout
Section11.1.TableFormatting

Section11.2.TableCellBorders




Section11.3.TableSizing
Section11.4.Summary


Chapter12.ListsandGeneratedContent
Section12.1.Lists

Section12.2.GeneratedContent



Section12.3.Summary


Chapter13.UserInterfaceStyles
Section13.1.SystemFontsandColors

Section13.2.Cursors




Section13.3.Outlines
Section13.4.Summary


Chapter14.Non-ScreenMedia
Section14.1.DesignatingMedium-SpecificStyleSheets

Section14.2.PagedMedia



Section14.3.AuralStyles




Section14.4.Summary


AppendixA.PropertyReference
SectionA.1.VisualMedia

SectionA.2.Tables

SectionA.3.PagedMedia




SectionA.5.VisualStyles



SectionA.7.AuralStyles

SectionA.4.DroppedfromCSS2.1
SectionA.6.PagedMedia


AppendixB.Selector,Pseudo-Class,andPseudo-ElementReference
SectionB.1.Selectors

SectionB.2.Pseudo-ClassesandPseudo-Elements





AppendixC.SampleHTML4StyleSheet
Colophon
Index

Copyright©2004,2000O'ReillyMedia,Inc.
PrintedintheUnitedStatesofAmerica.
PublishedbyO'ReillyMedia,Inc.,1005GravensteinHighway
North,Sebastopol,CA95472.
O'Reilly&Associatesbooksmaybepurchasedforeducational,
business,orsalespromotionaluse.Onlineeditionsarealso
availableformosttitles().Formore
information,contactourcorporate/institutionalsales
department:(800)998-9938or
NutshellHandbook,theNutshellHandbooklogo,andthe
O'ReillylogoareregisteredtrademarksofO'ReillyMedia,Inc.
CascadingStyleSheets:TheDefinitiveGuide,theimageof
salmon,andrelatedtradedressaretrademarksofO'Reilly
Media,Inc.
Manyofthedesignationsusedbymanufacturersandsellersto
distinguishtheirproductsareclaimedastrademarks.Where
thosedesignationsappearinthisbook,andO'ReillyMedia,Inc.
wasawareofatrademarkclaim,thedesignationshavebeen
printedincapsorinitialcaps.
Whileeveryprecautionhasbeentakeninthepreparationofthis
book,thepublisherandauthorsassumenoresponsibilityfor
errorsoromissions,orfordamagesresultingfromtheuseof
theinformationcontainedherein.


Dedication
Inmemoryofmymother,Carol,forallthethingsshe
taughtme.
Andtomydaughter,Carolyn,forallthethingsshehas

yettoteachme.


Foreword
CSSisrealized.CSShasprovenitselfbeyondimagination.
CascadingStyleSheetshaveunquestionablyrevolutionizedthe
Web.WithoutCSS,wewouldmostcertainlybelimitedby
presentation-ladendocuments,tablesforlayout,andimpossibly
messymarkup.
Themovementtowardstandardizingstyles,design,andlayout
isnowfirmlyinplace,andCSSisplayinganenormousrolein
that.CSSgivesusmorecontroloverourlayouts;moreoptions
tomanageandcontrolcolor,images,andtextsizing;and
greaterabilitytomaintainnumerousdocuments,provide
accessibility,andservemultipledevicesmuchmoreeasily.
ArewestillchallengedbybrowserimplementationsofCSS?
Well,sure,andthat'sarealitywehavetoworkwith.Buteven
aswe'reencumberedbythelackofupdatesforMicrosoftIE
6.0,thereareencouragingadvancementsinotherweb
browsers.Safari,Opera,Mozilla,andMozillaFirefoxallstandas
evidencethatamajorityofimplementersareconcernedabout
standardswithinbrowsers.We'refinallyseeingterrificsupport
forCSSemergeinawiderangeofdevelopertoolsincluding
MacromediaDreamweaverMX,AdobeGoLiveCS,andmanyof
thewebloggingtoolsinusearoundtheWebtoday.
ThatthisbookVersion2.0ofEricMeyer'sseminalworkon
CSSshouldgracetheshelvesatsuchatransitionaltimeinthe
Web'sevolutionisextremelyencouraging.CSSismakingitself
feltinalmosteveryspectrumofwebdesign.
Forinspirationandmotivation,designershavetheCSSZen

Garden,amagnificentsitethatdemonstratestheuseof
structuredmarkupwithCSS.Eachdesignerwhosubmitsa
designtotheCSSZenGardenmustusethesamemarkupand
contentbutcreatehisorherownCSSdesign.TheCSSZen


GardenprovesCSSdesignscanbenotonlybeautifulbutalso
moreinnovativeandinterestingthananythingthat'scome
before.
CSSisprovingtobecost-effective,too.Salesandmarketing
folkslookingforproofcanturntoagrowinglistofimpressive
casestudiesthatdrivehomethebottom-linesavingsofmoving
towardwebstandardsandCSS.Eachtimeamajorsitesuchas
ESPN,Sprint,orAOLmakesamovetowardCSSandweb
standards,aleadershipphenomenonbegins;othercompanies
realizetheycansavecostsandimprovequality,too.
AsCSS'valuebecomesmoreapparenttodesigners,important
totheeconomicchoicescompaniesmake,andbetterintegrated
withthetoolsthatdesignersandtechnologistuse,CSSwill
finallyearnthepermanentrecognitionitdeserveswithinthe
technologicalrealm.
AsweimplementCSSfromthegroundup,wefindthatwehave
agreatdealyettolearn.Thoseofuswhohavedevelopedsites
foralongtimemustactuallyunlearnbadhabitsbornof
convention.Asforyoungdesignersanddevelopersenteringthe
fold,weneedtohelpthemavoidourmistakesandencourage
themtowardbetterpractices.Thisbookwillbeagreathelpto
bothaudiences.
AsawebstandardsevangelistandstudentofmarkupandCSS,
it'seasyformetosaythatEricMeyerhaschangedmylife.

Manyreadersofhisfirstedition(and,Ihope,thisbook)will
readilyagree.Aswithsomanyreaders,IuseEric'sbooks,I
followhiswebsite,andIsubscribetoCSS-D,theemaillistthat
Ericchaperonesandoffersdiscussionandsolutionsforlist
membersfacingreal-worldCSSchallenges.Ipayattentionto
Ericandwillcontinuetodosobecauseit'sjustsodamned
nutritious.
BecausetheWebisasmuchofasocialconstructasatechnical
one,designingiteffectivelydemandsthatweseekan


understandingoftheartandscienceofliving,aswellashowto
usestructuredmarkupandCSS.There'snooneI'vemetwho
haseverdemonstratedhowtothink,howtolive,howtodothe
rightthingmoreclearlytomethanEricMeyer.He'sworked
tirelesslyasaCSSevangelistfromhisearlydayswiththeW3C
CSSWorkingGrouptohisgroundbreakingsupportcharts,
books,resources,andtimeatNetscape.Ericcontinuestolead
us,throughhisownwebsiteandconferencesessions,andhe's
morethanjustifiedthevarietyofwittymonikershe'searned,
suchas"ThePopeofCSS."
AspublicapersonasEric'scometobeasmuchofarockstar
withintheWebworldheremainsoneofthemostdown-to-earth
peopleIknow,andatrue-bluefriendtoboot.Ihavegrieved
deeplywithhimfortheprematurelossofhismotherCarol,and
dancedintruejoyinmyofficewhenIreceivedthenewsthat
EricandhiswifeKatbroughttheirdaughterCarolynhomejust
eightmonthslater.
I'mcertainthatafteranyopportunityyouhavetospendtime
withEricwhetherataclass,byvisitinghiswebsiteregularly,or

viathisbookyouwillwalkawaywithmorethanjustagreater
understandingofCSS.Youwilllaugh,youwillbeuplifted,and
youwillultimatelybeinspiredtoputthebestofyourself
forwardinalloflife'ssituations.
MollyE.Holzschlag
Tucson,Arizona2004


Preface
Ifyouareawebdesignerordocumentauthorinterestedin
sophisticatedpagestyling,improvedaccessibility,andsaving
timeandeffort,thisbookisforyou.Allyoureallyneedbefore
startingthebookisadecentknowledgeofHTML4.0.Thebetter
youknowHTML,ofcourse,thebetterpreparedyou'llbe.You
willneedtoknowverylittleelseinordertofollowthisbook.
ThissecondeditionofthebookcoversCSS2andCSS2.1,the
latterofwhichisinmanywaysaclarificationofthefirst.While
someCSS3moduleshavereachedCandidateRecommendation
statusasofthiswriting,Ihavechosennottocovertheminthis
edition.Thiswasdoneinpartbecausethebookseemedlong
enoughwithoutthem,butalsobecauseimplementationof
thesemodulesisstillincomplete.Ifeelit'simportanttokeep
thebookfocusedoncurrentlysupportedandwell-understood
levelsofCSS,andleaveanyfuturecapabilitiesforfuture
editions.
Rememberonethingaboutwebstandardsandbooks:the
formerarecontinuallyevolving,whilethelatterarefrozenin
time(untilthenexteditioncomesout,anyway).Inthecaseof
(X)HTMLandCSS,manychangesareafootevenasthesewords
arebeingwritten.Despitethis,itismyhopethatthissecond

editionwillstayrelevantoveraperiodofseveralyears,asdid
thefirstedition.
Inordertokeepthetextrelevant,aswellastosavespace,I
cutCSSsupportinformationfromthisedition.Suchinformation
ismuchbetterpublishedonline,whereitcanbecorrectedand
updatedwhenevertherearechangesinbrowserCSSsupport.
Committingsuchinformationtopaper,whileusefulinthefirst
edition,nolongermakesagreatdealofsense.Thisisdoubly
truebecauseCSSsupporthasadvancedsofarinthelastfew
yearsthatwhateverbugsremainaredifficulttoexpressina


simplechart.Forexample,asofthiswritingthereisabugin
Safariinwhichapplyingtext-transformthrougha:firstletterruletriggerssomeverystrangebehavior.Thereis,
practicallyspeaking,nogoodwaytorepresentthisinachart,
evenathree-dimensionalarray.Furthermore,thebugis
expectedtobefixedintheverynearfuture,andinfactmay
alreadyhavebeenfixedbythetimethisbookisonshelves.
Therefore,ratherthandoomlargeportionsofthebookto
obsolescencethemomenttheyarepublished,Iinsteaddropped
theinformation.Doingsoactuallyenabledmetokeepthebook
fromgrowingtoomuchwhileaddingagreatdealmore
information.ThesupportinformationIdidpreservewasthat
relatingtobugsandlimitationsintheInternetExplorerline,
whichhasceaseddevelopment.


ConventionsUsedinThisBook
Thefollowingtypographicalconventionsareusedinthisbook:

Italic
Indicatesnewterms,URLs,variablesintext,user-defined
filesanddirectories,commands,fileextensions,filenames,
directoryorfoldernames,andUNCpathnames.

Constantwidth
Indicatescommand-linecomputeroutput,codeexamples,
Registrykeys,andkeyboardaccelerators.

Constantwidthbold
Indicatesuserinputinexamples.

Constantwidthitalic
IndicatesvariablesinexamplesandinRegistrykeys.Itis
alsousedtoindicatevariablesoruser-definedelements
withinitalictext(suchaspathnamesorfilenames).For
instance,inthepath\Windows\username,replace
usernamewithyourname.

Thisiconsignifiesatip,suggestion,orgeneralnote.


Thisiconindicatesawarningorcaution.


PropertyConventions
Throughoutthisbook,thereareboxesthatbreakdownagiven
CSSproperty.Thesehavebeenreproducedpracticallyverbatim
fromtheCSSspecifications,butsomeexplanationofthesyntax
isinorder.

Throughout,theallowedvaluesforeachpropertyarelistedwith
asyntaxlikethefollowing:
Value:[<length>|thick|thin]{1,4}
Value:[<family-name>,]*<family-name>
Value:<url>?<color>[/<color>]?
Value:<url>||<color>
Anywordsbetween"<"and">"giveatypeofvalue,ora
referencetoanotherproperty.Forexample,thepropertyfont
willacceptvaluesthatactuallybelongtothepropertyfontfamily.Thisisdenotedbyusingthetext<font-family>.Any
wordspresentedinconstantwidtharekeywordsthatmust
appearliterally,withoutquotes.Theforwardslash(/)andthe
comma(,)mustalsobeusedliterally.
Severalkeywordsstrungtogethermeansthatallofthemmust
occur,inthegivenorder.Forexample,helpmewouldmean
thatthepropertymustusethosekeywordsinthatexactorder.
Ifaverticalbarseparatesalternatives(X|Y),thenanyoneof
themmustoccur.Averticaldoublebar(X||Y)meansthatX,Y,
orbothmustoccur,buttheymayappearinanyorder.Brackets
([...])areforgroupingthingstogether.Juxtapositionisstronger
thanthedoublebar,andthedoublebarisstrongerthanthe
bar.Thus"VW|X||YZ"isequivalentto"[VW]|[X||[YZ
]]".
Everywordorbracketedgroupmaybefollowedbyoneofthe


followingmodifiers:
Anasterisk(*)indicatesthattheprecedingvalueor
bracketedgroupisrepeatedzeroormoretimes.Thus,
bucket*meansthatthewordbucketcanbeusedany
numberoftimes,includingzero.Thereisnoupperlimit

definedonthenumberoftimesitcanbeused.
Aplus(+)indicatesthattheprecedingvalueorbracketed
groupisrepeatedoneormoretimes.Thus,mop+means
thatthewordmopmustbeusedatleastonce,and
potentiallymanymoretimes.
Aquestionmark(?)indicatesthattheprecedingvalueor
bracketedgroupisoptional.Forexample,[pinetree]?
meansthatthewordspinetreeneednotbeused
(althoughtheymustappearinthatexactorderiftheyare
used).
Apairofnumbersincurlybraces({M,N})indicatesthatthe
precedingvalueorbracketedgroupisrepeatedatleastM
andatmostNtimes.Forexample,ha{1,3}meansthat
therecanbeone,two,orthreeinstancesofthewordha.
Someexamplesfollow:

give||me||liberty
Atleastoneofthethreewordsmustbeused,andtheycan
beusedinanyorder.Forexample,giveliberty,giveme,
libertymegive,andgivemelibertyareallvalid
interpretationsofthisexample.


[I|am]?the||walrus
EitherthewordIorammaybeused,butnotboth,butuse
ofeitherisoptional.Inaddition,eithertheorwalrus,or
both,mustfollowinanyorder.Thus,youcouldconstructI
thewalrus,amwalrusthe,amthe,Iwalrus,walrusthe,
andsoforth.

koo+ka-choo
Oneormoreinstancesofkoomustbefollowedbyka-choo.
Therefore,kookooka-choo,kookookooka-choo,andkoo
ka-chooarealllegal.Thenumberofkoosispotentially
infinite,althoughthereareboundtobeimplementationspecificlimits.

Ireally{1,4}*[love|hate][Microsoft|Netscape|
Opera|Safari]
Theall-purposewebdesigner'sopinion-expresser.Thiscan
beinterpretedasIloveNetscape,Ireallylove
Microsoft,andsimilarexpressions.Anywherefromzeroto
fourreallysmaybeused.Youalsogettopickbetween
loveandhate,eventhoughonlylovewasshowninthis
example.

[[Alpha||Baker||Cray],]{2,3}and]Delphi
Thisisapotentiallylongandcomplicatedexpression.One
possibleresultwouldbeAlpha,Cray,andDelphi.The
commaisplacedbecauseofitspositionwithinthenested
bracketgroups.


HowtoContactUs
WeatO'Reillyhavetestedandverifiedtheinformationinthis
booktothebestofourability,butyoumayfindthatfeatures
havechanged(oreventhatwehavemademistakes!).Please
letusknowaboutanyerrorsyoufind,aswellasyour
suggestionsforfutureeditions,bywritingto:
O'Reilly&Associates,Inc.
1005GravensteinHighwayNorth

Sebastopol,CA95472
(800)998-9938(intheUnitedStatesorCanada)
(707)829-0515(internationalorlocal)
(707)829-0104(fax)
Thereisawebpageforthisbook,whichlistserrata,examples,
oranyadditionalinformation.Youcanaccessthispageat:
/>Tocommentorasktechnicalquestionsaboutthisbook,send
emailto:

Formoreinformationaboutbooks,conferences,Resource
Centers,andtheO'ReillyNetwork,seetheO'Reillywebsiteat:



Acknowledgments
Writingabookisbynomeansasolitaryactivity,exceptmaybe
formywife,whospentmanyaneveningwonderingifI'dever
comedownfrommyoffice.SoI'dliketotakeamomentto
thankthepeoplewhohavebackedmeupduringthelong
processofgettingthisbookontheshelves.
Firstoff,I'dliketothankeveryoneatO'Reillyforstickingwith
methroughallthedelays.Duetooneeventoranother,notto
mentionchangesintheCSSrealmitself,Imanagedtostretch
outtheprocesssofarthatIhadthreeeditorchangesbeforeit
wasallsaidanddoneandoneofthoseeditors,inthestyleof
GroverCleveland,tookontheprojecttwice.Thankyouallfor
yourpatience,understanding,andwillingnesstodowhatwas
bestforthebook.ThanksespeciallytoLorrieLeJeuneandMolly
Wood;andalsotoMarloweShaefferandDavidFutato,who
reallywenttheextramiletomakethingsasrightascouldbe.

I'dalsoliketothankmostprofoundlymytechnicalreviewers,
TantekÇelikandIanHickson.Bothgentlemenlenttheir
considerableexpertiseandinsighttotheproject,keepingme
honestandup-to-dateonthelatestchangesinCSS2.1aswell
astakingmetotaskforsloppydescriptionsandmuddled
explanations.Thebookcouldnothavebeenasgoodasitis
withoutthem,andwhatevererrorsyoufindinthetextaremy
fault,nottheirs.Thishasbecomeatiredcliché,butitissotrue
thatit'salmostimpossibletoavoidsayingit.
Thereareafewpersonalacknowledgmentstomakeaswell.
ToTEDS,thestandardsevangelismteamatNetscape,upuntil
itsdisbandinginJuly2003:wefoughtthegoodfightandmade
adifference,andI'mhonoredtohavebeenapartoftheteam.
Somythanks,respect,andgratitudetoBobClary,MarcioGalli,
KatsuhikoMomoi,ChrisNalls,TristanNitot,ArunRanganathan,


DoronRosenberg,andSusieWyshakcomradesall.
ToDave,thankyouforalltheyearsoflaughterand
conversation,andwe'lldefinitelygettoworkonascriptfor
"CSS:TheMovie"anyyearnow.
ToJeffandCarrie,thanksforbeingfriendsthatImaynot
deserve,butdefinitelyenjoyandamdeeplygratefultohave.
ToGiniandFerrett,whohavetwooftheoddernamesand
biggestheartsofanyoneIknow,thanksforkeepingme(and
Kat)distractedandamusedwhenitwasmostneeded.
ToJimandGenevieve,thanksforallthegreatmeals,great
parties,andgreatconversations.
Tomyfamily,bothimmediateandextended,Icannotexpress
enoughthanksforyourcontinuedloveandsupport.

Andtomywife,Kathryn,whohasneverwaveredinherbeliefin
meandmyabilities,norinherwillingnesstoletmedowhat
needstobedone,Ithankyouwithalltheloveweshare.I
couldn'thavedoneallthiswithoutyoursupport,yourlaugh,
andyourboundlessjoy.
EricA.Meyer,ClevelandHeights,Ohio
23February2004


Chapter1.CSSandDocuments
CascadingStyleSheets(CSS)areapowerfulwaytoaffectthe
presentationofadocumentoracollectionofdocuments.
Obviously,withoutadocumentofsomesort,CSSisbasically
uselesssinceitwouldhavenocontenttopresent.Ofcourse,
thedefinitionof"document"isextremelybroad.Forexample,
MozillaandrelatedbrowsersuseCSStoaffectthepresentation
ofthebrowserchromeitself.Still,withoutthecontentofthe
chromebuttons,addressinputs,dialogboxes,windows,andso
ontherewouldbenoneedforCSS(oranyotherpresentational
information).


1.1TheWeb'sFallfromGrace
Backinthedimlyremembered,earlyyearsoftheWeb(19901993),HTMLwasafairlyleanlanguage.Itwascomposed
almostentirelyofstructuralelementsthatwereusefulfor
describingthingslikeparagraphs,hyperlinks,lists,and
headings.Ithadnothingevenremotelyapproachingtables,
frames,orthecomplexmarkupweassumeisanecessarypart
ofcreatingwebpages.ThegeneralideawasthatHTMLwould
beastructuralmarkuplanguage,usedtodescribethevarious

partsofadocument.Verylittlewassaidabouthowthoseparts
shouldbedisplayed.Thelanguagewasn'tconcernedwith
appearance.Itwasjustacleanlittlemarkupscheme.
ThencameMosaic.
Suddenly,thepoweroftheWorldWideWebwasobviousto
almostanyonewhospentmorethan10minutesplayingwithit.
Jumpingfromonedocumenttoanotherwasnoharderthan
pointingthemousecursorataspeciallycoloredbitoftext,or
evenanimage,andclickingthemousebutton.Evenbetter,text
andimagescouldbedisplayedtogether,andallyouneededto
createapagewasaplain-texteditor.Itwasfree,itwasopen,
anditwascool.
Websitesbegantospringupeverywhere.Therewerepersonal
journals,universitysites,corporatesites,andmore.Asthe
numberofsitesincreased,sodidthedemandfornewHTML
elementsthatwouldeachperformaspecificfunction.Authors
starteddemandingthattheybeabletomaketextboldfaced,or
italicized.
Atthetime,HTMLwasn'tequippedtohandlethosesortsof
desires.Youcoulddeclareabitoftexttobeemphasized,but
thatwasn'tnecessarilythesameasbeingitalicizeditcouldbe
boldfacedinstead,orevennormaltextwithadifferentcolor,


dependingontheuser'sbrowserandherpreferences.There
wasnothingtoensurethatwhattheauthorcreatedwaswhat
thereaderwouldsee.
Asaresultofthesepressures,markupelementslike<B>and
<I>startedtocreepintothelanguage.Suddenly,astructural
languagestartedtobecomepresentational.

1.1.1WhataMess
Yearslater,wehaveinheritedtheproblemsofthishaphazard
process.LargepartsofHTML3.2andHTML4.0,forexample,
weredevotedtopresentationalconsiderations.Theabilityto
colorandsizetextthroughthefontelement,toapply
backgroundcolorsandimagestodocumentsandtables,touse
tableelements(suchascellspacing),andtomaketextblink
onandoffareallthelegacyoftheoriginalcriesfor"more
control!"
Foranexampleofthemessinaction,takeaquickglanceat
almostanycorporatewebsite'smarkup.Thesheeramountof
markupincomparisontoactualusefulinformationis
astonishing.Evenworse,formostsites,themarkupisalmost
entirelymadeupoftablesandfontelements,noneofwhich
conveysanyrealsemanticmeaningtowhat'sbeingpresented.
Fromastructuralstandpoint,thesepagesarelittlebetterthan
randomstringsofletters.
Forexample,let'sassumethatforpagetitles,anauthoris
usingfontelementsinsteadofheadingelementslikeh1:
<fontsize="+3"face="Helvetica"color="red">PageTitle</font>
Structurallyspeaking,thefonttaghasnomeaning.Thismakes
thedocumentfarlessuseful.Whatgoodisafonttagtoa
speech-synthesisbrowser,forexample?Ifanauthoruses


headingelementsinsteadoffontelements,though,the
speakingbrowsercanuseacertainspeakingstyletoreadthe
text.Withthefonttag,thebrowserhasnowaytoknowthat
thetextisanydifferentfromothertext.

Whydoauthorsrunroughshodoverstructureandmeaningthis
way?Becausetheywantreaderstoseethepageasthey
designedit.TousestructuralHTMLmarkupistogiveupalotof
controloverapage'sappearance,anditcertainlydoesn'tallow
forthekindofdenselypackedpagedesignsthathavebecome
sopopularovertheyears.Butconsiderthefollowingproblems
withsucharoughshodapproach:
Unstructuredpagesmakecontentindexinginordinately
difficult.Atrulypowerfulsearchenginewouldallowusersto
searchonlypagetitles,oronlysectionheadingswithin
pages,oronlyparagraphtext,orperhapsonlythose
paragraphsthataremarkedasbeingimportant.Inorderto
accomplishsuchafeat,however,thepagecontentsmustbe
containedwithinsomesortofstructuralmarkupexactlythe
sortofmarkupmostpageslack.Google,forexample,does
payattentiontomarkupstructurewhenindexingpages,so
astructuralpagewillincreaseyourGooglerank.
Lackofstructurereducesaccessibility.Imaginethatyouare
blindandrelyonaspeech-synthesisbrowsertosearchthe
Web.Whichwouldyouprefer:astructuredpagethatlets
yourbrowserreadonlysectionheadingssothatyoucan
choosewhichsectionyou'dliketohearmoreabout;ora
pagethatissolackinginstructurethatyourbrowseris
forcedtoreadtheentirethingwithnoindicationofwhat'sa
heading,what'saparagraph,andwhat'simportant?Let's
returntoGooglethesearchengineisineffecttheworld's
mostactiveblinduser,withmillionsoffriendswhoaccept
itseverysuggestionaboutwheretosurfandshop.