industryveteran.AfteranearlystintatCERFnetinthe early‘90s,hefoundedPowellInternetConsulting(later renamedPINT)in1994,aWebdesignandconsultingservices firm.Today,PINT(pint.com)providesWebdevelopment, design,andconsultingservicestolargeandsmallcorporations allovertheUnitedStatesinavarietyofindustries.
BeyondhisinvolvementatPINT,Thomasisheavily involvedintheacademiccommunity.Hedevelopedthe UniversityofCalifornia,SanDiegoExtensionWebPublishing programinthelate1990sandcontinuestoteachclassesthere inWebdevelopmentanddesign.Heisalsoaninstructorfor theUCSDComputerScienceDepartment,whereheteaches classesinWebdevelopmentandthetheoryofprogramming languages.
Mr.Powelliswellpublished,andhisworkhasappeared innumeroustradepublications.Hecontinuestopublish regularlyinNetworkWorld.Healsohaspublishednumerous booksonWebtechnologyanddesign,includingAjax:The CompleteReference,JavaScript:TheCompleteReference,and manyothers.Hisbookshavebeentranslatedintoover 12languagesandareusedaroundtheworldbothinindustry andcollegesettings.
About the Technical Editor
JamesH.(Jim)Penceisafull-timewriter,editor,speaker, singer,andperformancechalkartist.Jimbrokeintobook publishingin2001withHowtoDoEverythingwithHTML, ahow-tobookonWebauthoring,written“byanontechiefor nontechies,”andpublishedbyMcGraw-HillProfessional.He followedthisbookthesameyearwithanotherbookfor McGraw-Hill:CascadingStyleSheets:ABeginner’sGuide. McGraw-HillpublishedasecondeditionofJim’sHTML book,re-titledHowtoDoEverythingwithHTML&XHTML, in2003.
The Complete Reference,
Fifth Edition
ThomasA.Powell
ISBN: 978-0-07-174170-5
MHID: 0-07-174170-4
The material in this eBook also appears in the print version of this title: ISBN: 978-0-07-149629-2, MHID: 0-07-149629-7.
All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked name, we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark. Where such designations appear in this book, they have been printed with initial caps.
McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate training programs. To contact a representative please e-mail us at [email protected].
Information has been obtained by McGraw-Hill from sources believed to be reliable. However, because of the possibility of human or mechanical error by our sources, McGraw-Hill, or others, McGraw-Hill does not guarantee the accuracy, adequacy, or completeness of any information and is not responsible for any errors or omissions or the results obtained from the use of such information.
TERMS OF USE
This is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGraw-Hill”) and its licensors reserve all rights in and to the work. Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail to comply with these terms.
Part I
Core Markup
1 TraditionalHTMLandXHTML .................................... 3 2 IntroducingHTML5 .............................................. 55 3 HTMLandXHTMLElementReference ............................. 133
Part II
Core Style
4 IntroductiontoCSS .............................................. 429 5 CSSSyntaxandPropertyReference ................................ 521 6 CSS3ProprietaryandEmergingFeaturesReference .................. 613
Part III
Appendixes
A CharacterEntities ................................................ 727 B Fonts ............................................................ 751 C Colors ........................................................... 765 D URLs ............................................................ 783 E ReadingaDocumentTypeDefinition .............................. 801
Index ........................................................... 809
Acknowledgments ................................................ xxi Introduction ..................................................... xxiii
Part I
Core Markup
1 TraditionalHTMLandXHTML .................................... 3
FirstLookatHTMLandXHTML ................................... 3 HelloHTMLandXHTMLWorld .................................... 6 ViewingMarkupLocally ..................................... 8 ViewingMarkupwithaWebServer ........................... 10 HTMLandXHTML:VersionHistory ................................ 14 HTMLandXHTMLDTDs:TheSpecificationsUpClose ................ 16 DocumentTypeStatementsandLanguageVersions ............. 18 (X)HTMLDocumentStructure ...................................... 20 TheDocumentHead ........................................ 23 TheDocumentBody ........................................ 28 Browsersand(X)HTML ............................................ 31 Validation .................................................. 37 TheDoctypeSwitchandBrowserRenderingModes ............. 39 TheRulesof(X)HTML ............................................. 41 HTMLIsNotCaseSensitive,XHTMLIs ....................... 41 AttributeValuesMayBeCaseSensitive ........................ 42 (X)HTMLIsSensitivetoaSingleWhitespaceCharacter .......... 42 (X)HTMLFollowsaContentModel ........................... 43 ElementsShouldHaveCloseTagsUnlessEmpty ................ 43 UnusedElementsMayMinimize .............................. 43 ElementsShouldNest ....................................... 43 AttributesShouldBeQuoted ................................. 44 EntitiesShouldBeUsedforSpecialCharacters .................. 44 BrowsersIgnoreUnknownAttributesandElements ............. 44 MajorThemesof(X)HTML ......................................... 45 LogicalandPhysicalMarkup ................................. 45 Standardsvs.Practice ....................................... 46 MythsandMisconceptionsAboutHTMLandXHTML ........... 47 TheFutureofMarkup—TwoPaths? ................................. 49 XHTML:WebPageMarkupXMLStyle ........................ 49 HTML5:BacktotheFuture ................................... 52 Summary ........................................................ 53
2 IntroducingHTML5 .............................................. 55
HelloHTML5 .................................................... 55 LooseSyntaxReturns .............................................. 58 XHTML5 ........................................................ 60
3 HTMLandXHTMLElementReference ............................. 133
<address> (Address) ....................................... 168 <applet> (JavaApplet) ..................................... 169 <area> (ImageMapArea) .................................. 171 <article> (Article) ......................................... 175 <aside> (Aside) ........................................... 176 <audio> (Audio) .......................................... 177 <b> (Bold) ................................................ 179 <base> (BaseURL) ........................................ 181 <basefont> (BaseFont) ..................................... 182 <bdo> (BidirectionalOverride) .............................. 183 <bgsound> (BackgroundSound) ............................ 185 <big> (BigFont) ........................................... 186 <blink> (BlinkingText) ..................................... 187 <blockquote> (BlockQuote) ................................ 188 <body> (DocumentBody) .................................. 190 <br> (LineBreak) .......................................... 193 <button> (FormButton) .................................... 195 <canvas> (CanvasforDrawing) ............................. 198 <caption> (TableCaption) .................................. 208 <center> (CenterAlignment) ................................ 210 <cite> (Citation) ........................................... 211 <code> (CodeListing) ..................................... 213 <col> (TableColumn) ...................................... 214 <colgroup> (TableColumnGroup) .......................... 216 <command> (Command) ................................... 219 <comment> (CommentInformation) ......................... 220 <datalist> (ListofPrefillData) .............................. 220 <dd> (DefinitionDescriptioninaDefinitionList
orContentinDetailsorFigure) ............................. 222 <del> (DeletedText) ....................................... 224 <details> (AdditionalDetails) ............................... 227 <dfn> (Definition) ......................................... 228 <dir> (DirectoryList) ...................................... 230 <div> (Division) .......................................... 231 <dl> (DefinitionList) ...................................... 233 <dt> (TerminaDefinitionListor
<spacer> (ExtraSpace) ..................................... 373 <span> (TextSpan) ........................................ 374 <strike> (StrikeoutText) .................................... 376 <strong> (StrongEmphasis) ................................ 377 <style> (StyleInformation) ................................. 379 <sub> (Subscript) ......................................... 381 <sup> (Superscript) ........................................ 383 <table> (Table) ............................................ 385 <tbody> (TableBody) ...................................... 389 <td> (TableData) .......................................... 392 <textarea> (MultilineTextInput) ............................ 396 <tfoot> (TableFooter) ...................................... 399 <th> (TableHeader) ....................................... 402 <thead> (TableHeader) .................................... 405 <time> (Time) ............................................. 408 <title> (DocumentTitle) .................................... 410 <tr> (TableRow) .......................................... 411 <tt> (TeletypeText) ........................................ 414 <u> (Underline) ........................................... 415 <ul> (UnorderedList) ...................................... 417 <var> (Variable) ........................................... 419 <video> (Video) ........................................... 421 <wbr> (WordBreak) ....................................... 423 <xml> (XMLDataIsland) ................................... 424 <xmp> (Example) ......................................... 425
Part II
Core Style
4 IntroductiontoCSS .............................................. 429
DocumentStructureandCSSInheritance ............................ 468 !importantOverride ......................................... 470 Selectors ......................................................... 470 ElementSelectors ........................................... 471 idSelectors ................................................. 471 classRules ................................................. 473 ContextualSelection ......................................... 476 AttributeSelectors .......................................... 479 Pseudo-ElementSelectors .................................... 484 Pseudo-ClassSelectors ...................................... 487 CSSPropertiesPreview ............................................ 500 MeasurementsandValues ......................................... 502 CSSand(X)HTMLElementsFundamentals .......................... 506 PhysicalMarkupandOverridingExpectedResults .............. 506 Are<div>and<span>theMostPopularTags? ................. 507 ChangingElementTypeswithdisplay ......................... 508 ControllingWhiteSpace ..................................... 512 MajorThemesofCSS .............................................. 513 SeparationofStructureandStyle .............................. 514 CSS:MoreAppropriateandPowerfulforPresentation ........... 516 Cross-BrowserCSSMadness ................................. 517 MythsandMisconceptionsRelatedtoCSS ..................... 517 Summary ........................................................ 519
5 CSSSyntaxandPropertyReference ................................ 521
margin .................................................... 581 margin-bottom ............................................. 582 margin-left ................................................. 582 margin-right ............................................... 583 margin-top ................................................. 583 max-height ................................................. 584 max-width ................................................. 584 min-height ................................................. 585 min-width ................................................. 585 orphans ................................................... 586 outline .................................................... 586 outline-color ............................................... 588 outline-style ................................................ 589 outline-width ............................................... 590 overflow ................................................... 590 padding ................................................... 591 padding-bottom ............................................ 593 padding-left ................................................ 593 padding-right .............................................. 594 padding-top ................................................ 594 page-break-after ............................................ 595 page-break-before ........................................... 595 page-break-inside ........................................... 596 position ................................................... 596 quotes ..................................................... 597 right ...................................................... 598 table-layout ................................................ 598 text-align .................................................. 599 text-decoration ............................................. 599 text-indent ................................................. 600 text-transform .............................................. 600 top ........................................................ 601 unicode-bidi ............................................... 602 vertical-align ............................................... 602 visibility ................................................... 603 white-space ................................................ 604 widows .................................................... 604 width ..................................................... 605 word-spacing ............................................... 606 z-index .................................................... 607 CSS2andCSS2.1AuralStyleProperties ............................. 607
6 CSS3ProprietaryandEmergingFeaturesReference .................. 613
transform-origin ............................................ 715 transform-style ............................................. 716 transition .................................................. 717 transition-delay ............................................. 717 transition-duration .......................................... 718 transition-property .......................................... 719 transition-timing-function .................................... 719 user-select ................................................. 720 word-break ................................................ 721 word-wrap ................................................. 722 writing-mode .............................................. 722 zoom ...................................................... 724
Part III
Appendixes
A CharacterEntities ................................................ 727
EncodingQuirksandConsiderations .......................... 728 TraditionalHTMLEntities ......................................... 731 HTML4.xandXHTML1.xCharacterEntities ......................... 740 LatinExtended-A ........................................... 741 LatinExtended-B ........................................... 741 SpacingModifierLetters ..................................... 741 GeneralPunctuation ........................................ 741 Greek ..................................................... 743 Letter-likeSymbols .......................................... 744 Arrows .................................................... 745 MathematicalOperators ..................................... 746 TechnicalSymbols .......................................... 747 GeometricShapes ........................................... 748 MiscellaneousSymbols ...................................... 748 EmbracingUnicode ............................................... 748
B Fonts ............................................................ 751
SpecifyingFonts .................................................. 751 FontsforWindowsPlatformandBrowsers ..................... 752 FontsforMacintoshSystemandBrowsers ...................... 755 PCMacFontSimilarity ...................................... 757 DownloadableFonts .............................................. 760 Microsoft’sDynamicFonts ................................... 760 StandardDownloadableFonts ................................ 761 Cross-BrowserDownloadableFonts ........................... 761 FontReplacementwithImages ..................................... 763 sIFRandOtherTextReplacementTechniques ......................... 764
C Colors ........................................................... 765
CSSColorValues ................................................. 773 CSSColor-RelatedProperties ................................. 776 Browser-SafeColors ............................................... 779
D URLs ............................................................ 783
BasicConcepts ................................................... 783 ServerAddress ............................................. 784 Directory .................................................. 786 Filename ................................................... 787 FragmentIdentifier ......................................... 788 Protocol ................................................... 788 OtherFeaturesofURLs ...................................... 789 DataURIs ........................................................ 791 OtherEmergingURLForms ........................................ 794 RelativeURLs .................................................... 795 Usingthe<base>Tag ........................................ 795 URLChallenges .................................................. 796 UnclearCaseSensitivity ..................................... 797 UnclearLengthLimits ....................................... 797 PersistenceConcerns ........................................ 797 Long,DirtyURLs ........................................... 797 Short,CrypticURLs ......................................... 797 Location,NotMeaning ...................................... 798 BeyondURLs .................................................... 798 NewAddressingSchemes:URNs,URCs,andURIs .............. 798
E ReadingaDocumentTypeDefinition .............................. 801
ElementTypeDeclarations ......................................... 801 OccurrenceIndicators ............................................. 802 LogicalConnectors ................................................ 803 SGMLContentExclusionandInclusion .............................. 804 AttributeDeclarations ............................................. 804 SGMLandXMLKeywords ......................................... 805 ParameterEntities ................................................ 806 Comments ....................................................... 806 TheDTDs ........................................................ 807
T
hefiftheditionofthisbookmightaswellbethefirsteditionofabrand-newbook. TheHTML5specificationmarksareturntopastideasandanexplosionoffuture ideas.Ittookagreatdealofworktoputthisneweditiontogether.Giventheamount ofeffortrequired,Iwanttomakesurethatallthosethathelpedaregiventheirdue.First,I wanttoacknowledgethenumerousfixesandimprovementsthatcamefromthefeedback frombothmystudentsatUCSDandreadersaroundtheworld.Iwritethesebooksforyou, andIamgladyouareputtingthisinformationtogooduse.IwouldalsoliketoshowmyappreciationtothemanystaffmembersatPINTwho helpedonthisbookprojectinsomedirectorindirectway.Ican’tspecificallythankand mentionthedozensofemployeeswehaveatPINTandmyotherfirmPort80Softwarewho keepthelightson,butI’llcallafewoutwhowarrantsomeextrakudos.
ChristieSorensononceagainhelpedthistimewithheavyliftingparticularlyintheCSS effort,andIcansafelysaythatshehaslearned,relearned,andevenforgottenmoreabout WebdevelopmentthanprobablyanyoneIknow,besidesmaybemyself.Lookingforwardto moreprojectfuninthefuture,Christie!
PlentyofotherPINTstershelped.RobMcFarlane,AndrewSimpkins,andBryanSleiter helpedoutwithimagery.Theprojectmanagers,particularlyMineOkano,RobinNobel, MattPlotner,andOliviaChen,gavememoralsupportandoccasionalpityasItoiledaway upstairs.GlennDawsonaddressedmymanyserverchangesandhelpeddebugsome annoyingaspectsofHTML5.DanWhitworthassistedonafewchaptershereandthereand probablyhadnightmaresaboutgettingacalltoreallydivein.
JoeLimalistenedtosomeofmyverbalnonsenseandhelpedguidemetosomedeeper insightsthanIcouldhaveeverarrivedatonmyown.
DaisyBhonslekeptupaverylong-standingproofingrelationship,andIamveryglad shealwayshelpsout.Thestudentcertainlyhasbecomethemaster.
ThefolksatMcGraw-HillProfessionalarealwaysapleasuretoworkwith.Meghan Rileyhelpedguidemealong,andMeggMorindidn’tlosefaith,atleastnotcompletely. Thanksforbeingmypatronthelastdecade,Megg!
Mytechnicaleditor,JamesPence,probablywonderedwhenthisprojectwasgoingto finish,andsomehowhefinishedanontechnicalbookofhisownduringtheproject.
Finally,tomyfriendsandfamilywhotriedtogivemespacetowritethisthing,you deservethebiggestthanks.Mychildren,Graham,Olivia,andDesmond,hadtoputup withagrouchydadandfartoomanyabsentweekends,sowenowreturnyoutoour regularlyscheduledweekends!Cecilia,youprovidedalotofhelpaswellthatmade thingsabiteasieronallofus,sothankyouforthat.Finally,Sylvia,youalwayssupport myonlineefforts,ashardastheymaybe.Iknowyou,morethananyone,appreciatethe importanceofthisproject,consideringtheroleHTMLhasplayedinourlives.
Introduction
T
hefiftheditionofthisbookrepresentsasignificantchangeinstructureandcontenttoaddressHTML5.Thebookissimilartothepreviouseditioninmaybeathirdofthe content;otherwise,itisanall-neweffort.Mostobviously,ascomparedtotheprevious editions,whichfocusedmainlyonXHTMLandHTML4,thiseditionfocusesonHTML5, whichrepresentsbothareturntothemarkuppastandtheunveilingofanexcitingfutureof Webapplications.However,wedoretainsomeinformationfrompreviouseditionsbecause inorderforthisworktobetrulycomplete,wemustnotfocusonlyonthefuturebutalso presentalltheelementssupportedinbrowserstoday,includingthearchaic,proprietary,and standard(X)HTMLtags.Thesewillstillbeencounteredforyearstocome,andwewantthis booktoprovidethereferenceyouneedinaddressingtheirsyntax.
CSScoveragehasbeenexpandedgreatlytofullycoverCSS2.1aswellaseveryproprietary andemergingCSS3propertysupportedinoneormorepopularshippingbrowserscirca2009. Novaluejudgmentismade;ifInternetExplorerhassupportedaproprietaryCSSfeaturefor thelastdecade,it’sincluded.However,wedoavoidpresentingCSSfeaturesthataretruly speculativeingreatdepth,butwhereappropriate,wesummarizeorpresentpointerstothe emergingsyntax.
TheramificationoftheincreasedmarkupandCSScoverageissimplythebookdoesn’t havespacelefttodoeverythingitdidbefore.TeachingnearlyeverythingaboutHTMLand CSSinproseformandthenpresentingacompletesyntaxreferenceforthetechnologies wouldhaveproducedabookwellover2,000pages.Wewerewellonthewaytothatwhen weadjustedoureffortstocreatewhatyouhaveinyourhands,asolidreferencebookthat maybeusedforyearstocome.Thisisn’ttosaythatlearningmaterialisnotpresentatall. ThereareverysolidintroductorychaptersforthemarkupandCSSsections,whichshould succinctlyaddressdetailsandstandardsissues.Therejustisn’tastep-by-stepcookbookfor eachelementorproperty.GiventhematurityoftheWebindustry,weaimednotforthe completetutorial,butinsteadforthecompletereference.
ItshouldgowithoutsayingthatmoremarkupchangestoHTMLandCSSareinevitable. HTML5,inparticular,isacompletemovingtarget,andratherthanpuntingonit,wetook thebestshotatitsfirstreleaseversionasitsettledinlate2009.Becauseoftheinevitable changesgivenHTML5’srapidevolution,thesupportWebsite,http://htmlref.com,should beconsideredanimportantbookmarkforreaderslookingforupdatesortheunavoidable correction.
I
Core Markup
C
HAPTER 1TraditionalHTML andXHTML
C
HAPTER 2IntroducingHTML5
C
HAPTER 3HTMLandXHTML ElementReference
1
Traditional HTML and XHTML
M
arkuplanguagesareubiquitousineverydaycomputing.Althoughyoumaynotrealizeit,wordprocessingdocumentsarefilledwithmarkupdirectivesindicating thestructureandoftenpresentationofthedocument.Inthecaseoftraditional wordprocessingdocuments,thesestructuralandpresentationalmarkupcodesaremore oftenthannotbehindthescenes.However,inthecaseofWebdocuments,markupintheform oftraditionalHypertextMarkupLanguage(HTML)anditsExtensibleMarkupLanguage (XML)-focusedvariant,XHTML,isalittlemoreobvious.Thesenot-so-behind-the-scenes markuplanguagesareusedtoinformWebbrowsersaboutpagestructureand,somemight argue,presentationaswell.
First Look at HTML and XHTML
InthecaseofHTML,markupinstructionsfoundwithinaWebpagerelaythestructureof thedocumenttothebrowsersoftware.Forexample,ifyouwanttoemphasizeaportionof text,youencloseitwithinthetags<em>and</em>,asshownhere:
<em>Thisisimportanttext!</em>
WhenaWebbrowserreadsadocumentthathasHTMLmarkupinit,itdetermineshow torenderitonscreenbyconsideringtheHTMLelementsembeddedwithinthedocument:
So,anHTMLdocumentissimplyatextfilethatcontainstheinformationyouwantto publishandtheappropriatemarkupinstructionsindicatinghowthebrowsershould structureorpresentthedocument.
Markupelementsaremadeupofastarttag,suchas<strong>,andtypically,thoughnot always,anendtag,whichisindicatedbyaslashwithinthetag,suchas</strong>.Thetag pairshouldfullyencloseanycontenttobeaffectedbytheelement,includingtextandother HTMLmarkup.
N
OTE
Thereisadistinctionbetweenanelement(forexample,strong)andthetags(<strong> and</strong>)thatareusedbytheelement.However,youwilllikelyoftenfindtheword “tag”usedinplaceof“element”inmanyifnotmostdiscussionsaboutHTMLmarkup.This observationevenincludeshistoricallyrelevantdocumentsdiscussingHTML1writtenbyTim Berners-Lee,thefoundingfatheroftheWeb.Fortunately,despiteanyimprecisionofwordchoice thatpeoplemayexhibitwhendiscussingmarkup,meaningisusuallywellunderstoodandthis shouldnotbeatremendousconcern.UndertraditionalHTML(notXHTML),theclosetagforsomeelementsisoptional becausetheirclosurecanbeinferred.Forexample,a<p>tagcannotencloseanother<p> tag,andthustheclosing</p>tagcanbeinferredwhenmarkuplikethisisencountered:
<p>Thisisaparagraph. <p>Thisisalsoaparagraph.
Suchshortenednotationsthatdependoninferencemaybetechnicallycorrectunderthe specification,butstylisticallytheyarenotencouraged.Itisalwayspreferabletobeprecise, sousemarkuplikethisinstead:
<p>Thisisaparagraph.</p> <p>Thisisalsoaparagraph.</p>
1
PAR
T I
Therearemarkupelements,calledemptyelements,whichdonotencloseanycontent,thus neednoclosetagsatall,orinthecaseofXHTMLuseaself-closeidentificationscheme.For example,toinsertalinebreak,useasingle<br>tag,whichrepresentstheemptybrelement, becauseitdoesn’tencloseanycontentandthushasnocorrespondingclosetag:
<br>
However,inXMLmarkupvariants,particularlyXHTML,anunclosedtagisnotallowed,so youneedtoclosethetag
<br></br>
or,morecommonly,useaself-identificationofclosurelikeso:
<br/>
Thestarttagofanelementmightcontainattributesthatmodifythemeaningofthetag. Forexample,inHTML,thesimpleinclusionofthenoshadeattributeinan<hr>tag,as shownhere:
<hrnoshade>
indicatesthatthereshouldbenoshadingappliedtothishorizontalrule.UnderXHTML, suchstyleattributesarenotallowed,becauseallattributesmusthaveavalue,soinstead youhavetousesyntaxlikethis:
<hrnoshade="noshade"/>
Astheprecedingexampleshows,attributesmayrequirevalues,whicharespecifiedwithan equalsign;thesevaluesshouldbeenclosedwithindoubleorsinglequotes.Forexample, usingstandardHTMLsyntax,
<imgsrc="dog.gif"alt="Angus-BlackScottishTerrier"height="100" width="100">
specifiesfourattributesforthis<img>tagthatareusedtoprovidemoreinformationabout theuseoftheincludedimage.UndertraditionalHTML,inthecaseofsimplealphanumeric attributevalues,theuseofquotesisoptional,asshownhere:
<pclass=fancy>
AgraphicaloverviewoftheHTMLmarkupsyntaxshownsofarispresentedhere:
Hello HTML and XHTML World
GiventhesebasicsofHTMLsyntax,itisbestnowtolookatanexampledocumenttoseeits <title>HelloHTML4World</title>
<!--SimplehelloworldinHTML4.01strictexample--> </head>
<body>
<h1>WelcometotheWorldofHTML</h1> <hr>
<p>HTML<em>really</em>isn'tsohard!</p> <p>Soonyouwill♥usingHTML.</p> <p>Youcanputlotsoftexthereifyouwant. Wecouldgoonandonwithfaketextforyou toread,butlet'sgetbacktothebook.</p> </body>
</html>
O
NLINE
http://htmlref.com/ch1/html4helloworld.htmlAsimplemodificationoftheinitial<!DOCTYPE>lineisreallyallthatisnecessaryto makethisanHTML5example,thecommentandtextischangedsoyoucankeepthe <title>HelloHTML5World</title>
<!--SimplehelloworldinHTML5example--> </head>
<body>
<h1>WelcometotheFutureWorldofHTML5</h1> <hr>
<p>HTML5<em>really</em>isn'tsohard!</p>
<h1 class=“primary”>Example Heading</h1> Tag
Name AttributeName
Attribute
Affected Content Start Tag
HTML Element Attribute
Value
PAR
T I
<p>Soonyouwill♥usingHTML.</p> <p>Youcanputlotsoftexthereifyouwant. Wecouldgoonandonwithfaketextforyou toread,butlet'sgetbacktothebook.</p> </body>
</html>
O
NLINE
http://htmlref.com/ch1/html5helloworld.htmlInthecaseofXHTML,whichisaformofHTMLthatisbaseduponthesyntaxrulesof XML,wereallydon’tseemanymajorchangesyetinourexample:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>HelloXHTMLWorld</title>
<!--SimplehelloworldinXHTML1.0strictexample--> </head>
<body>
<h1>WelcometotheWorldofXHTML</h1> <hr/>
<p>XHTML<em>really</em>isn'tsohardeither!</p> <p>Soonyouwill♥usingXHTMLtoo.</p> <p>TherearesomedifferencesbetweenXHTML andHTMLbutwithsomeprecisemarkupyou'll seesuchdifferencesareeasilyaddressed.</p> </body>
</html>
O
NLINE
http://htmlref.com/ch1/xhtmlhelloworld.htmlTheprecedingexamplesusesomeofthemostcommonelementsusedin(X)HTML documents,including:
• The<!DOCTYPE>statement,whichindicatestheparticularversionofHTML orXHTMLbeingusedinthedocument.Thefirstexampleusesthestrict4.01 specification,thesecondusesareducedformforHTML5themeaningofwhich willbeexplainedabitlateron,andthefinalexampleusestheXHTML1.0strict specification.
• The<html>,<head>,and<body>tagpairsareusedtospecifythegeneralstructure ofthedocument.Therequiredinclusionofthexmlnsattributeinthe<html>tagis asmalldifferencerequiredbyXHTML.
• The<meta>tagusedintheexamplesindicatestheMIMEtypeofthedocumentand thecharactersetinuse.NoticethatintheXHTMLexample,theelementhasatrailing slashtoindicatethatitisanemptyelement.
• The<title>and</title>tagpairspecifiesthetitleofthedocument,which generallyappearsinthetitlebaroftheWebbrowser.
