Mass media in Nigerian democracy

The HTML

PocketGuide

BruceHyslop

Ginormous knowledge, pocket-sized.

TheHTMLPocketGuideBruceHyslopPeachpitPress1249EighthStreetBerkeley,CA94710510/524-2178510/524-2221(fax)FindusontheWebat:www.peachpit.comToreporterrors,pleasesendanoteto:errata@peachpit.comPeachpitPressisadivisionofPearsonEducation.Copyright©2010byBruceHyslop

ExecutiveEditor:CliffordColbyEditor:KimWimpsettTechnicalEditor:MichaelBesterProductionEditor:TraceyCroomCompositor:DavidVanNessIndexer:JamesMinkinCoverDesign:PeachpitPressInteriorDesign:PeachpitPressNoticeofRightsAllrightsreserved.Nopartofthisbookmaybereproducedortransmittedinanyformbyanymeans,electronic,mechanical,photocopying,recording,orotherwise,withoutthepriorwrittenpermissionofthepublisher.Forinformationongettingpermissionforreprintsandexcerpts,contactpermissions@peachpit.com.NoticeofLiabilityTheinformationinthisbookisdistributedonan“AsIs”basiswithoutwarranty.Whileeveryprecautionhasbeentakeninthepreparationofthebook,neithertheauthornorPeachpitshallhaveanyliabilitytoanypersonorentitywithrespecttoanylossordamagecausedorallegedtobecauseddirectlyorindirectlybytheinstructionscon-tainedinthisbookorbythecomputersoftwareandhardwareproductsdescribedinit.TrademarksManyofthedesignationsusedbymanufacturersandsellerstodistinguishtheirprod-uctsareclaimedastrademarks.Wherethosedesignationsappearinthisbook,andPeachpitwasawareofatrademarkclaim,thedesignationsappearasrequestedbytheownerofthetrademark.Allotherproductnamesandservicesidentiiedthroughoutthisbookareusedineditorialfashiononlyandforthebeneitofsuchcompanieswithnointentionofinfringementofthetrademark.Nosuchuse,ortheuseofanytradename,isintendedtoconveyendorsementorotherafiliationwiththisbook.ISBN-13: 978-0-321-69974-9ISBN-10: 0-321-69974-2987654321PrintedandboundintheUnitedStatesofAmerica

Contents

Introduction. .................................................................................................................vii

Part1: HTMLBasics . .........................................................................................1Chapter1: HTMLBasics. .........................................................................................3

Part2: HTMLElementsandGuidance ..................................25Chapter2: PrimaryStructureandSections . ........................................27

Chapter3: DocumentHead...................................... 43

Chapter4: Lists . ........................................................................................................69

Chapter5: Text . .........................................................................................................93

Chapter6: EmbeddedContent(ImagesandObjects) ...............141

Chapter7: Forms .....................................................................................................157

Chapter8: TabularData . ..................................................................................185

Chapter9: Scripting ...........................................................................................203

TheHTMLPocketGuidevi

Part3: HTML5ElementsandGuidance . ......................... 221Chapter11: PrimaryStructureandSections . ...................................223

Chapter12: Text . ...................................................................................................245

Chapter13: EmbeddedContent(Images,Media,andMore). ..............................................263

Chapter14: Forms. ............................................................................................... 277

Chapter15: InteractiveElements . ............................................................285

Appendix:AlphabeticalHTMLElementsPageListing . ........... 294

Index . ........................................................................................................................... 296

Part1

Thispartofthebookcontainsonechapter,“HTMLBasics,”whichprovidesanoverviewofHTML5,discussestheversionsofHTML,recommendssomebestpractices,listscommonattributes,andmore.

HTMLBasics

Part1Contents

Chapter1: HTMLBasics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

ThischapterprovidesfoundationalinformationforParts2and3ofthebook.(Ifyou’vebeenaroundHTMLforawhile,muchofitwillbeoldhat.)

Icoverafewstandards-basedbestpractices,basicHTMLdocumentstruc-tureforalllavorsofthelanguage(includingHTML5),differencesamongtheversions,DOCTYPEs,basicdatatypes,commonattributes,anoteaboutobsoleteanddeprecateditems,andmore.

note Iencourageallreaderstoreviewthe“HowAttributesAreNotedinThisBook”box.

Let’sbeginwithanoverviewofHTML5incasethisversionofHTMLisnewtoyou.

HTMLBasics

1

Part1:HTMLBasics4

AnHTML5OverviewHTML5isanaturalevolutionofHTML4thataccountsfortherapidgrowthofmedia,richonlineexperiences,andsophisticatedWebapplica-tiondevelopmentsinceHTML4.01becameaspeciicationattheendof1999.

Atthetimeofthiswriting,HTML5isstillunderdevelopmentandsubjecttochange.However,itisonstablefooting,andbrowsershavealreadyaddedmany—andcontinuetoaddmore—ofitsfeatures.(Pleaseseehttp://www.htmlfiver.com/html5-browser-support/formoreinformation.)

ThisbookincludesinformationfromtheHTML5editor’sWorkingDraftdatedApril26,2010.HerearesomekeylinkssoyoucankeepupwithHTML5’sprogress:n W3CWorkingDraft:http://www.w3.org/TR/html5/.n Latesteditor’sWorkingDraft(typicallymorerecent):http://www.

whatwg.org/specs/web-apps/current-work/multipage/.n HTML,TheMarkupLanguage:http://www.w3.org/TR/html-markup/.

ThisbrielysummarizeseachHTML5elementandattribute.n HTML5differencesfromHTML4:http://www.w3.org/TR/html5-diff/.

SnapshotViewHTML5breaksdownlikethis:n Newelementsandattributes:HTML5inheritsnearlyeveryelement

fromHTML4(pleaseseePart2ofthebook).Italsoincludesnearly30newelements,allofwhichIdetailinPart3ofthebook.Highlightsincludeaudio,video,canvas,datalist,andawholehostofnew

Part1:HTMLBasics Chapter1:HTMLBasics 5

semanticssuchasarticle,nav,header,andfooter.AsdiscussedinChapter7,HTML5alsoincludesbigadvancementsintheformsdepart-mentwithnewattributesandinputtypesthatmakerichformseasiertodevelop,moreaccessible,andmoreconsistentforusersandthatcanvalidateinthebrowserwithoutJavaScript.

n Newfeatures:Featuresisabitofabroadterm,butitmostlyspeakstonewfunctionalityinHTML5andrelatedin-progressspecsthatfallunderHTML5froma“marketing”sense,ifnotliterallypartofHTML5.(Asidefromtheoccasionalcoverage,thisbookleavesin-depthdiscus-sionsofthenewfeaturesforanotherday.)Someofthesefeaturesare:– Canvas(viatheaforementionedcanvaselement)– Cross-documentmessaging– Draganddrop– EmbeddingofScalableVectorGraphics(SVG)directlyinHTML– Geolocation– History(browser)management– Microdata– Nativemediaplaybackscripting(viatheaforementionedaudioand

videoelements)– OflineWebApplications– WebStorage(akaDOMstorage)– WebWorkers

CodeFormattingSyntax:ARecommendationHTML5isextremelyforgivingconcerninghowyoumaystructurethecode.Youmayincludeoromitclosingtags,useuppercaseorlowercaseelementsandattributes,quoteornotquoteattributevalues,andmore.Thatlexibilityhasbeenthesourceofsomecontroversy,butitremains.

Part1:HTMLBasics6

Havingsaidthat,myrecommendationistocodeHTML5ineitheroneofthesetwoways:n Usealllowercaseforcode,double-quoteallattributevalues,useattri-

buteminimization,alwaysuseanelement’sendtagifithasone,anddon’tterminateelementsthatdon’thaveanendtag(thatis,emptyorvoidelements).

n

Or,useXHTMLsyntax,whichisexactlythesameasthepreviousbullet,exceptyoudon'tuseattributeminimizationanddoterminateemptyelements.Yes,HTML5acceptsXHTMLsyntax.

Allthecodeexamplesinthisbookconformtooneofthese(mostlythesecond)soyoucangetasenseofhowtoreplicatethemifyou’renewtocoding.(Pleasesee"DifferencesBetweenHTML4andXHTML"laterinthischapterforexplanationsofattributeminimizationandterminatingemptyelements.TheirdescriptionsarerelevanttoHTML5usage,too.)

note WhydoIrecommendfollowingoneoftheseformats?Ielaborateabitonthisathttp://www.htmlfiver.com/extras/html5-code-syntax/,but

theshortansweristhey’reinlinewiththewayseasoneddevelopersanddesignershavecodedforthebetterpartofthepastdecadeasaresultoftheWebstandardsmovement.So,thesesyntaxformatswillbecomedefactoHTML5codingstandards,inmyview,iftheyaren’talready.

note UnlikeHTML5,XHTML5syntaxdoeshavefirmrules,justlikeXHTML1.However,unlikeXHTML1,anXHTML5pagemustbeservedwithan

XMLMIMEtype,andifthereisasingleinvalidportionofcode,thepagewon’trender.Forthisreason,HTML5willhavewidespreaduse,whileXHTML5willlikelyfindalimitedaudience.

HowtoStyleNewElementsAlthoughit'struethatyoucan'tuseHTML5featuressuchastheaddi-tionalinputtypesandthedetailselementunlessabrowsersupportstheirbehavior,youcanusethenewsemanticelementssuchasarticle,aside,


navandmostoftheothersrightaway.Plus,withjustalittleextrahelp,mostbrowsersallowyoutostylethemevenwhentheydon'tyetsupportthemnatively.I'vedetailedthethreeeasystepsrequiredtostyletheseelementsathttp://www.htmliver.com/extras/style-html5-elements/.

So,that’sabird’seyeviewofHTML5.PleasedigintoParts2and3tolearnthenitty-grittyconcerningHTML5elementusage,andvisithttp://www.htmlfiver.com/using-html5-today/tolearnmoreaboutwhatyoucanuseinHTML5today.

AFewBestPracticesIcouldeasilydedicatechapterstoWebstandardsandbestpracticesbuthavesynthesizedthemintothesekeypoints:n AlwaysuseaDOCTYPE:ADOCTYPEtellsthebrowserwhatmodein

whichtorender,improvesinteroperability,andmakesyourlifeaheckofaloteasierwhendevelopinganddebuggingyourcode.Pleaseseethe“DOCTYPEs”sectionformoreinformation.

n Separatecontent,presentation,andbehavior:Alongwiththenextitem,thisisoneofthekeytenetsofWebstandards.Separationofcontent(HTML),presentation(CSS),andbehavior(JavaScript)meansnotinterminglingthemintheHTML.Usuallyit’sbesttoplaceyourCSSandJavaScriptinseparateilesandloadthemintoyourpages.Amongotherbeneits,thismakesdevelopment,reusability,andmaintenancefareasier.(MakeoneCSSorJavaScriptupdate,anditcanspillacrossyourwholesite.)

n Usepropersemantics:ThisreferstowrappingyourcontentwiththeHTMLelement(s)thatbestrelectsthenatureofthecontent.Forexam-ple,puteachparagraphoftextinaparagraphelement(<p></p>).Placealistofitemsinadeinitionlist(<dl></dl>),orderedlist(<ol></ol>),or

Part1:HTMLBasics8

unorderedlist(<ul></ul>)asismostappropriate;it’sthesameprincipleforothertypesofcontentandtheirrelatedelements.Thisimprovesaccessibility,improvessearchengineoptimization(SEO),tendstomakepageslighter,andusuallymakesstylingwithCSSeasieraswell.

n Validateyourpages:HTMLvalidatorscheckyourcodeforsyntaxerrors.Byvalidatingyourpages,you’llbesurethey’reincompliancewiththeirDOCTYPE.Thishelpsyoucreatemoreconsistentcodeandtrackdowntheoccasionalnettlesomebug.ValidateyourX/HTMLpagesathttp://validator.w3.org/andyourHTML5pagesthereorathttp://html5.validator.nu/toreceivethekindofpersonalvalidationandsatis-factionthatonlyanautomatedprogramcanprovide!

BasicHTMLDocumentStructureNomatterwhatlavorofHTMLyou’rewriting—HTML4,XHTML1,orHTML5—thebasicstructureremainsthesame.Onlyafewofthedetailsaredifferent.Let’stakealook.

Example1(atypicalXHTML1Strictpage):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head>

<title>Your document title</title>

<meta http-equiv="Content-type" content="text/html;

charset=utf-8" />

</head>

<body>

. . . [your page content] . . .


</body>

</html>

I’vehighlightedtheportionsthatchangefromoneversionofthelanguagetoanother.Theyareasfollows:n TheDOCTYPE:IncludeaDOCTYPEineverypage.Seethe“DOCTYPEs”

sectioninthischapterformoreinformation,includingalistofavail-ableDOCTYPEs.

n Thehtmlelement:Thisissimply<htmllang="en">forHTML4andHTML5documents,wherelangiscustomizedaccordinglytoitthelanguageofyourpagecontent.(Pleasesee“LanguageCodes”inthischapter.)Englishisspeciiedintheexample.

n Themetaelementthatincludesthecharacterencoding:AnHTML4documentdoesn’thavethetrailingslash(/>).AnHTML5documentmayhavethetrailingslashifyou’dlikebutisotherwisesimpliiedto<metacharset="utf-8">,assumingtheencodingisUTF-8.It’salsopreferabletoputitbeforethetitle.(SeethemetaelementinChapter3.)

Forcomparison,Example2showsatypicalHTML5document.

Example2:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Your document title</title>

</head>

<body>

. . . [your page content] . . .

</body>

</html>

Part1:HTMLBasics10

DifferencesBetweenHTML4andXHTMLInadditiontothebasicstructuraldifferencesjustdiscussed,thereareanumberofotherdifferencesbetweenHTML4andXHTML1(they’retrueofXHTML5,too).They’realleasytogetahandleon;thissectionoftheXHTML1specsummarizesthemnicely:http://www.w3.org/TR/xhtml1/#diffs.

Idowanttocallouttwoofthekeydifferences,though,sinceyou’llcomeacrossthemfrequentlyinParts2and3ofthebook:n Terminateemptyelements:Someelementsareclassiiedasempty

elements(alsocalledvoid).Anemptyelementisonethatcan’tcontaincontent,soitdoesn’thaveanendtag.Examplesare<img>and<br>.InXHTML,emptyelementsmustbeself-closing,whichissimplyamatterofendingthemwith/>,asin<img/>and<br/>.MostofmycodesamplesthroughoutthebookuseXHTMLsyntax(whichisalsovalidinHTML5),butyouwillseenotessuchas“<area>or<area/>”inthesummaryofrelevantelementsasareminderofthetwoformats.

n Anattributemusthaveavalue(evenBooleans):Someattributesdon’thaveavalue,liketheselectedattributeon<optionselected></option>.Thissyntaxisreferredtoasattributeminimization.MostoftheseareBooleanattributes,meaningthatiftheyarepresent,theconditionistrue(theoptionisselected),andiftheyaren’t,itisfalse.XHTMLdocumentsdon’tallowattributeminimization,soyousimplyassignthenameoftheattributeastheattributevalue,makingtheexamplebecome<optionselected="selected"></option>.(NotethatHTML5allowseitherselected,selected="",orselected="selected",allofwhichbrowsersshouldtreatthesameway.)

tip Pleasealsosee“CodeFormattingSyntax:ARecommendation”earlierinthischapter.


DifferencesBetweenHTML4andHTML5SomeelementsaredifferentwhenusedinHTML4orXHTML1docu-mentsversusinHTML5.IdetailthesedifferencesthroughoutPart2ofthebook.PleaseseetheintroductiontoPart2regardinghowItypicallyconveythatinformation.IalsorecommendyourefertothehandyW3Csummaryathttp://www.w3.org/TR/html5-diff/.

tip Pleasealsosee“CodeFormattingSyntax:ARecommendation”earlierinthischapter.

DOCTYPEsHTMLcomesinafewlavors,asdictatedbyapage’sDOCTYPE(always

includeoneinyourdocuments!).ThissectionincludesareferenceoftheavailableDOCTYPESandabriefsummaryofwhateachallows.

Standards-savvydevelopersanddesignershavetendedtouseXHTML1StrictorTransitionaland,insomecases,HTML4.01Strict.However,youcanusetheHTML5DOCTYPEtoday,andyourpageswillworkasexpected(thatdoesn’tmeanallofHTML5’snewelementswillworksincethatdependsonthebrowser,butyoucancodeyourpagesasyounormallywouldotherwise).

HTML4.01Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Deprecatedelementsandattributes,frames,andthetargetattributeonlinksarenotallowed.

Part1:HTMLBasics12

HTML4.01Transitional(akaLoose)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Deprecatedelementsandattributesareallowed.

HTML4.01Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

AvariantofHTML4.01Transitionalthatisusedforframesonly.

HTML5andXHTML5<!DOCTYPE html>

UsedforallHTML5documents.

XHTML1Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


YoumustfollowXHTMLsyntaxrules;plus,deprecatedelementsandattributes,frames,andthetargetattributeonlinksarenotallowed.

XHTML1Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

YoumustfollowXHTMLsyntaxrules.Deprecatedelementsandattri-butesareallowed.

XHTML1Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

AvariantofXHTML1Transitionalusedforframesonly.

XHTML1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

EqualtoXHTML1Strictbutallowsyoutoincludeadditionalmodules.

Inlinevs.Block-levelElementsAblock-levelelementmaycontainmostotherblock-levelelementsandallinlineelements.Inlineelementsmostlydescribebriefstringsoftextandmayincludeotherinlineelements.Forinstance,thepelementisablock-levelelement,andtheemelementisinline:<p>Thisisa<em>great</em>example!</p>.Block-levelelementsoccupyatleastonefulllinewhenrendering,whileinlineelementstakeuponlyasmuchspaceastheircontentrequires.ThisdefaultbehaviormaybeoverriddenwiththeCSSdisplayproperty.

HTML5doesn’tusethetermsblock-levelandinline,thoughitselementsdorenderbydefaultinoneofthetwoways.Pleasesee“Contentmodels”athttp://www.w3.org/TR/html5/dom.html#content-modelsfordetails.

HTMLCommentsHTMLcommentsdon'trenderinthepage,justinthecode.Theymuststartwithandtheymaycoverseverallinesofcode.Irecommendcommentingatleastthebeginningandendofmajorsectionsofyourpagestomakeyourcodeeasiertoread.

Part1:HTMLBasics14

AttributesAnHTMLelement’sattributedeinesapropertyofthatelement.Theyareoptionalinmostcases,sousethemonlyasneeded.Forexample,hereyouseeboththehrefandtitleattributesappliedtoahyperlink:

<p>They saw a <a href="ducks.html" title="Essay and

photos">family of ducks</a> by the stream.</p>

Youmayplaceattributesinanyorderyoulike,butIencourageyoutobeconsistentinyourapproachinordertomakeyourcodeeasiertoreadandmanage.

I’lldetailcommonattributesinjustabit,butirstpleaseindulgemeasIexplainhowattributesarenotedinthisbook.

HowAttributesAreNotedinThisBook

ManyHTMLelementssharethesameattributes.TheX/HTMLspeci-icationsusethetermsCore,I18n,andEventstocategorizethese.(Coreconsistsofmostlyunrelatedcommonattributes,I18nconsistsoftheinternationalization-relatedattributes,andEventsaretheevent-relatedattributes.)Meanwhile,HTML5usesonetermonly,Global,whichrepresentsalltheCore,I18n,andEventsattributesfromX/HTMLplusabunchjustforHTML5.(Iexplaineachoftheseattributegroupingsindetailafterthisbox.)

IusethesetermsthroughoutParts2and3ofthebook.Namely,thebeginningofeachHTMLelemententryincludesalistofitsattri-butesinthisformat:

Attributes Core,I18n,Events,accesskey,alt,href,nohref*,shape,HTML5Only:Global,hreflang,media,ping

(continuesonnextpage)


HowAttributesAreNotedinThisBook(continued)

An“AttributesinDetail”sectionthatdetailstheirusageappearstowardtheendofanHTMLelement’sentry.

So,inthisexample,theelementsupportsalltheCore,I18n,Events,and(inHTML5only)Globalattributes.Inaddition,theattributeslistedbyname(accesskey,alt,href,nohref*,shape,hreflang,media,andping)arecustomattributesthattheelementsupports,depend-ingontheversionofHTML.Incaseit’snotclear,allattributespriortoHTML5OnlyapplytoHTML4,XHTML1,andHTML5(exceptwhennotedotherwisein“AttributesinDetail”),andallattributesafterHTML5OnlyapplytoHTML5only,asyouwouldexpect.

Ifanattributehasanasterisk,asnohrefdoesintheexample,thenthatindicatesanexceptionisnotedin“AttributesinDetail.”Forinstance,itmightsaythis:nohref:*ObsoleteinHTML5.

note The

accesskeyandtabindexattributesaresharedbyahandfulofelementsinX/HTMLthougharenotpartoftheCore,I18n,orEvents

attributegroupings.TheyarepartofHTML5’sGlobalattributes,though,sopleasefindtheirdescriptionsinthatsection.ThesamedefinitionsapplytotheiruseinX/HTMLdocuments.

OK,let’slookattheattributegroupings.

CoreTheseattributesarebothpartofX/HTML’sCoregroupandHTML5’sGlobalgroupofcommonattributes:n class="classnames":Usethistoassignoneormorespace-separated

classnamestoanelementforstylingorscriptingpurposes.Youmay

Part1:HTMLBasics16

deineyourownclassnames,suchas<pclass="newssynopsis">... </p>.Aclassmayberepeatedinapage,whetherit’stothesameordifferentelementtypes.

n id="uniqueidentifier":ThisassignsauniqueIDforfunctional,styling,andscriptingpurposes.Itmaynotberepeatedwithinthesamepage.

n style="inlinestylesheet":ThisassignsinlineCSStoanelement.Avoidusingthiswheneverpossiblesinceitisabestpracticenottomixyourpresentation(CSS)andcontent(HTML).

n title="descriptivetext":Thisprovidesashortdescriptionthatdoesn’tappearon-screen,thoughmostbrowsersrenderitasatooltipwhenthemouseorotherpointerishoveredontheelement.Screenreadersmayannouncethetextaswell.

I18n(Internationalization)Thesetwoattributesallowyoutospecifythelanguageanddirectionoftextinyourdocument.n dir="ltr|rtl":Thisspeciiesthebasedirectionalityoftheelement’s

textcontentandtables.Typically,youdon’tneedtosetitanywhereonyourpagesincethedefaultisltr(left-to-right).However,ifyourcontent’sbasedirectionalityisright-to-left,suchasinHebrew,set<html...dir="rtl"lang="he">(sansellipses)sotherestofthepageinheritsthesetting.(Note:Youshouldspecifylang,too,asshown,butuseragentsdon’tdeterminetextdirectionalityfromthat).Ifyouareinterminglingleft-to-rightandright-to-leftcontent,suchasEnglishandArabic,respectively,setdirandlangontheelement(aparagraph,forinstance)thatcontainsthecontentthatdeviatesfromthedirectionalityofthepageatlarge.PleasealsoseethebdoelementinChapter5forarelateddiscussion.

n lang="languagecode":Thisspeciiesthelanguageoftheelement’scontent.Besuretoalwayssetitonthehtmlelement;elementson


therestofthepageinheritthatvalueunlessyouoverrideitatamoregranularlevel.Forinstance,set<html...lang="en">(sansellipses)onadocumentinEnglish.IfaparagraphwithinthatsamepageisinFrench,set<plang="fr">...</p>tooverrideit.Pleaseseethe“LanguageCodes”sectionofthischaptertoaccessmorecodes.

EventsThesecommoneventattributesallowyoutoassignJavaScripttoarangeofpagebehaviors.Asabestpractice,don’tapplytheseattributestoyourHTMLinlineasyoudowithotherattributes.Meaning,avoidthis:<ahref="some-page.html"onclick="someFunction();returnfalse">linktext</a>.Instead,useJavaScripttoapplythemunobtru-sively;thisisinkeepingwiththeseparationofcontentandbehaviorbestpracticedescribedin“AFewBestPractices”earlierinthischapter.SearchonlineforunobtrusiveJavaScripttolearnmoreandseecodeexamples.n onclick="script":Eventireswhentheuserclicksamousebuttonor

hitsReturnorEnteronthekeyboard.(Mousemeanspointingdeviceforeacheventinthislist.)

n ondblclick="script":Eventireswhentheuserdouble-clicksamousebutton.

n onmousedown="script":Eventireswhentheuserholdsthemousebuttondown.Thisistheoppositeofonmouseup.

n onmouseup="script":Eventireswhentheuserreleasesthemousebutton.Thisistheoppositeofonmousedown.

n onmouseover="script":Eventireswhentheusermovesthemousecursorontopofanelement.Thisistheoppositeofonmouseout.

n onmousemove="script":Eventireswhentheusermovesthemousecursor.

Part1:HTMLBasics18

n onmouseout="script":Eventireswhentheusermovesthemousecursorawayfromanitem.Thisistheoppositeofonmouseover.

n onkeypress="script":Eventireswhentheuserpressesandreleasesakey.

n onkeydown="script":Eventireswhentheuserpressesdownonakey.Thisistheoppositeofonkeyup.

n onkeyup="script":Eventireswhentheuserreleasesakey.Thisistheoppositeofonkeydown.

Global(HTML5)Asdiscussedinthe“HowAttributesAreNotedinThisBook”box,theattributesthatHTML5classiiesasGlobalincludeX/HTML’sCore,I18n,andEvents,plustheuniqueoneslistedhere.TheGlobalattributesmaybeappliedtonearlyeveryelementinHTML5.n accesskey="keyboardcharacter":(Note:SomeX/HTMLelements

supporttabindex,asnotedintheirentriesinPart2ofthebook.)Thisattributeassignsacharacterasashortcuttosettingfocusonanelement,asin<inputtype="text"name="search"accesskey="4"/>.Browsersandplatformsvaryonwhatkeyorkeysyoumustpressincombinationwiththeaccesskeytoactivateit.WhilepressingCtrlplustheaccesskeyonaMactypicallyactivatestheshortcut,onaWindowscomputerit’sAltforInternetExplorerandChrome,Shift+AltforFirefox,andShift+EscforOpera.Behaviorvariesperelementandbrowser.Seehttp://www.webaim.org/techniques/keyboard/accesskey.phpformoreinformation,includingreasonswhyithasn’tgainedwideradoption.

n class:Pleaseseethedescriptioninthe“Core”section.n contenteditable="true|false":HTML5allowsuserstoeditan

element’scontentiftheelementhascontenteditable="true".Ifcontenteditableisnotset,anelementinheritsthevaluefromits


nearestparent.Asettingoffalsepreventsanelementfrombeingedited.Thedefaultstateistoinherit.Formoreinformation,seehttp://blog.whatwg.org/the-road-to-html-5-contenteditableandademoathttp://html5demos.com/contenteditable.

n contextmenu="idofmenu":Thisassignstheelement’scontextmenuwhenitsvaluematchestheidofamenuelement(pleaseseeChapter15).

n dir:Pleaseseethedescriptioninthe“I18n”section.n draggable="true|false":HTML5providesadraganddropAPI.Set

draggable="true"onanelementtomakeitdraggable(falsedoestheopposite).Ifdraggableisundeined,thedefaultstateisauto,whichdeferstothedefaultstateoftheuseragent.

n hidden:Whenpresent,thisBooleanattribute“indicatesthattheelementisnotyet,orisnolonger,relevant,”anduseragentsshouldn’tshowthecontent.Itaffectspresentationonly;scriptsandformcontrolsinhiddencontentstillwork.

n id:Pleaseseethedescriptioninthe“Core”section.n itemid,itemprop,itemref,itemscope,anditemtype:Theseattributes

arerelatedtodeiningmicrodata.Pleaseseehttp://dev.w3.org/html5/md/.n lang:Pleaseseethedescriptioninthe“I18n”section.n spellcheck="true|false":Setspellcheck="true"onanelement

whosecontentshouldhaveitsspellingandgrammarchecked(falsedoestheopposite).HTML5suggeststhedefaultstatecouldbefortheelementtoinheritthesettingofitsparentbutdoesn’tdeineitoutright.Italsodoesn’tdeinehowauseragentshouldperformspell-andgrammar-checking.

n style:Pleaseseethedescriptioninthe“Core”section.

Part1:HTMLBasics20

n tabindex="number":(Note:SomeX/HTMLelementssupporttabindex,asnotedintheirentriesinPart2ofthebook.)SomeusersprefertonavigateapagewiththeTabkey(andShift+Tabtomovebackward).EachtimeyoupressTabinasupportingbrowser,thefocusshiftstothenextaelement(ahyperlinkoranchor)orformcontrolaccordingtotheorderinwhichitappearsintheHTMLsource,notnecessarilytheon-screenorder(becauseofCSSmovingit).Youmaychangetheorderbyassigningatabindextoanelement,suchas<ahref="trees.html"tabindex="5">Trees</a>.Elementswithtabindexgainpriority,sotheyaretabbedtoirst(1isthehigh-estpriority)beforeanyotherelements,regardlessofsourceorder.Thenumbersmaybeinanyorderorincrementyou’dlike.TheHTMLsourceorderdeterminesthepriorityofelementswiththesamenumber.tabindex="0"hasspecialmeaning;itmakesanelementfocusablebykeyboardbutplacesitinthenormaldocumenttabbingsequence.Also,tabindexonadisabledelementhasnoeffectsinceitcan’tgainfocus.InHTML5,anynegativenumbermeansyoucan’ttabtotheelement,butyoucansetfocustoitwithJavaScriptviafocus().ManybrowsersapplythissamebehaviortoX/HTMLdocumentswhentabindex="-1".Istronglyrecommendyouavoidusingtabindexinmostcasesandmakeyournaturaltabbingorderlogicalforusers.

n title:Pleaseseethedescriptioninthe“Core”section.

DataAttributesDataattributesareanotherofHTML5’sparticularlyusefuladditions—they’recustomattributesthatyoumayapplytoanyelementtostoredatainyourHTML.Theyarehelpfulincaseswhereanotherattributeorelementisn’tappropriateforcontainingtheinformation.Youmaynameyourattributesasyouwishaslongastheybeginwithdata-.Adataattribute'svaluedoesn’tappearinthepage;instead,youleverageitwithJavaScript.Forexample,imagineyourpageincludesalistofproducts


formalesandfemalesofallages.Byincludingdataattributes,youcouldwriteascriptthatsortsoriltersthelistbasedontheuser’schoices.

Example:

<li data-gender=”female” data-agerange=”55-67”>Product Name</

➥ li>

Youmayaddasmanydataattributesasnecessary.Forinstance,theexamplecouldincludeanotheronecalleddata-pricerange.Bestofall,youcanusedataattributestodayacrossbrowsersaslongasyourpagehasanHTML5DOCTYPE.Pleaseseehttp://www.htmlfiver.com/data-attri-butes/foranexampleofhowtoaccessyourcustomdatawithJavaScript.

EventsThatArePartofGlobalTheHTML5GlobalattributesetincludestheX/HTMLEventsattri-butes.Theyareonclick,ondblclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,andonmouseup.Pleaseseethe“Events”sectioninthischapterfordetails.HTML5alsoincludesthefollowingevent-relatedattributesaspartofGlobal:

onabort,onblur*,oncanplay,oncanplaythrough,onchange,oncontextmenu,ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,ondurationchange,onemptied,onended,onerror*,onfocus*,onformchange,onforminput,oninput,oninvalid,onload*,onloadeddata,onloadedmetadata,onloadstart,onmousewheel,onpause,onplay,onplaying,onprogress,onratechange,onreadystatechange,onscroll,onseeked,onseeking,onselect,onshow,onstalled,onsubmit,onsuspend,ontimeupdate,onvolumechange,andonwaiting

Thosewithanasteriskhaveadifferentmeaningwhenappliedtothebodyelement.

Part1:HTMLBasics22

PleaseseetheinputelementinChapter7fordetailsaboutonblurandonfocus.Descriptionsfortheothershavebeenleftoutforspaceconsider-ationsandbecausemanygobeyondthescopeofthisbook(forinstance,manyrelatetoscriptingtheaudioandvideoelements).Youcanlearnmoreathttp://www.w3.org/TR/html5/dom.html#global-attributes.

BasicDataTypesThissectiondescribesbasicHTMLdatatypesreferencedbyelementsinParts2and3.Pleasealsoseehttp://www.w3.org/TR/html4/types.html.

CDATA,andidandnameAttributeValuesThedescriptionsofmanyattributesindicatethatCDATAistheacceptedvalue,asinname="cdata"forforminputs.CDATA,intheseinstances,isafancynameforatextstringthatacceptsavarietyofcharacters.Speciically,forid,name,andotherattributesthataccepttext,theirvalue“mustbeginwithaletter([A–Za–z])andmaybefollowedbyanynumberofletters,digits([0-9]),hyphens(‘-’),underscores(‘_’),colons(‘:’),andperiods(‘.’).”

CharacterEncodingThecharsetattributedeinesthecharacterencoding,suchaswhatyoushoulddeineintheheadelementofeachdocument(see“BasicHTMLDocumentStructure”earlierinthischapterandthemetaelemententryinChapter3).Mostcommonly,charsetissettoutf-8.TheW3Cprovidesathoroughdiscussiononthetopicathttp://www.w3.org/International/tutorials/tutorial-char-enc/.

ContentTypes(MIMETypes)Acontenttypespeciiesthenatureofalinkedorembeddedresource,suchasassignedtothetypeattributeofthelinkelementthatloadsa


stylesheet.Amongthecommoncontenttypesareimage/gif,image/png,image/svg+xml,text/css,text/javascript,text/html,andvideo/mpeg.AcompletelistofregisteredMIMEtypesisavailableathttp://www.w3.org/TR/html4/references.html#ref-MIMETYPES.

LanguageCodesAlanguagecodeisassignedtothelangattributetodescribethelanguageofanelement’scontent,asinlang="dl"forDutch.Pleaseseethe“I18n”sectionofthischapterformoredetailsaboutlang.Languagecodesmayhaveasubcode,too,asincn-zh.Pleaseseehttp://www.anglistikguide.de/info/tools/languagecode.htmlforalistofcodes.

LinkTypesThedeinedX/HTMLlinktypesarealternate,stylesheet,start*,next,prev,contents*,glossary*,copyright*,chapter*,section*,subsection*,appendix*,help,andbookmark.Pleaseseehttp://www.w3.org/TR/html4/types.html#h-6.12fordescriptions.

HTML5includestheonesnotmarkedwithanasteriskandalsoincludesthese:archives,author,external,icon,license,nofollow,noreferrer,pingback,prefetch,search,sidebar,tag,index,up,first,andlast.Pleaseseehttp://www.w3.org/TR/html5/interactive-elements.html#linkTypesfordescriptions.Additionally,HTML5allowsyoutodeinenewlinktypesbydeiningthemathttp://wiki.whatwg.org/wiki/RelExtensions.

Thea(Chapter5),link(Chapter3),andarea(Chapter6)elementsuselinktypes.

CharacterEntitiesAcharacterentityrepresentsacharacterinadocument’scharacterset.Somecommoncharacterentitiesare&foranampersand, for

Part1:HTMLBasics24

anonbreakingspace,<foraless-thansign,>foragreater-thansign,"forastraightquotationmark,‘foracurlyopeningsinglequotationmark,’foracurlyclosingsinglequotationmark,“foracurlyopeningdoublequotationmark,and”foracurlyclosingdoublequotationmark.Therearedozensmore.Here’salist,courtesyofElizabethCastro:http://www.elizabethcastro.com/html/extras/entities.html.

DeprecatedandObsoleteElementsandAttributesAdeprecatedelementorattributeisonethatyoushouldn’tusebutthatbrowsersstillsupportforbackward-compatibilityreasons.MostofthedeprecateditemsarepresentationalinnatureandhavebeenreplacedbyCSS.Anobsoleteelementorattributeisonethatyoushouldnotuseandthatbrowsersshouldnotsupport.

ThedeprecatedelementsinX/HTMLareapplet,basefont,center,dir,font,isindex,menu,s,strike,andu.

Thegoalofthisbookistobeapracticalreferencetostandards-basedcodingtodayandintothefuture.Tothatend,Ideliberatelyleftoutobsoleteanddeprecatedelementsandobsoleteattributes,sinceyoushouldn’tusethemanyway.Similarly,Iomittedproprietary(thatis,nonstandard)elementsthatcertainbrowserssupportbutthataren’tpartofanyHTMLspeciication,eitherinalorintheworks.

However,throughoutParts2(especially)andPart3,Idonotedeprecatedattributesandwhatyoushoulduseinstead,whichusuallymeansusingCSStoreplaceapresentationalattribute.Ialsonoteelementsandattri-butesthatarevalidinX/HTMLbutnotinHTML5(they’reobsolete).

Part2

ThispartofthebookcoversallnondeprecatedelementsthataresharedamongHTML4,XHTML1,andHTML5(thoughsomeareobsoleteinHTML5,asnoted).ElementsuniquetoHTML5arecoveredinPart3.

Insomecases,analreadyexistingelementisdifferentinHTML5,whetherit’stheelement’smeaning,theavailabilityofanattribute,ortheadditionofnewattributes.Inotethesedifferencesthroughout.Inparticular,keepaneyeonthe“AttributesinDetail”sectionsandtheHTML5boxesattheendofrelevantentries.Eachboxdetailsdifferentusesand/orattributesfortheelement,allowingyoutounderstandtheirapplicationinHTML5ataglance.

HTMLElementsandGuidance

Chapter2: PrimaryStructureandSections . . . . . . . . . . . . . . . . . . . . 27Chapter3: DocumentHead . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Chapter4: Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Chapter5: Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Chapter6: EmbeddedContent(ImagesandObjects) . . . . . . . 141Chapter7: Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Chapter8: TabularData . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185Chapter9: Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Chapter10: Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Part2Contents

TheelementsinthischapterrepresentanHTMLdocument’shigh-levelstructuralandoutlinecomponents.Someareessential(afterall,youcan’twriteanHTMLdocumentwithoutthehtmlelement),whileothersareeitherusedsparingly(thehrelement)orhaveseentheirusagedeclineinHTML5(thedivelement).

ThischapterisacounterparttoChapter11,whichdescribesrelatedelementsuniquetoHTML5.Ifyou’rewritingX/HTMLdocuments,thenyoudon’tneedtohoponoverthere.But,ifyou’rewritingHTML5,thenthischapterandChapter11combinetodetailalltheprimarystructuralandsectioningelementsatyourdisposal.

PrimaryStructureandSections

2

Part2:HTMLElementsandGuidance28

addressAuthorcontactinformation

Syntax <address></address>Attributes Core,I18n,Events,HTML5Only:Global

Descriptionaddressisoneofthemostmisleadingelementsbyname.You’dlogi-callythinkit’sformarkingupapostaladdress,butitisn’t(exceptforonecircumstancedescribedinalittlebit).Infact,surprisingly,thereisn’tanHTMLelementexplicitlydesignedforthat.

Instead,addressdeinescontactinformationfortheauthorofanHTMLdocumentorpartofadocument.Ittypicallygoesateitherthebeginningor,moreoften,theendofapage.However,ifasectionofapagehasanauthor,placetheaddressincontextofthatsection.

Mostofthetime,contactinformationtakestheformoftheauthor’se-mailaddressoralinktoapagewithmorecontactinformation.

Example:

<address>

Page maintained by <a href=”mailto:[email protected]">

➥ Taylor Rose</a> and <a href=”/contact-us/katherine-whitney.

➥ html”>Katherine Whitney</a>.

</address>

Browserstypicallyrenderaddresscontentinitalicsbydefault,likethis:Page maintained by Taylor Rose and Katherine Whitney.

Part2:HTMLElementsandGuidance Chapter2:PrimaryStructureandSections 29

Additionally,thecontactinformationcouldverywellbethedocumentauthor’spostaladdress,inwhichcasemarkingitupwithaddresswouldbevalid.But,ifyou’recreatingtheContactUspageforyourbusinessandwanttoincludeyouroficelocations,itwouldbeincorrecttocodethosewithaddress.So,it’sthecontextthatmatters.

HTML5andtheaddressElementInHTML5,addresspertainstothenearestarticleelementancestor,orthebodyifnoarticleispresent.It’scustomarytoplaceaddressinanHTML5footerelementwhendocumentingauthorcontactinfor-mationforthepageatlarge.

Anaddressinanarticleprovidescontactinformationfortheauthorofthatarticlewithinadocument.PleaseseethearticleentryinChapter11foranexample.

HTML5stipulatesthataddressmaycontainauthorcontactinforma-tiononly,notanythingelsesuchasthedocumentorarticle’slastmodiieddate.Additionally,HTML5forbidsnestinganyofthefollow-ingelementsinsideaddress:h1–h6,address,article,aside,footer,header,hgroup,nav,andsection.


bodyDocumentcontentcontainer

Syntax <body> . . . [document content] . . .

</body>

Attributes Core,I18n,Events,onload,onunload,HTML5Only:Global,onafterprint,onbeforeprint,onbeforeunload,onblur,onerror,onfocus,onhashchange,onmessage,onoffline,ononline,onpagehide,onpageshow,onpopstate,onredo,onresize,onstorage,onundo

DescriptionThebodyelementcontainsallcoderelatedtoapage’scontentandmayalsocontainoneormorescriptblocks.bodyisrequiredforeveryHTMLdocumentexceptonethatdeinesframesets,inwhichcaseitcanappearonlyinsidethenoframeselement.(PleaseseeChapter10.)OnlyonebodyisallowedperHTMLdocument.

Example:

. . .

</head>

<body>

<h1>All about <code>body</code></h1>

<p>The <code>body</code> element contains your page’s

content, which may include <em>nearly</em> every

element.</p>

. . .

</body>

</html>


bodymaycontaintext,images,objects,scripts,tables,andforms—inshort,nearlyeveryHTMLelement,whetherblock-levelorinline.However,iftheDOCTYPEisStrict(whichIrecommend),eachinlineelementmustbecontainedinablock-levelelement.Forinstance,thecodeandemelementsintheexamplecouldnotsitdirectlyinsidebodybecausebothareinlineelements.

AttributesinDetailInadditiontothecommonevents,bodyhastwospecialeventattributes(seethe“HTML5andthebodyElement”box,too):n onload=”script”:Fireswhenallthedocument’scontenthasinished

loading.Thisincludesallimages,objects,andscripts(whethertheyarelocaltothesiteorexternal,third-partyscripts).Consequently,thetimeittakesforonloadtoirecanvarygreatlyfrompagetopagedepend-ingonthecontent,howcontentisserved,networklatency,auser’sbrowsercachesettings,andmore.

n onunload=”script”:Fireswhentheuserleavesthedocument,suchaswhennavigatingtoanotherpageviaalink.

DeprecatedAttributesThefollowingattributesareallpresentationalinnature,souseCSSinsteadtoachievetheequivalenteffect.n alink:ObsoleteinHTML5.Thiscolorappearsastheuserisselecting

alink.UsetheCSSa:activepseudo-selectortodeinetheactivelinkcolorinstead.

n background:ObsoleteinHTML5.UsetheCSSbackground-imageprop-ertytodeinethebodybackgroundimageinstead.

n bgcolor:ObsoleteinHTML5.UsetheCSSbackground-colorpropertytodeinethebodybackgroundcolorinstead.


n link:ObsoleteinHTML5.UsetheCSSa:linkpseudo-selectortodeinetheunvisited(thatis,default)linkcolorinstead.

n text:ObsoleteinHTML5.UsetheCSScolorattributetodeinethedefaulttextcolorinstead.

n vlink:ObsoleteinHTML5.UsetheCSSa:visitedpseudo-selectortodeinethevisitedlinkcolorinstead.

HTML5andthebodyElementHTML5introducesseveralneweventattributestobody.Aswithotherevents,it’sbesttoapplytheseunobtrusivelywithJavaScriptratherthanincludetheminyourHTML.

AttributesinDetailn onafterprint=”script”:Thisireswhenthebrowserinishesprint-

ingthedocument.n onbeforeprint=”script”:Thisireswhenthebrowser’sPrintfunc-

tionalityisengaged,suchaswhenyouchoosePrintfromthemenubutbeforethedocumenthasprinted.

n onbeforeunload=”script”:Thisiresjustbeforethedocumentunloads,whichhappenseachtimeausersubmitsaformornavi-gatesawayfromthecurrentpage.Useitifyouwantuserstocon-irmtheyintendtoleavethepage.

n onblur=”script”:Thisireswhenbodylosesfocus,suchaswhentheuserclicksthemousepointeroutsidebody.It’stheoppositeofonfocus.

n onerror=”script”:Thisireswhenanuncaughtruntimescripterroroccurs.

n onfocus=”script”:Thisireswhenthebodyachievesfocusafterhavinglostit.It’stheoppositeofonblur.


HTML5andthebodyElement(continued)

n onhashchange=”script”:Thisireswhenonlythehash(#)portionoftheURLchanges.Forinstance,ifyouarecurrentlybrowsinghttp://www.yourdomain.com/meteor-showers.htmlandselectalinkthatanchorstothe#photosidelsewhereonthepage,theURLchangestohttp://www.yourdomain.com/meteor-showers.html#photosandonhashchangeiresifit’sdeined.Itiresagainifyounavigatetoanotheranchororbacktotheinitialstatethathadnohash.

n onmessage=”script”:Thisireswhenadocumentreceivesamessageviaserver-sentevents,Websockets,cross-documentmessaging,andchannelmessaging.Forexample,HTML5’sCross-DocumentMessagingallowstwodocumentstocommunicateregardlessoftheirsourcedomains.onmessageireswhenonedoc-umentreceivesamessagefromtheotheroneviapostMessage().Afulldiscussionofmessagingisbeyondthescopeofthisbook.

n onoffline=”script”:Thisireswhenthenavigator.onLineattri-butevaluechangesfromtruetofalse,whichoccurswhenthebrowsercannotcontactthenetworkuponauser-initiatedorprogrammaticrequestforaremotepageorile.

n ononline=”script”:Theoppositeofonoffline,thisireswhenthevalueofnavigator.onLinechangesfromfalsetotrue.

n onpagehide=”script”:Thisireswhennavigatingfromabrowser’ssessionhistoryentry,whichisanindividualURLand/orstateobjectplusothercontextualinformation.Looselyput,thesessionhistoryrepresentsthefullsetofpagesaccessedduringabrowsingsession.

n onpageshow=”script”:Theoppositeofonpagehide,thisireswhennavigatingtoabrowser’ssessionhistoryentry.



HTML5andthebodyElement(continued)

n onpopstate=”script”:HTML5allowsyoutomanipulatetheses-sionhistorybyrecordinganinterfacestate(astateobject)inthehistoryprogrammatically.onpopstateireswhennavigatingtoabrowser’ssessionhistoryentrythatisastateobject.Pleaseseehttps://developer.mozilla.org/en/DOM/window.onpopstateandhttps://developer.mozilla.org/en/DOM/Manipulating_the_browser_historyformoreinformationandexamples.

n onredo=”script”:HTML5’sundo/redohistoryfunctionalityisjustoneofitsfeaturesthatmakesiteasiertobuildrobustWebappli-cations.Theconceptissimilartotheundoandredofeaturesinwordprocessorsandothersoftware.onredoireswhenaredooperationtakesplaceonanundoobject.Thespeciicsarebeyondthescopeofthisbook.

n onresize=”script”:Thisireswhenthebodychangessize.n onstorage=”script”:TheW3C’sWebStorageAPI(http://www.

w3.org/TR/webstorage/),alsoreferredtoas“DOMStorage,”allowsyoutostorealargeamountofdatasecurelyinthebrowser.onstorageireswhenastorageeventoccurs.ThespeciicsofWebStoragearebeyondthescopeofthisbook.Pleaseseehttp://dev.opera.com/articles/view/web-storage/formoreinformation.

n onundo=”script”:Thisistheoppositeofonredo,iringwhenanundooperationtakesplaceonanundoobject.

Also,whencommoneventsonblur,onerror,onfocus,andonloadappearonbody,theyexposethesame-namedeventhandlersoftheWindowobject.Pleasesee“Attributes”inChapter1formoredetailsaboutthesefourevents.


divAgenericcontainer

Syntax <div></div>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionThedivelementservesasageneric,block-levelcontainerandhasnosemanticmeaning.Asisthecasewithanymeaninglesselement,usedivonlywhenapropersemanticchoicedoesn’texist.

DeveloperstypicallyuseitinX/HTMLasthewrapperaroundmostprimaryblocksofcontentandthencontrolthewidth,placement,andotherpresentationcharacteristicswithCSS.divmaycontainbothblock-levelandinlineelements,includingotherdivs.

Example:

<body>

<div id=”container”>

<div id=”header”> . . . </div>

<div id=”content”>

<div id=”main”> . . . </div>

<div id=”sidebar”> . . . </div>

</div>

<div id=”footer”> . . . </div>

</div>

</body>

note div’scousinisthespanelement,whichisageneric,inlinecontainerwithnosemanticmeaning.


DeprecatedAttributesn align:ObsoleteinHTML5.alignispresentationalinnature,soinstead

usetheCSStext-alignproperty(withavalueofcenter,justify,left,orright)toalignadiv’scontent.

HTML5andthedivElementYou’llindfewerinstancestousedivinHTML5becausethatversionofthelanguagecontainsseveralcontainersthatdohavemeaning,suchasarticle,aside,header,footer,nav,andsection(seeChapter11).Usedivonlywhenasemanticelementisn’trequired.

h1,h2,h3,h4,h5,h6Aheading

Syntax <h1></h1> <h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

Attributes Core,I18n,Events,HTML5Only:Global

DescriptionTheh1–h6elementsrepresentcontentheadingsofvaryingdegreesofimportance.Theh1isthemostimportant,andtheh6istheleast.Eachheadingdescribesthecontentorfunctionalitythatfollows,whetherit’s


anarticle,asign-upform,amodulewithagroupoflinks,thetitleaboveanembeddedvideo,andsoon.

Yourh1–h6headingsareamongthemostimportantelementsinanyHTMLdocument,becausetheyareintegraltodeiningyourpage’soutline.Planthemwithoutregardforhowyouwantthemtolook;focusonwhatheadinghierarchyisappropriateforyourcontent.ThisbeneitsbothSEOandaccessibility.

Searchenginesweighyourheadingsheavily,particularlythelikesofh1.Screenreaderusersoftennavigateapagebyheadings,too,becauseitallowsthemtoquicklyassessapage’scontentwithouthavingtolistenthrougheverypieceofcontent.

Opinionsvaryconcerningwhetherit’sappropriatetoskipaheadinglevelinadocument—tomovefromh1toh3withinaparticularcontentarea,forinstance.Mostpeopleinthecommunitythinkyoushouldnotskipalevel,aviewIshare.Havingsaidthat,thereisnoirmruleineitherX/HTMLorHTML5aboutthis.

Bydefault,headingstypicallyrenderatasizecomparabletoitsimpor-tanceandinbold.However,aspreviouslynoted,don’tuseaparticularheadingleveljustbecauseyouwantittolookacertainway.YoucancontrolallofthatwithCSS.

Example:

<h1>This is a heading level one</h1>

<h2>This is a heading level two</h2>

<h3>This is a heading level three</h3>

<h4>This is a heading level four</h4>

<h5>This is a heading level five</h5>

<h6>This is a heading level six</h6>


Pleasenotethatthefollowingrenderingisn’ttoscale.

This is a heading level oneThis is a heading level two

This is a heading level three

This is a heading level four

This is a heading level five

This is a heading level six

DeprecatedAttributesn align:ObsoleteinHTML5.alignispresentationalinnature,soinstead

usetheCSStext-alignproperty(withavalueofcenter,justify,left,orright)toalignaheading’scontent.

tip Youareallowedtousemorethanh1perpage,thoughitisn’tcommontodosoandismostlydiscouragedinX/HTMLbecausetheusecases

arelimited.Google’sMattCuttshasgoneonrecordsayingGoogleallowsitwithoutasearchrankingpenaltyaslongasit’scontent-appropriateandwithinreason.However,youshoulduseh1moreofteninanHTML5document.Seethe“HTML5andtheh1–h6Elements”box.

tip You’lloftenseetheh1usedtowrapasite’slogo,butIdon’trecom-mendthispracticeinX/HTML.Saveyourh1forthemainheading(or

two)withinyourcontent.

HTML5andtheh1–h6ElementsHTML5’sarticle,aside,nav,section,andhgroupelementsgreatlyimpactthewayinwhichyouuseh1–h6headings.Pleaseseethe“HTML5’sDocumentOutline”sectionandtheelements’entriesinChapter11.


hrAhorizontalrule

Syntax <hr>or<hr />


DescriptionThehrelementdoesnotcontainanycontent;itrendersasahorizontalrule,actingasaseparator.

Example:

<p>This is a paragraph.</p>

<hr />

<p>This is another paragraph.</p>

Bydefault,useragentstypicallyrenderitasatwo-color(gray),2-pixel-highbarthatextendsthefullwidthofthecontentcontainerinwhichitsits.Thespaceaboveandbelowanhrtendstovaryamongbrowsers.

This is a paragraph.

This is another paragraph.

DeprecatedAttributesn align:ObsoleteinHTML5.UsetheCSSwidthand,optionally,margin

propertiestodictatethealignmentofanhrrelativetothecontentaroundit.

n noshade:ObsoleteinHTML5.ThisBooleanattribute,whenpresent,turnsoffthedefault“groove”appearanceofanhrbyrenderingthe


twolinesinonecolorinsteadoftwo.UseCSSinstead,suchashr{border:1pxsolid#999;},where#999representsthecolor.

n size:ObsoleteinHTML5.UsetheCSSheightpropertytodictatethesizeinstead.

n width:ObsoleteinHTML5.UsetheCSSwidthpropertytodictatethewidthinstead.

HTML5andthehrElementHTML5givesthehrmorecontextbyredeiningitas“aparagraph-levelthematicbreak,e.g.ascenechangeinastory,oratransitiontoanothertopicwithinasectionofareferencebook.”

htmlDocumentrootelement

Syntax <html></html>Attributes I18n,HTML5Only:Global,manifest

DescriptionThehtmlelementistherootelementofeveryHTMLdocument;allotherelementsarecontainedwithinit.TheopeninghtmltagshouldbeprecededbyavalidDOCTYPE.

Example(typicalHTML4Strictdocument):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">


<html lang="en">

<head>

. . .

</head>

<body>

. . .

</body>

</html>

Thelangattributesetsthebaselanguagefortheentiredocument.ThestructureremainsthesameastheexampleforotherversionsofHTML,exceptfortheDOCTYPEand,insomecases,theattributesonhtml.PleaseseeChapter1formoreinformationaboutlang,thehtmlelement’sotherattributes,andDOCTYPEoptions.

DeprecatedAttributesn version:ObsoleteinHTML5.Donotusethisattributesinceitprovides

redundantinformationastheDOCTYPEregardingtherequiredDTDversion.

HTML5andthehtmlElementIfthepreviousexamplehadbeenanHTML5document,everythingwouldbethesameexcepttheDOCTYPEwouldbe<!DOCTYPEhtml>.

AttributesinDetailn manifest=”URL”:Thisoptionalattributecontainsavalidnon-

emptyURLthatpointstothedocument’sapplicationcachemani-fest.HTML5providesthemeanstorunofflineWebapplications



HTML5andthehtmlElement(continued)

(applicationcanmeanarobustapplicationorjustahandfulofHTMLpages;itdoesn’tmatter).Theapplicationcachemanifestliststheilesanapplicationneedstooperatewhendisconnectedfromthenetwork.Thebrowsersavesacopyoftheileswhenyouaccessthesiteonline.DetailsaboutofflineWebapplicationsarebeyondthescopeofthisbook,butyouspecifytheattributelikethis:<html manifest=”myapplication.manifest”>

Pleasenotethatabaseelementhasnoeffectonresolvingarela-tiveURLinthemanifestattributesincemanifestisprocessedbeforebaseappears.

AnHTMLdocument’sheadelementcontainsimportantinformationaboutthepage,linkstoexternalresourcessuchasstylesheets,andembeddedstyles,whennecessary.Plus,whatyouincludeinyourpage’sheadimpactssearchengineoptimization(SEO).

Eachoftheelementsdescribedinthischaptermayappearonlyinthehead,exceptstyle,whichhasanexceptioninHTML5.

note Thescriptelementmayalsoappearinthehead;however,it’sbesttoincludeitattheendofyourpagejustbeforethe</body>endtag

wheneverpossible.

DocumentHead

3


baseDocument’sbaseURI

Syntax <head> <basehref="">or<basehref=""/></head>

Attributes href,target,HTML5Only:Global

DescriptionThebaseelementdeinesthepage’sabsoluteURIfromwhichrelativepathstoexternalresourcesareresolved.(Externalresourcesincludeassetssuchasimages,JavaScriptiles,andstylesheets,aswellaslinkstootherpagesandpathstoserver-sidescriptsthatprocessforms.)basemustbedeinedinthedocumentheadbeforeanyelementthatcallsuponanexternalresource,andtherecanbeonlyonebaseelementperpage.Ifbaseisnotdeined,thepage’sbaseURIdefaultstothecurrentpage.MostpagesontheWebdon’tdeinebasebecausethedefaultbehavioriswhatisdesired.

AttributesinDetailn href="uri":Deinesthedocument’sbaseabsoluteURI.n target:Usedtosetthebasetargetforlinksandformactionsindocu-

mentswithframeoriframeelements.PleaseseetheframeentryinChapter10formoreinformation.

It’simportanttonotethatbaseimpactstheURIsonlyforthepageinwhichitappears.Forinstance,ifyoudeinebackground-image: url(../img/arrow.png)inanexternalstylesheetthatisloadedbyapagewithbasedeined,thepathtotheimageisunaffected.Similarly,

Part2:HTMLElementsandGuidance Chapter3:DocumentHead 45

baseinaparentdocumentdoesnotaffectthepathswithinaniframe’sdocument.Lastly,theobjectelement’scodebaseattributetakesprece-denceoverbase.

Theeasiestwaytounderstandhowbaseworksistoseeexamplesbothwithandwithoutit.Let’ssayyou’vecreatedthefollowingpageathttp://www.myvacationpics.com/2009/.

Example1(withoutbasedefined):

<head>

. . .

<link rel="stylesheet" href=”../css/global.css”

type="text/css" />

</head>

<body>

. . .

<p>

<img src=”image/kauai/thumbnail_volcano_01.jpg”

width=”400” height=”300” alt=”Kauai volcano” />

<a href=”volcanoes/kauai.html”>Kauai Volcano Pics</a>

</p>

. . .

</body>

Example1isyourtypicalHTMLpage—thepathstotheexternalassetsareexactlyhowtheyappearinthecode.Thatis,thepathstothestylesheet,thevolcanoimage,andthepagetoviewmorepicturesarerelativetotheHTMLpage’slocation,whichisinthe/2009/directory.

Now,let’sapplyabasevaluewhileleavingtherestofthecodeexactlyasitwasinExample1.Remember,youaren’tmovingthepagetoadifferentfolder,justaddingbasetothepage.


Example2(withbasedefined):

<head>

. . .

<base href=”http://www.myvacationpics.com/2010/” />

<link rel="stylesheet" href=”../css/global.css”

type="text/css" />

</head>

<body>

. . .

<p>

<img src=”image/kauai/thumbnail_volcano_01.jpg”

width=”400” height=”300” alt=”Kauai volcano” />

<a href=”volcanoes/kauai.html”>Kauai Volcano Pics</a>

</p>

. . .

</body>

WiththebasedeinedinExample2,allURIsinthepagearenowrelativetothebasehrefvalue,meaningthepagetreatsthemasifit’sinthe/2010/directoryeventhoughitstilllivesin/2009/.Herearethepathsastheyappearinthecodeandwherethepagelooksforthemnowthattheyresolvetonewlocations:n ../css/global.cssresolvestohttp://www.myvacationpics.com/css/

global.css(thisdidn’tchangebecauseofthepath).n image/kauai/thumbnail_volcano_01.jpgnowresolvestohttp://

www.myvacationpics.com/2010/image/kauai/thumbnail_volcano_01.jpg(insteadofhttp://www.myvacationpics.com/2009/image/kauai/thumbnail_volcano_01.jpg,asinExample1).

n volcanoes/kauai.htmlresolvestohttp://www.myvacationpics.com/2010/volcanoes/kauai.html(insteadofhttp://www.myvacationpics.com/2009/volcanoes/kauai.html,asinExample1).


headInformationaboutdocument

Syntax <head> ... </head>

Attributes I18n,profile*,HTML5Only:Global

DescriptionTheheadelementisrequiredineachHTMLdocument.Ithousesahand-fulofotherelementsthatprovideinformationaboutthepage,suchasthecharacterencoding,title,linkstostylesheets,andmetadataforsearchengines.Itdoesnotcontainpagecontent(asthebodyelementdoes)thatuseragentsgenerallyrender,thoughtheymaysurfacetheinformationinotherways(suchaswithtitleonthetitlebar).

Theelementsthatheadmaycontainarebase,link,meta,script,style,andtitle.Allaredeinedinthischapterexceptscript,whichiscoveredinChapter9.Also,alloftheseexceptscript(andstyleinHTML5)mayappearonlyinthehead.

TheheadimmediatelyfollowstheDOCTYPEandthehtmlelement,asshownintheexample.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head>



<title>Sunny renewable green energy services - Solar

Panels Galore</title>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8" />

. . . [other meta elements] . . .

<link rel="stylesheet" type="text/css"

href="/common/css/base.css" />

</head>

<body>

. . .

AttributesinDetailn profile="uri":*ObsoleteinHTML5.AsImentioninthischapter’sentry

forthemetaelement,youmaycreateyourownmetaelementssimplybyincludingtheminyourpage.Youmayalsocreateametadataproile,whichisdocumentationofametadatastandard,andpointtoitwiththeprofileattributeonthehead.It’sawayofinforminguseragentsthatsomeofyourmetaelementsarederivedfromthatproile.Includingtheprofileattributedoesnotchangethebehaviorofthemetaelements,however.Afulldiscussionofproilesisbeyondthescopeofthisbook,butyoucanreadmoreathttp://www.w3.org/TR/html401/struct/global.html#profiles.Also,twosuchproilesareDublinCore(http://dublincore.org/documents/dces/andhttp://dublincore.org/resources/faq/)andXFN(http://gmpg.org/xfn/11andhttp://microformats.org/wiki/xfn).


HTML5andtheheadElementHTML5declarestheprofileattributeobsoleteandinitsplacerequestsyouregisterextensionstothepredeinedsetofmetadatanames(application-name,author,description,andgenerator,asdiscussedinthemetaentryinthischapter).Youmayregisterexten-sionsathttp://wiki.whatwg.org/wiki/MetaExtensions.

linkLinktoarelatedresource

Syntax <linkrel=""href="">or<linkrel=""href=""/>

Attributes Core,I18n,Events,charset*,href,hreflang,media,rel,rev*,target*,type,HTML5Only:Global,sizes

DescriptionThelinkelementdeinesalinkbetweenthecurrentdocumentandanotherresource,butinamuchdifferentwaythantheaelement.Likea,linkusesthehrefattributetodeinethelocationoftheresource,butlinkdoesn’tdisplayactionabletextinyourpagecontent.Instead,itprovidesinformationforuseragentstoactupon.Apagemayhavemulti-plelinkelements,andtheymustalwaysappearintheheadelement.

Therearetwocasesforusinglink:n Tolinktoaresourcethataffectsthecurrentview,suchasastylesheet

orfavicon.PleaseseeExamples1–4.n Tolinktoaresourcethatdoesn’taffectthepagebutthatisrelated

toit,suchasaversioninanalternateformat(RSSorAtomfeed,PDF,


andsoon)orlanguage,ortolinktoaresourcethatispartofthesameseriesofdocuments,suchaschapterssplitintomultipleHTMLiles.Again,theselinksarenotdisplayedinyourpagecontent,butasearchenginemayindextherelateddocuments,andinthecaseofafeed,anRSSreaderdisplaysthelinkedXMLcontent.PleaseseeExamples5–7.

Thebestwaytogetafeelforlinkistolookatsomeexamples.

LinkingtoStyleSheetsoraFaviconThemostcommonuseforlinkbyfaristoloadastylesheet.

Example1(loadastylesheet):

<head>

. . .

<link rel="stylesheet" href="/common/css/base.css"

type="text/css" media="screen, print" />

. . .

</head>

tip

Youmayhaveseenstylesheetsloadedwith@import,too.However,usinglinkisabestpractice,primarilybecausestylesheetsloadas

fastasorfasterthan@importinarangeofscenarios.

Itdoesn’tmatterinwhatordertheattributesappear,butthesequenceinExample1isprettystandard.Also,it’scustomarytoincludethetypeattributeasshownwheneveryouloadastylesheet,andrelwillalwaysbeeither“stylesheet”or“alternatestylesheet”(seeExample3).Thehrefandmediaattributeswillvary,however.hrefprovidestheURI(anabsolutepath,inthiscase)tothestylesheet,andmediadeinesinwhatmediathestylesheetshouldbeappliedtothepage(screenlayoutandwhenprinting,intheexample).Pleasesee“AttributesinDetail”formoreoptions.


Nowlet’sloadtwostylesheets.

Example2(loadtwoormorestylesheets):


type="text/css" media="screen" />

<link rel="stylesheet" href="/common/css/print.css"

type="text/css" media="print" />

Usetwoormorelinkelementsifyouhaveseparatestylesheetsfordisplayingyourpageon-screenandprinting(orotherpurposesasdeinedbymedia).Thisisprettycommon,sincethereareoftenelementsyouwantto“turnoff”forprinting,suchasnavigationandads.

Theinalstylesheetexampleshowshowtoloadanalternatestylesheet,whichyouusetoprovideadifferentpresentationthanyourdefaultlayout.Itcouldbeforadifferenttheme(lightondarkversusdarkonlight),changingthedimensions,andsoon.

Example3(loadanalternatestylesheet):


type="text/css" media="screen" title="Default" />

<link rel="stylesheet" href="/common/css/print.css"

type="text/css" media="print" />

<link rel="alternate stylesheet" href="/common/css/theme-

➥ light-on-dark.css" type="text/css" media="screen"

title="Light on Dark" />

Yourpagemayhaveseveralalternatestylesheets.Analternatestylesheetdoesn’taffectyourpagebydefault.Somebrowsersallowyoutoselectitfromamenuaslistedperitstitleattribute.Forinstance,inFirefox’sView>PageStylemenu,you’dseetheDefaultandLightonDarkthemestochoosefromforExample3.Sincenotallbrowsersprovidea


meanstoselectanalternatestylesheet,developersoftenimplementaJavaScriptstyleswitcher(searchonlineformoredetails).

Nowit’stimetomoveontothesecondmostfrequentuseoflink:displayingafavicon.

Example4(displayafavicon):

<link rel="shortcut icon" href="/img/favicon.ico"

type="image/x-icon" />

Afaviconisthesmallsite-speciiciconyou’lloftenseeinabrowser’saddressbarbeforetheURL,nexttoabookmark/favorite,onatab(dependingonthebrowser),oronadesktopshortcut(dependingontheOS).Iffavicon.icolivesatyoursiteroot,youtypicallydon’tneedtouselink,thoughyoumayprefertojustbeexplicit.Notethatifyouuserel="icon"insteadofrel="shortcuticon",InternetExplorerwon’tloadit.(Evenso,olderversionsofIEexhibitsomeinconsistentfaviconbehavior.Youmayneedtobookmarkthepagebeforethefaviconwillshow.)

LinkingtoRelatedDocumentsTheremainingexamplesdemonstrateusinglinktopointtorelateddocumentsthatdon’timpactthepage’slayout.

Example5(pointtoRSSorAtomfeed):

<link rel="alternate" type="application/rss+xml" href=

➥ "topstories.xml" title="Top Stories -- YourDomain.com" />

ThelinkformatinExample5tellsanRSSreaderwheretolocateyourfeed.Notethevaluesfortherelandtypeattributes.Youmayhavemorethanonefeedperdocument,suchasonelinkfornationaltopstoriesandanotherforregionalnews.ForanAtomfeed,specifytype="application/atom+xml"instead.


Example6(pointtoalternatelanguage):

<link rel="alternate" type="text/html" hreflang="es"

href="spanish.html" title="Article in Spanish" />

Ifyouprovidealinktoanalternatelanguageversionofthedocument,asinExample6,asearchenginemayindexit.Notetheuseofthehreflangattribute.typeissettotext/htmltorelectthatthehrefpointstoadocumentwiththatcontenttype.

Example7(pointtodocumentsinaseries,andprefetching)

<link rel="start" href="step-one.html" />

<link rel="prev" href="step-four.html" />

<link rel="next" href="step-six.html" />

Let’ssayyou’vewrittenaseriesofpagescalled“TheSevenStepstoCreatingYourOwnLuck.”Ifstep-five.htmlwerethecurrentdocument,itcouldincludethelinkelementsshowninExample7,whichinformsearchenginesabouttheseries.rel=”start”referstotheirstdocu-mentintheseries.

Furthermore,Firefoxprefetchesarel=”next”href.ThismeansthatinExample7,theassetsforstep-six.htmlareloadedbehindthescenesasyou’rebrowsingthecurrentpage.Youdon’thavetoprefetchanentirepage,though.Thehrefattributecouldjustaseasilypointtoanimageorastylesheet.Theformerwouldbehandyifthecurrentpageisoneofseveralwithinaphotogallery,forexample.

note Firefox3.0+alsosupportsrel=”prefetch”,whichistheHTML5waytospecifyaresourceforprefetching(HTML5supportsnext,too).Other

browsersmayfollowsuit.

tip Learnmoreaboutprefetchingathttps://developer.mozilla.org/en/Link_prefetching_FAQ.


AttributesinDetail(Seethe“HTML5andthelinkElement”boxforadditionaldetails.)n charset:*ObsoleteinHTML5.Thisspeciiesthecharacterencodingof

thelinkdestination.Pleasesee“CharacterEncoding”inChapter1formoredetails.

n href="uri":Thisdeinesthelinkresourcelocation.PleaseseetheaelementinChapter5foradescriptionofvariousURIpathsthatareavailabletoyou.

n hreflang="langcode":Notoftenused,thisindicatesthebaselanguageofthehref’sdestination,muchinthewaythelangattributespeciiesthelanguageofotherHTMLelements.Hence,youmayusehreflangonlywhenhrefispresent.SeeExample6.

n media:Whenrelissettostylesheet,thiscomma-separatedlistindi-catesthemediaforwhichthestylesheetapplies(seeExamples1–3).Ifyouleaveoutmedia,thevaluetypicallydefaultstoallinbrowsers,eventhoughHTML4declaresitshouldbescreen.Thefollowinglistincludesthepossiblemediavalues.screenandprintenjoywidesupportand,withall,areusedthemostbyaverylargemargin.Supportfortheothersvaries.Pleasealsoseethe“HTML5andthelinkElement”box.– all:Foralldevices.– aural:Forspeechsynthesizers.– braille:ForBrailleassistivedevices.– handheld:Forhandhelddevices,butfewsupportit.Typically,you’ll

usescreeninsteadwhendesigningformobile.


– print:Forprintingandprintpreview.– projection:Forprojectorsandsimilarviews.Opera’sprojection

mode,OperaShow,supportsit.– screen:Fortypicalcomputerscreensandmodernmobilebrowsers.

ThisisthevaluethattellsaWebbrowsertorenderastylesheet.– tty:Formediausingaixed-pitchcharactergrid,suchasteletypes.– tv:Fortelevision-typedevices.

n rel="link-types"andrev="link-types":*revisobsoleteinHTML5.relandrevhaveoppositemeaningsandareusedinconjunctionwithhref.Therelattributeindicatestherelationshipfromthecurrentdocumenttothelinkedresource(seeExamples1–7).rev(“reverse”)indicatestherelationshipfromthelinkedresourcetothecurrentdocument.(PleaseseetheaelementinChapter5forafulldescriptionofthedifference.)

n target:*NotvalidwithStrictHTML4andXHTML1DOCTYPEs.ObsoleteinHTML5.targetspeciiesthenameoftheframeforwhichthelinkapplies.HTMLprovidesfourspecialtargetnameswithspeciicbehav-ior:_blank,_self,_parent,and_top.PleaseseeChapter10formoredetails.

n type=”content-type”:Tellstheuseragentthecontenttypeofthecontentatthelink’sdestination.Itisonlyadvisory.


HTML5andthelinkElementHTML5requireslinktohavearelattribute,anitempropattribute,orboth.Pleasesee“Attributes”inChapter1concerningitemprop,anHTML5globalattribute.

HTML5alsoallowslinkinsideanoscriptelementthat’sinthehead.

AttributesinDetail

HTML5expandsthevaluesformediaandincludesthesizesattribute.n media:Thisattribute’slistofvaluesisthesameasinX/HTML

exceptthatitincludesmediaqueries.InHTML5,media’svaluemustbeavalidmediaquerylistfromtheMediaQueriesspecii-cation(http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/#syntax).mediaisallowedonlyifhrefispresent.

n sizes:Thisdeinesthesize(s)ofalinkedicon(s).sizes="all"meanstheiconisscalable,suchasanSVGimage.Otherwise,provideaspace-delimitedlistofsizes(ifmorethanone)inWIDTHxHEIGHTformat,whereeachvalueisanon-negativeinteger.

Examples:

<link rel="icon" href="some-icon.svg" sizes="any"

type="image/svg+xml">

<link rel="icon" href="favicon.png" sizes="16x16"

type="image/png">

<link rel="icon" href="icon-set.icns" sizes="16x16 128x128

➥ 256x256">


metaDocumentmetadata

Syntax <head> <meta>or<meta /></head>

Attributes I18n,content,http-equiv,name,scheme*,HTML5Only:Global,charset

DescriptionViewsourceonvirtuallyanyWebpage,andyou’reboundtoseeahand-fulofmetaelements—typicallycalledmetatags—intheheadelement.metaspeciiesinformationaboutthecurrentHTMLdocumentinaname-valuepairformat,primarilyforthebeneitofbrowsers,searchenginespiders,andotheruseragents.Metadatadoesnotappearinyourpage’scontent.There’snolimittothenumberofmetaelementsyoucanincludeinyourpageaslongasallofthemareinthehead.

Example1showsarguablythemostimportantmetaelement.

Example1(declaringthecontenttype):

<head>

<title>. . .</title>


➥ charset=utf-8" />

. . .

</head>

Thenameinthename-valuepairinthisexampleisthehttp-equivattribute,whilecontent,asalways,isthevalue.Includethismeta


elementineachofyourpagestodeineyourdocument’scharacterencoding(UTF-8,inthiscase).It’sstandardpracticetomakeitoneoftheirstelementsinsidethehead,eitherjustbeforeorjustafterthetitle.(HTML5changesthesyntaxforthisusageofmeta.Pleaseseethecharsetattributeinthe“HTML5andthemetaElement”box.)

tip

It’simportanttoaddaContent-Typemetaelementtoyourdocumentssouseragentscandetectthedocument’scharacterencoding.Ifyou

excludeit,youruntheriskofyourusersseeingunreadabletext,particularlyonamultilingualsite.Formoreinformation,seehttp://www.w3.org/International/tutorials/tutorial-char-enc/.

Typically,metaelementsaregroupedtogether,thoughtheydon’thavetobe.Andthere’snosetlistofmetaelementname-valuepropertiesfromwhichtochoose.You’reallowedtocreateyourownsimplybyinclud-ingtheminyourpage(oryoucancreatethemmoreformally;seetheheadelement’sprofileattributeinthischapter).But,thefollowingareamongthemostcommonones,andtheydeineinformationthatsearchenginesusetovaryingdegrees.

Example2(commonmetaelements):

<head>

<title>Sunny renewable green energy services - Solar

Panels Galore</title>


➥ charset=utf-8" />

<meta name="description" content="Solar Panels Galore

provides consulting and installation services for

industrial, commercial and residential active and

passive solar panel systems." /> (continuesonnextpage)


tip

MicrosoftintroducedtheX-UA-CompatibleheaderinIE8toallowyoutodictatetheIEversionyourpageshouldrenderas.Forexample,this

tellsittobehavelikeIE7’sstandardsmode:<meta http-equiv="X-UA-Compatible" content="IE=7" />

Ofcourse,it’sbesttomakeyourpageworkinthelatestversionofIEinsteadofforcingittobehavelikeIE7,buttheremaybetimeswhenthismetaelementisnecessary.Learnmoreaboutthemodesathttp://www.htmlfiver.com/extras/meta/.

AttributesinDetailn content:Thisisthe“value”inthename-valuepairofametaelement.n http-equiv:Alsocalledapragmadirective,thisbehaveslikeanHTTP

headersentbytheserver.Alongwiththenameattribute,http-equivisoneofthe“names”inthename-valuepairofametaelement.Itmustbepairedwithcontent.SeeExample1.

n name:Asyouwouldexpect,thisrepresentsa“name”inthename-valuepairofametaelement.Itmustbepairedwithcontent.

n scheme:*ObsoleteinHTML5.Youmaypopulateschemewithtextofyourchoosingthatclariiesameta’scontent.Forinstance,<metaname="date"content="11-05-2010"scheme="DD-MM-YYYY"/>explainsthedatereferstoMay11,notNovember5.

HTML5andthemetaElementEachmetaelementmustincludethecharset,http-equiv,itemprop,ornameattribute,butnotmorethanone,andthecontentattributeisrequiredintandemwithallbutcharset.

AttributesinDetailn charset:ExclusivetoHTML5onmeta,charsetspeciiesthedocu-

ment’scharacterencoding.Youmaydeineitonlyonceinapage.TheContent-TypemetasyntaxinExample1technicallyisstillallowedinHTML5,butthepreferredformatishighlightednext,whichIrecommendyouuse.Furthermore,HTML5requiresittoappearwithintheirst512bytes(thatis,characters)ofyourcode.You’llalwaysbesafeifyouputitbeforethetitle.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset="utf-8"/> 

<title>. . .</title>

. . . [other meta elements] . . .

. . .

</head>

. . .

n name:HTML5deinesasetoffourmetadatanames,thoughyoustillmayuseothers.Thehttp://wiki.whatwg.org/wiki/MetaExtensionspagedocumentsextensionstothispredeinedset,andyoucanregisteryourownbyaddingthemtothewiki.Twoofthepredeinednamesareauthoranddescription,whichyouusejustasIshowedinExample2.Theothertwoareasfollows:– application-name:DeinesashortWebapplicationname,but

useitonlyifyourpagerepresentsaWebapplication;here’san(continuesonnextpage)


HTML5andthemetaElement(continued)

example:<metaname="application-name"content="InventoryManager">.Thisattributemayappearonlyonceinapage.

– generator:Speciiesthenameofthetool,ifany,usedtogener-atethedocument;here’sanexample:<metaname="generator"content="Dreamweaver">.Donotincludeitifyouhand-codeapage.

n http-equiv:HTML5formallydeinesfourstandardvalues:– content-language:HTML5discouragesyoufromusingthisand

recommendsthelangattributeonthehtmlelementinstead.– content-type:Thisdeinesthedocument’scontenttype,as

showninExample1,butusethecharsetattributeinsteadforHTML5.

– default-style:Thissetsthenameofthedefaultalternatestylesheet.

– refresh:Thisinstructsapagetorefreshafteraspeciiedperiodoftime.Yourpagemayincludeonlyoneinstance.Ametarefreshtakesoneoftwoforms:anumberofsecondsoranum-berofsecondsandaURL.Forexample,ifyourpagewereasportsscoreboard,youwoulddirectittorefreshevery90secondswith<metahttp-equiv= "refresh"content="90">.IncludeaURLifyouwanttorefreshtoadifferentpageafterthespeciiednumberofseconds.Ausecaseforthisisaphotogallerythatautocyclesevery10seconds:<metahttp-equiv="refresh"content="10;url=photo-06.html">.However,avoidusingthisifyou’vemovedcontentfromonelocationtoanotherandwanttoredirectuserscomingintotheoldlocationviaasearchengineorbookmark.Usea301Redirectinstead(pleasesearchonlineformoreinformation.)


styleAnembeddedstylesheet

Syntax <head> <styletype=”text/css”> ... </style></head>

Attributes I18n,media,title,type,HTML5Only:Global,scoped

DescriptionInmostcases,it’sbesttoputyourCSSinanexternalstylesheetandlinktoit,becauseit’seasiertomanageandtakesadvantageofcachingtospeedupyourpages.ThestyleelementisforthoseoccasionswhenyouwanttoembedCSSinyourpage.Yourpagemayincludemultiplestyleelements,buttheymayappearonlyintheheadelement,exceptinHTML5(seethe“HTML5andthestyleElement”box).

IfyouweretodeinethesameCSSselectorineachofthethreestylesheetsintheexamplethatfollows,theorderinwhichtheyappeardeter-mineswhichdeinitionisappliedtothepage.Forinstance,ifthelinkedbase.cssintheexamplespeciiesp{font-size:1em;color:#333;},thentheruleinthestyleblockoverwritesthefont-sizevalue.Inturn,subpage.cssoverwritesanyconlictingp{...}propertyvaluesinbothbase.cssandthestyleblockbecauseit’slast.Theexceptionisifthemediaattributediffersonanyofthethree.Ifthestyleblockhadmedia="print"instead,itsruleswouldnotimpactbase.css,andsubpage.csswouldonlyimpactbase.css.

Example:

<head>

. . .

<link rel="stylesheet" href="base.css" type="text/css"

media="screen" />



<style type="text/css" media="screen">

p {

font-size: 1.2em;

}

. . .

</style>



<link rel="stylesheet" href="subpage.css" type="text/css"

media="screen" />

</head>

AttributesinDetail(Pleaseseethe“HTML5andthestyleElement”boxformoreattributeinformation.)n media:Thisoptionalcomma-separatedlistindicatesthemediafor

whichthestylesheetapplies.Ifyouleaveoutmedia,thevaluetypicallydefaultstoallinbrowsers,eventhoughHTML4declaresitshouldbescreen.Pleaseseethelinkelemententryinthischapterformoredetails,includinganexplanationofpossiblemediavalues.

n title="text":Thetitleattributeissupposedtobeadvisoryinthiscontext,butitdoesimpactbehaviorinsomebrowsers.Namely,ifa


titleisspeciied,someversionsofChrome,Firefox,andSafaritreatthestyleblocklikeanalternatestylesheetanddon’trenderthestylesunlesstheuserselectsthealternatestylesheet.OnlyFirefoxmakesiteasytochooseit(View>PageStyle).Seethe“HTML5andthestyleElement”boxformore.So,usetitleonlyifyouintendtoimplementaJavaScriptstyleswitcher(searchonlineformoredetails).

n type:"Required."Thisattributewithavalueoftext/cssmustappearoneachstyleelement.

tip Pleaseseethelinkelementinthischapterregardingloadinganexternalstylesheet.

HTML5andthestyleElementHTML5alsoallowsstyleinsideanoscriptelementintheheadaswellasmostelementswiththescopedattributeinthedocument’sbody.

AttributesinDetail

HTML5hasanadditionalattribute,scoped,andgivestitlespecialmeaningonstyle.n scoped:UnlikeX/HTML,HTML5allowsoneormorestyleelements

inthebodyelementaslongasthisBooleanattributeispresent.Andifitispresent,itmeansthestyleelementappliestoitsparentelementandtheparent’schildnodesonly.Inthefollowingexam-ple,onlythesecondarticleelementanditschildrenreceivetherulesdeinedinthescopedstyleelement.However,mixingCSSandHTMLisnotagoodpracticeandpresentsmaintenancehead-aches,soIrecommendyouuseascopedstyleelementonlyifyouhaveaspecialcasethatcan’tbesolvedbyanexternalstylesheet.


HTML5andthestyleElement(continued)

Example:<body>

. . .

<article>

<h1>This is not affected</h1>

<p>This is not affected.</p>

</article>

<article>

<style type="text/css" scoped>

article { padding: 25px; }

h1 { color: blue; }

p { color: red; }

</style>

<h1>This is blue.</h1>

<p>This is red.</p>

</article>

. . .

</body>

n title:Ifatitleispresent,itdeinesthestyleelementasanalternatestylesheet.


titleThedocument’stitle

Syntax <head> <title></title></head>

Attributes I18n,HTML5Only:Global

DescriptionThetitleelementdeinesadocument’stitleandmaycontainbothplaintextandcharacterentitiesbutnotmarkup.ItisrequiredforeachHTMLdocument(exceptHTML5emails)andmustbedeinedwithinadocument’sheadelement,andonlyonce.ThetitlevaluedisplaysatthetopofthebrowserwindowratherthanintheWebpage.

Thetitletextalsoservesasthebookmarktitlewhenyoubookmarkapage,unlessyouedititmanually.Asabestpractice,choosetitletextthatbrielysummarizesadocument’scontent.Thisbeneitsbothscreenreaderusersandyoursearchenginerankings(pleaseseethe“ThetitleElementandSEO”box).Secondarily,indicateyoursite’snameinthetitle.

Irecommendyougetyourtitle’scoremessageintotheirst60characters,includingspaces,becausesearchenginesoftencutthemoffintheirresultsataroundthatnumber(asabaseline).Browsersdisplayavaryingnumberofcharacters,butmorethan60,inthetitlebarbeforecuttingoffthetext.

Example:<head>

<title>Photos of the Kauai Volcano | MyVacationPics.com

➥ </title>

. . .

</head>


note Thetitleelementshouldnotbeconfusedwiththetitleattribute(pleasesee“Attributes”inChapter1).

ThetitleElementandSEOManydevelopers—evenwell-intentioned,fairlyexperiencedones—oftengivelittleconsiderationtothetitleelement.They’llsimplyputthenameoftheirsiteandthencopyitacrossallHTMLpages(orevenworse,leavethetitletexttheircodeeditorinsertsbydefault).However,ifoneofyourgoalsistodrivetrafictoyoursite,you’dbedoingyourselfandyourpotentialreadersahugedisservicebyfol-lowingsuit.

Searchengineshavedifferentalgorithmsthatdetermineapage’srankandhowitscontentisindexed;universally,though,titleplaysakeyrole.First,mostsearchengineslooktothetitleelementforanindicationofwhatapageisaboutandindexapage’scontentinsearchofrelatedtext.Aneffectivetitlefocusesonahandfulofkey-wordsthatarecentraltoapage’scontent.

Second,searchenginesusethetitleelementasthelinkedtitlethatappearsintheirsearchresultslistings.Ifyou’relikeme,andIsuspectthemajorityofusers,youscanthetitlesinthelistofsearchresultsirstwhenyou’retryingtodeterminewhichpageseemstomatchwhatyou’reseeking.Themoretargetedyourtitletext,themorelikelyitistoshowupintheresultsandbechosenbyauser.

SEOisadeeptopic,andIhighlyencourageyoutodomoreresearchonyourown.But,IhopethisgivesyoubothaglimpseintooneofSEO’skeycomponentsandtheincentivetocraftstrategictitleele-ments,ifyouaren’tdoingsoalready.

HTMLaffordsyouthreelisttypes:deinitionlist(dl),orderedlist(ol),andunorderedlist(ul).Iexplaineachindepthintheirrespectiveentriesinthischapter.

ListsareoneofthemostcommonlyusedsemanticelementsacrosstheWeb.Thisisparticularlytrueofunorderedlists,whichareubiquitousasthechoiceformarkingupnavigationandmanyothergroupsoflinks.

BeforeIexplaineachlist-relatedelement,I’lldiscussacapabilitythatiscommontoalllists:nesting.

Lists

4

NestedListsListscanbenestedwithinotherlists,asshowninthefollowingexamplethatdetailsasequencedplantorelocate.Inthiscase,it’sanorderedlistinsideanotherone,thoughyoucannestanytypeoflistwithinanyothertype(seethedlentryinthischapterforarelatednote).

<ol>

<li>Take an Italian Berlitz course.</li>

<li>Move to Italy.



<ol>

<li>Have a yard sale.</li>

<li>Pack what’s left.</li>

<li>Ship boxes.</li>

<li>Jump on plane.</li>

</ol>



</li>

<li>Say “Ciao!” upon landing.</li>

</ol>

Thisdisplaysbydefaultinmostuseragentsasshownhere:

1. Take an Italian Berlitz course.

2. Move to Italy.

1. Have a yard sale.

2. Pack what’s left.

3. Ship boxes.

4. Jump on plane.

3. Say “Ciao!” upon landing.

Part2:HTMLElementsandGuidance Chapter4:Lists 71

There’sonesimplebutimportantruletofollowwhennestinglists:Youmustinsertthenestedlistinsideanlielement(orddelementinthecaseofadeinitionlist)oftheparentlist.Thatis,puttingthelistalongsideaparentliorddisinvalid.

Also,althoughthisexampleshowsonlyonelevelofnesting,youcanalsonestalistinsideanestedlist(andanotherinsidethatone,adinfinitum).Forexample,Icouldnestanunorderedlist(aul,asyou’llrecall)inthe“Packwhat’sleft”litolistallitemstopack,irrespectiveofpackingorder.

dd

Adeinitiondescription

Syntax <dd></dd>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsetheddelementtodescribeacorrespondingterm(dt)inadefinitionlist(dl).Theddfollowsthedtandmaycontainblock-levelcontent,suchasparagraphs(p),orderedlists(ol),unorderedlists(ul),anotherdeini-tionlist,andmore.

note Ifyourddcontentislongerthanoneparagraph,nestpsintheddratherthansplittingthetextamongmultipleddswithoutps.


Example:

<h2>1936 Summer Olympics 100m Men’s Results</h2>

<dl>

<dt>Gold medal winner</dt>

<dd>Jesse Owens (USA)</dd>

<dt>Silver medal winner</dt>

<dd>Ralph Metcalfe (USA)</dd>

<dt>Bronze medal winner</dt>

<dd>Tinus Osendarp (NED)</dd>

</dl>

Thesimplestarrangementwithinadlisonedtgroupedwithonedd,asshowninthepreviousexample.(I’veseparatedeachgroupwithablanklineforclarity;itdoesn’timpacttherendering.)Thedlentryinthischapterelaboratesontheseandotherconigurations,deinitionlistsingeneral,andtheroleofdd.

Useragentstypicallyrenderadeinitionlistbydefaultlikeso(althoughyoucanchangeitwithCSS):

Gold medal winner

Jesse Owens (USA)

Silver medal winner

Ralph Metcalfe (USA)

Bronze medal winner

Tinus Osendarp (NED)


dl

Adeinitionlist

Syntax <dl> <dt></dt>

<dd></dd>

. . .

</dl>


DescriptionUsethedefinitionlist(dl)todeineaterm(representedbyoneormoredtelements)anditsdescription(representedbyoneormoreddelements).Thedtmaycontaininlinecontentonly,whileaddmaycontainblock-levelcontent.

Thoughit’sanaturalitfordeiningwordslikeinadictionary,thedlisnotconstrainedtosuchnarrowusage.Asyouwillsee,thereissomelevityconcerningwhatconstitutesatermandadescription,aswellasdifferingopinionsaboutwhatis“legal.”

note Avoidusinga

dltomarkupdialogue(seethe“WhenCanYouUseaDefinitionList?HTML4MurkinessandHTML5Clarification”boxfor

moreinformation).

Thefollowingareseveralexamplesofhowtouseadeinitionlist.

Part2:HTMLElementsandGuidance

74

Example1:

<dl>

<dt>Boris Karloff</dt>

<dd>Best known for his role in <cite>Frankenstein</cite>

and related horror i lms, this scaremaster’s real name

was William Henry Pratt.</dd>

. . .

</dl>

note Adefinitionlistneednothavemorethanonedtandddgrouptoconstitutealist.

Example1isabasicdl.Allofthefollowingarrangementsarevalidforagroupofdtandddelementswithinadl:n Asingledtgroupedwithasingledd,asinthepreviousExample1

andasDirectorinthefollowingExample2.Thisisthemostcommonoccurrence.

n Asingledtgroupedwithmultipledds.SeeWritersinExample2.n Multipledtsgroupedwithasingledd.SeeExample3.n

Multipledtsgroupedwithmultipledds.SeethenotethatfollowsExample3.

Example2showstheirsttwoofthesebywayofalistofcreditsforthemovieAmélie(forallyouFrenchmoviefanatics).Italsodemonstrateshowtouseanesteddeinitionlist.

Example2:

<h3>Credits for <cite>Amélie</cite></h3>

<dl>

<dt>Director</dt> 

<dd>Jean-Pierre Jeunet</dd>

<dt>Writers</dt> 

<dd>Guillaume Laurant (story, screenplay)</dd>

<dd>Jean-Pierre Jeunet (story)</dd>

<dt>Cast</dt>

<dd>



<dl>

<dt>Audrey Tautou</dt> 

<dd>Amélie Poulain</dd> 

<dt>Mathieu Kassovitz</dt>

<dd>Nino Quincampoix</dd>

. . .

</dl>



</dd>

. . .

</dl>

note Iincludedtheblanklinebetweeneachgroupof

dtandddelementssoyoucouldseethegroupingsmoreexplicitly.It’snotrequiredinadefi-

nitionlistanddoesn’timpactitsrenderinginauseragent,soit’sentirelyuptoyouasanHTMLauthorwhethertoincludeit.

Useragentstypicallyrenderadeinitionlistbydefaultasshownnext(butyoucanalteritwithCSS).Notehowtheddtextinthenestedlistisindentedanotherstep.

Director

Jean-Pierre Jeunet

Writers

Guillaume Laurant (story, screenplay)

Jean-Pierre Jeunet (story)

Cast

Audrey Tautou

Amélie Poulain

Mathieu Kassovitz

Nino Quincampoix

Nowlet’slookatanotherexample.Althoughyoushouldn’trepeatthesamedtvalueinadl(forexample,Writersappearsonlyonceinthepreviousexample),youmayhavemultipledtsgroupedwithasingledd,asImentionedearlier.

Example3:

<h2>Deining words with multiple spellings</h2>

<dl>

<dt><dfn>bogeyman</dfn>, n.</dt> 

<dt><dfn>boogeyman</dfn>, n.</dt>

<dd>A mythical creature that lurks under the beds of small

children.</dd>


<dt><dfn lang=”en-gb”>aluminium</dfn>, n.</dt>

<dt><dfn>aluminum</dfn>, n.</dt>

. . .

</dl>

tip

NoticethatIusedthelangattributeheretodenotethataluminiumisintheBritishversionofEnglish.

Thisexampleusesadeinitionlisttodeinetermslikeinadictionary(themosttraditionaluseforadl).You’llnoticeIwrappedthetermsinadfnelement.Youmightthinkthisisredundant,butitcanbeappropriateifit’sconsistentwiththeproperusageofdfn.(PleaseseethedfnentryinChapter5formoredetails.)ThisapproachisencouragedbyHTML5asawaytodistinguishadlusedtodeinewordsindictionaryorglossaryformatfromadlusedforotherappropriatemeanslikeourmoviecredits.Althoughyou’reunlikelytoindreferencestothisapproachelsewhereforHTML4,too,Ithinkit’sappropriate.

note Anexampleofmultiple

dtsgroupedwithmultipleddswouldbeifinExample3bogeyman/boogeymanhadaseconddefinition.Seethedt

entryinthischapterforarelatedexample.

DeprecatedAttributesn compact:ObsoleteinHTML5.Thisattributeispresentationalinnature

sowasdeprecatedinfavorofusingCSS.Pleaseseetheolentryinthischapterformoreinformation.


WhenCanYouUseaDeinitionList?HTML4MurkinessandHTML5Clariication

HTML4hasbeencriticized,andrightfullyso,forbeingalittleunclearinitsdeinitionofthedeinitionlist.Ironic,yes.Asaresult,thedl’susehasbeenopentointerpretation.

Puristsarguethatitshouldbeusedonlyfordeiningtermslikeinadictionaryorglossary.However,HTML4doesnotdeinethedlsostrictly.Itopensthedoortootherusesbyreferringtotheddasa“description”ratherthana“deinition”andbypresentinganalterna-tiveusageformarkingupdialogue,thoughmostagreethatapplica-tionisill-advised.(Idon’trecommendit,andHTML5doesn’tallowit;pleasealsoseethe“HTML5,thedlElement,andDialogue”box).

Others—whatseemslikethemajority—thinktheconceptoftheterm–descriptionrelationshipisnotintendedtobequitesorigidandisanappropriatesemanticchoiceformarkingupothercontentifincontext,suchastheearliermoviecreditsexample.

NoHTMLspeciicationwillbeabletoaccountforeveryusecaseforstructuringcontent,atleastnottoeveryone’ssatisfaction.Forthemostpart,thewaysinwhichdevelopershaveusedthedeinitionlistbeyonddictionary-likedeinitionsarosefromadesiretouseseman-ticmarkupincaseswhereabetteralternativewaslacking.HTML5recognizesthisaswell,providingahandfulofexampleusagesthatrangefromglossarydeinitionstoauthor–editorlistingstometainformationandmore.

So,howfardoyougowithadeinitionlist?Myadviceistoalwaysconsidertheintentofadl—deiningcontentthathasaterm–descriptionrelationship.Useyourbestjudgmenttodeterminewhetheryourcontentitsthismodel.


note Unliketheotherlisttypes,the lielementmaynotbepartofadefini-tionlistunlessitispartofanorderedorunorderedlistnestedinadd.

HTML5,thedlElement,andDialogueAsnotedinthepreviousbox,HTML4declaresthatadlmayalsobeusedtomarkupdialogue,suchasfromaplay.DespitetheW3C'sendorsement,thisusagehasnotgainedwidespreadapprovalfromthedevelopmentcommunity,becausemanythinkitdeviatestoofarfromtheintentofadeinitionlist.Indeed,HTML5acknowledgesthisbyexplicitlydeclaringthat“Thedlelementisinappropriateformarkingupdialogue.”

Still,thereisn’taperfectsolutionfordialogueineitherHTML4orHTML5.TherecommendationinHTML5involvingbandspanisquestionableandhasalreadyreceivedpushbackfromsomeinthecommunity.Thoseconcernsandaproposedalternative(withitsownissues)arediscussedathttp://24ways.org/2009/incite-a-riot.

dt

Adeinitionlistterm

Syntax <dt></dt>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethedtelementtodenoteaterminadeinitionlist(dl).Thetermisdescribedbyatleastonecorrespondingddelementthatfollowsthedt.Pleasenotethatadtmaycontaininlinecontentonly.


Thesimplestarrangementwithinadlisonedt(term)groupedwithonedd(description).Anotherpossibilityisshowninthefollowingexample,withonedtassociatedwithmultipleddssincedirectorcanbedeinedinmanyways.Thedlentryinthischapterelaboratesontheseandotherconigurations,deinitionlistsingeneral,andtheroleofdt.

Example:

<dl>

<dt><dfn>director</dfn></dt>

<dd>One who directs</dd>

<dd>One who oversees a group or an organization</dd>

<dd>One who leads all aspects of the creation of a i lm</

➥ dd>

. . .

</dl>

Mostuseragentstypicallyrenderadeinitionlistbydefaultasshownhere,exceptfortheitalicsondirector,whichisbecauseofthedfnelement:

director

One who directs

One who oversees a group or an organization

One who leads all aspects of the creation of a fi lm

tip

Youmightbewonderingwhydirectoriswrappedinadfnelement.Isn’tthedtsufficienttoindicateit’saterm?Itdependsonthecontext.

Yes,adtdoesdenoteaterm,butadfnhasamorespecificmeaning,andinthecontextofadt,dfnindicatesthelistisdefiningtermslikeadictionaryorglos-sarydoes.PleaseseethedlentryinthischapterandthedfnentryinChapter5formoreinformationandexamples.


liAlistitem

Syntax <li></li>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethelielementtospecifyeachlistiteminbothorderedandunor-deredlists.Itcannotbeusedonitsownorinanelementbesidesanolorul(ormenuinHTML5).Anlimaycontainbothblock-levelandinlinecontent,includingdiv,span,a,p,allotherlisttypes,andmore.

Examples:

<h4>Sequence of Events before Heading out Tonight</h4>

<ol>

<li>Stretch</li>

<li>Run ive miles</li>

<li>Shower and dress for dinner</li>

</ol>

<h4>Items to Buy for First Grade</h4>

<ul>

<li>Notebooks</li>

<li>Pencils</li>

<li>Eraser</li>

</ul>

Pleaseseetheolandulentriesinthischapterformoreinformationaboutliforeachlisttype.


DeprecatedAttributesThefollowingattributesaredeprecatedinX/HTML:n type:ObsoleteinHTML5.Thisattributeispresentationalinnatureso

wasdeprecatedinfavorofusingCSS.Pleaseseetheolentryinthischapterformore.

n value:ThereisnoequivalentreplacementinX/HTML.Pleaseseethe“HTML5andtheliElement”boxformoreinformationregardingHTML5.

HTML5andtheliElementHTML5reintroducesthevalueattributeandincludesanewelement,menu,thatusesli.

AttributesinDetailn value="number":Thevalueattribute,whichisdeprecatedin

HTML4,isavalidattributeinHTML5aslongastheliisachildofanol.Inthiscontext,valuespeciiestheordinalvalueofitslistitemandadjuststhevalueofeachsubsequentitemaccordingly.Itsvaluemustbeavalidinteger.Forinstance,imaginealistofresultsinwhichthereisatieforthirdplace.Example:

<h3>Class President Voting Results</h3>

<ol>

<li>Hannah Carson (64)</li>

<li>Stefan Rios (51)</li>

<li>Kyla Wong (47)</li> (continuesonnextpage)


HTML5andtheliElement(continued)

<li value=”3”>Delores Cardinal (47)</li>

<li>Michael McMurtry (44)</li>

</ol>

Thislistrendersasfollows:1. Hannah Carson (64)

2. Stefan Rios (51)

3. Kyla Wong (47)

3. Delores Cardinal (47)

4. Michael McMurtry (44)

Noticethatboththethirdandfourthitemsarenumbered“3.”andtheifthitemisnumbered“4.”Thesameprincipleappliesifyoudeineyourlistmarkersasnon-numericvalueswithCSS.Forexample,withlist-style-type: upper-roman;set,ourexamplewouldshow“iii.”twice,followedby“iv.”

ThemenuElement

liisanoptionalchildofthenewmenuelementandisnotwrappedineitheranoloranulinthiscontext.PleaseseethemenuentryinChapter15formoreinformation.


olAnorderedlist

Syntax <ol> <li></li>

. . .

</ol>


DescriptionUseanorderedlist(ol)todeinealistofitemsforwhichthesequenceisimportanttothelist’smeaning.Forexample,youmightwanttolistarankingofyourfavoritesongs,detailthestepsinarecipe,orprovidedrivingdirectionsfromonepointtoanother.Eachlistitemisrepresentedbyalielement,whichcancontaineitherblock-levelorinlinecontent.

Example:

<h2>Directions to Birthday Party from Town Hall</h2>

<ol>

<li>Head north on Hill Street for a quarter mile.</li>

<li>Bear right at the fork onto Elm Street and continue

for a mile.</li>

<li>Turn left onto Glass Drive; it’s the last house on the

left.</li>

</ol>


Typically,mostuseragentsrenderanumberasthedefaultmarkerbeforeeachlistitem,likeso:

1. Head north on Hill Street for a quarter mile.

2. Bear right at the fork onto Elm Street and continue for a mile.

3. Turn left onto Glass Drive; it’s the last house on the left.

Youcancontrolwhattypeofmarkerappearswiththelist-style-typeCSSproperty(don’tusethedeprecatedHTMLtypeattribute).Optionsincludeletters,Romannumerals,bullets(yes,evenonanorderedlist,thoughitisn’trecommended),images,nomarkeratall,andmore.Ifyou’recuriousabouttheoptions,theCSS2.1Speciicationdetailsthemathttp://www.w3.org/TR/CSS21/generate.html#lists.

Aswithdeinitionlists(dl)andunorderedlists(ul),youmaynestalltypesoflistsinsideanorderedlist,andviceversa.Pleaseseethe”NestedLists”sectionearlierinthischapterformoreinformationaboutnestingandanexampleusingorderedlists.

Mostimportant,remembertouseanolonlyifit’sappropriatetodescribethesemanticsofyourcontent,notjustbecauseyouwantnumbersoranothersequencedmarkerbeforeyourcontent(thoughthetwotypicallygohandinhand).

tip

Ifoundthishandytiponline.Agoodwaytodeterminewhetheranorderedlistoranunorderedlististhecorrectsemanticchoiceistoask

yourselfwhetherthemeaningofyourlistwouldchangeifyoushuffledtheitemsaround.Iftheanswerisyes,useanol.Pleaseseethedlandulentriesinthischapterforinformationaboutotherlisttypes.


RecommendedUsesAsidefromsomeoftheobvioususesI’venoted,anorderedlististheproperchoiceformarkingupbothbreadcrumbandpaginationnavigation.

Breadcrumbnavigation.Breadcrumbnavigationistheseriesoflinksyou’lloftenseeabovethecontenton,say,ane-commercesitetoindicatethenavigationpathtothepageyou’reviewing.Abreadcrumbisoftendisplayedlikethisexample,withthepageyou’reondisplayedbutnotlinked:

Home > Products > Outdoors > The Garden Weasel

Anorderedlistmakessenseforthisbecauseabreadcrumbrepresentsadistinctsequenceoflinks.

Paginationnavigation.Paginationnavigationisthehorizontallistofmostlynumericlinksyou’reprobablyusedtoseeingone-commerceandnewssites,allowingyoutopaginatethroughlistsofproductsortoaddi-tionalpageswithinanarticle.

tip YoucanturnoffthemarkersinyourCSSwiththis:ol {

list-style-type: none;

}

DeprecatedAttributesThefollowingattributesaredeprecatedinX/HTML.Whereapplicable,I’vedescribedthemethodthathasreplacedtheattributeandthatrepli-catesitspurpose.n compact:ObsoleteinHTML5.Sincethisattributeispresentationalin

nature(andnevergainedwidesupportanyway),usetheCSSmargin, padding,andline-heightCSSpropertiesinsteadtoadjustthespac-ingbetweenlistitemsandmakethelistmorecompact.


n start:Pleaseseethe“HTML5andtheolElement”boxformoreinformation.

n type:ObsoleteinHTML5.Asnotedearlierinthechapter,usetheCSSlist-style-typepropertyinsteadofthetypeattributetocontroleachlistitem’smarkerstyling.Forinstance,thefollowingruledictatesthatallorderedlistsdisplayanuppercaseRomannumeralbeforeeachlistitem:ol {

list-style-type: upper-roman;

}

HTML5andtheolElementHTML5deinestwoadditionalattributesfororderedlists:startandreversed.

AttributesinDetailn start="number":Thestartattribute,whichisdeprecatedinHTML

4,isavalidattributeinHTML5.startspeciiesthatanorderedlistbeginsatanumber(ornon-numericcharacterdependingonyourstylesheet)otherthanthedefault,whichis“1.”Itsvaluemustbeavalidinteger,evenifthemarkertypeyou’vespeciiedinyourCSSisnotnumeric,likeupper-roman,shownearlier.Forexample,start=”4”woulddisplayas“IV.”Example:

<ol start=”5”>

<li>Preheat oven to 350 degrees</li>

<li>Grease pan</li>

<li>Mix ingredients in a large bowl</li>

</ol>



HTML5andtheolElement(continued)Thisrendersasfollows:

5. Preheat oven to 350 degrees

6. Grease pan

7. Mix ingredients in a large bowl

Ifyouhadspeciiedyourmarkeraslower-roman,thenitwouldbeginwith“v.”instead.

n reversed:HTML5introducesthenewreversedBooleanattribute,whichyouusetoindicateadescendinglist.(See“Attributes”inChapter1formoreaboutBooleanattributes.)Example:<h2>Countdown of the World’s Three Coldest Locations</h2>

<ol reversed=”reversed”>

<li>Oymyakon, Russia</li>

<li>Plateau Station, Antarctica</li>

<li>Vostok, Antarctica</li>

</ol>

<p><cite>http://www.aneki.com/coldest.html</cite></p>

Thislistrendersasfollows:3. Oymyakon, Russia

2. Plateau Station, Antarctica

1. Vostok, Antarctica

TheXHTML5syntaxis<ol reversed=”reversed”>.YoumayuseitinHTML5documentsaswellifyoupreferitoverHTML5’s<olreversed>shortenedformat.Pleasealsoseethelientryinthischapterforadiscussionoftherelatedvalueattribute.


ulAnunorderedlist

Syntax <ul> <li></li>

. . .

</ul>


DescriptionUseanunorderedlist(ul)todeineagenericlistforwhichthesequenceofitemsisnotimportant.Eachlistitemisrepresentedbyalielement,whichcancontaineitherblock-levelorinlinecontent.

TheulisontheshortlistofthemostcommonlyusedelementsontheWebbecauseitissemanticallyappropriateforawidevarietyofcontent(see“RecommendedUses”).

Let’stakealookatasimpleexampleintheformofashoppinglist.

Example:

<ul>

<li>A bag of lour</li>

<li>Carrots</li>

<li>Fresh fruit</li>

</ul>

Typically,mostuseragentsrenderabulletbeforeeachlistitembydefault,likeso:


•Abagofflour

•Carrots

•Freshfruit

However,thefactthatalistmayhavebulletsisn’timportant;it’swhetheryourcontentcallsforanunorderedlistsemantically.CSSprovidesyoufullcontrolovertheformatting,allowingdifferenttypesofbullets,images,nomarkeratall,andmore.

tip Youcanmakesequentialnumbersappearaslistitemmarkerswiththis:ul {

list-style: decimal;

}

Usethisonlyifyourcontentisappropriateforanunorderedlistandnotanorderedlist.Forexample,youmightpostalistwiththeheading“TenTofuDishesICan’tLiveWithout(innoparticularorder),”andyouwanttoshowdeci-malstoreinforcethatthelistdoes,infact,includetenitems.

tip

Ifoundthishandytiponline.Todeterminewhetheranorderedlistoranunorderedlististhebestsemanticchoice,askyourselfwhetherthe

meaningofyourlistwouldchangeifyoushuffledtheitemsaround.Iftheanswerisno,useaul;otherwise,useanol.

RecommendedUsesHerearejustafewofthemanywaysinwhichunorderedlistsareutilized:

Navigation.Whetherit’sforglobalnavigation,agroupoffooterlinks,oranywhereinbetween,theulisthedefactostandardformarkingupsitenavigation.(Pleaseseetheolentryforacoupleexceptions.)

Tabs.Thisformofnavigationtypicallyappearsacrossthetopofamodule.

Productgridsandcarousels.Thesearetypicallydisplayedhorizontally.


Articleheadlinelists.Theseoftenappearonahomepagetosurfacelinkstorecentarticlesoronanarticlesubpageasrelatedlinks.Viewsourceonyourfavoritenewssites,andyou’relikelytoseegroupsoflinkstoarticlesformattedinaul.

Relatedvideolists.Thesetypicallyhaveathumbnailimageandatitleanddescription.

DeprecatedAttributesn compactandtype:ObsoleteinHTML5.Theseattributearepresenta-

tionalinnaturesoweredeprecatedinfavorofusingCSS.Pleaseseetheolentryinthischapterformoreinformation.

OntheWeb,contentisking,andinmostcasesyourcontentistext.

Thischapterfocusesontheelementsusedtomarkupyourcarefullycraftedprose,links,codesamples,references,andmoreinordertoenrichthesemanticsofyourcontent.That,inturn,pleasesbothscreenreadersandsearchengines,anditaffordsyoupresentationalcontroloveryourcontentviaCSS.

Asyou’llsee,therearealotofelementscoveredinthischapter.You’lllikelyuseonlyahandfulregularly—suchasa,p,em,andstrong—butIreallyencourageyoutobecomefamiliarwiththeothers.Youmayindtherearesomeelementsyoushouldhavebeenusingallalong.citeisjustoneexampleofahiddengem.Andifyou’reworkingonanHTML5site,besuretocheckoutthischapter’scompanion,Chapter12,whichfocusesontextelementsuniquetoHTML5.

Text

5

aAnanchor

Syntax <a></a>Attributes Core,I18n,Events,accesskey,charset*,coords*,href,hreflang,name*,rel,rev*,shape*,tabindex,target*,type,HTML5Only:Global

DescriptionThea(“anchor”)elementisessentialtotheWeb,providingthemeanstocreateahyperlinktoanotherpageorserveasananchorwithinapagetowhichahyperlinkpoints.Youmaywrapanaelementaroundtextoranimagebutnotaroundablocklevelelement,suchasapordiv(thisisallowedinHTML5,though;seethe“HTML5andtheaelement”box).

Youmaylinktoavarietyofresources:anotherpage(.html,.php,andsoon),ananchorwithinapage,adocumentsuchasaPDF,animage,ane-mailaddress,andmore.Thehrefattributeprovidesthelinkpathandtakesonmanyforms.

Example1(simplelinktoanotherresource):



<p>Africa has numerous inspiring areas to <a href=”parks-and-

➥ reserves.html”>experience animals in the wild</a>.</p>



<p>. . . <a href=”http://en.wikipedia.org/wiki/Norway”

title=”History, geography, culture and more”>Norway on

Wikipedia</a> . . .</p>

Part2:HTMLElementsandGuidance Chapter5:Text 95

Theoptionaltitleattributetypicallydisplaysasatooltipandmaybereadbyascreenreader.Asyounodoubtknow,browsersunderlineanddisplaylinksinadifferentcolorthanstatictextbydefault,likeso:

Africa has numerous inspiring areas to experience animals in the wild.

Forsimplicity’ssake,I’llshowonlytheaelementinmostoftheremain-ingexamples,butinpractice,besureeachoneiswrappedinablock-levelelement,suchasap.

Drilldownfromthecurrentpagelocationtoasubfolderbyincludingtheproperpath.Example2drillsdowntoproductsandthentoshoes.

Example2(linktosubpage):

. . . <a href=”products/shoes/basketball.html”>basketball

shoes</a> . . .

Conversely,use../tolinktoaresourceonefolderlevelupfromthecurrentpage.Ifyouuse../../,thelinkpointstwolevelsup,andsoon.

Example3(linkupalevelortwo):

. . . <a href=”../ozzie.html”>Pictures of Ozzie</a> . . .



. . . <a href=”../../organic/salads.html”><img src=”salad.jpg”

width=”200” height=”200” alt=”organic salad” /></a> . . .

Eachofthoseexamples(excepttheonelinkingtoWikipedia)hasarela-tivepath,meaningtheyarerelativetothelocationofthelinkingdocu-ment.Althoughyoucanlinkthroughoutyoursitewiththosemethods,anabsolutepathisoftenyourbestchoice.Itbeginswith/,whichpointstothesite’sroot,andthenyoudrilldownfromthere.Consequently,itdoesn’tmatterwherethelinkingdocumentlivesinthedirectoryhierar-chy,becausethelinkwillalwayswork.

Forinstance,thepagecontainingthelinkinExample4couldbeoneleveldeeporadozen,butthelinkwouldbethesame.

Example4(linkwithabsolutepath):

. . . <a href=”/products/shoes/basketball.html”>basketball

shoes</a> . . .

Linkingtoane-mailaddressisequallysimple.Justpreixthee-mailaddresswithmailto:.Thelinkwillopentheuser’se-mailclientifheorshehasoneinstalledandpopulatetheTo:ieldwiththeaddress.

Example5(linktoe-mailaddress):

. . . <a href=”mailto:[email protected]”>contact Sean Lee

➥ </a> . . .

Ifyoudeineananchororelementwithid=”cheetahs”,youmaylinkdirectlytothatportionofthepagebyassigning#plustheidtothehref,asinExample6.(Tolinktoananchoronanotherpage,includetheile-name,asinhref=”big-cats.html#cheetahs”.)

Example6(linktoanchor):



<p>Visit Africa to <a href=”#cheetahs”>experience cheetahs in

the wild</a>.</p>



. . .

<h2><a href=”#cheetahs” id=”cheetahs”></a>Experience Cheetahs

➥ </h2>

. . .

Thisisanalternativeapproach:



. . .

<h2 id=”cheetahs”>Experience Cheetahs</h2>

. . .

Bothapproachesworkacrossbrowsers—thepagejumpstothatpoint—butneitherisperfectfromausabilitystandpoint.Inthesecondone,ifyounavigatewiththeTabkeyinInternetExplorerafternavigatingtotheh2,itjumpsyoutotheirstlinkonthepageratherthantheirstlinkaftertheh2.

Theirstapproach,althoughalittlecumbersome,ensuresInternetExplorer’stabbingordercontinuesfromtheanchorasmostuserswouldexpect.But,itaddsalinkthatdoesnothing.(Noteyoucouldalsowrapthelinkaround“ExperienceCheetahs.”)

Meanwhile,Chrome’stabbingmisbehavesregardless,dependingonyourpointofview.Itignoresyourcurrentpositioninthepage,sopressingTabtakesyoutotheirstlinkafterthelastoneyouactivated,notaftertheidanchortowhichyou’vejumped.

AttributesinDetailAlllavorsofHTMLsharethefollowingaattributesunlessotherwisenoted.(Pleaseseethe“HTML5andtheaElement”boxforadditionalattributesspeciictoHTML5.)n accesskey:Pleasesee“Attributes”inChapter1fordetails.n charset:*ObsoleteinHTML5.Thisspeciiesthecharacterencodingof

thelinkdestination.Pleasesee“CharacterEncoding”inChapter1formoredetails.Thisistypicallyomitted.

n coordsandshape:*ObsoleteinHTML5.Thesetwoattributesdeineaclient-sideimagemapthatusestheobjectelement.However,browsersupportofobjectclient-sideimagemapsisextremelypoor(FirefoxandOpera9.2andneweronly),sousethemapelementinstead(pleaseseemapinChapter6).

n href=”uri”:ThemostpowerfulattributeontheWeb,hrefdeinesthelinkdestination.Pleaseseethepreviousexamples.

n hreflang=”langcode”:Thisindicatesthebaselanguageofthehref’sdestination,muchinthewaythelangattributespeciiesthelanguageofotherHTMLelements.Hence,youmayusehreflangonlywhenhrefispresent.

n name="cdata":*DeprecatedinXHTMLbutvalidates.*ObsoleteinHTML5.Thisprovidestheanchorwithauniquenamesoyoucanlinktoitfromanothera.Itmustbeuniquewithinapage,anditsharesanamespacewithid.ThenameattributeisavestigeofearlierversionsofHTML,andidhasreplaceditastheattributetouse(seeExample6).

n rel="link-types"andrev="link-types":*revisobsoleteinHTML5.relandrevhaveoppositemeaningsandareusedinconjunctionwithhref.Therelattributeindicatestherelationshipfromthecurrentdocumenttothelinkedresource.rev(“reverse”)indicatestherelation-shipfromthelinkedresourcetothecurrentdocument;historically,it’sbeenmisunderstoodandrarelyused,whichiswhyit’snotincludedinHTML5.Thefollowingexamplesillustratetheirdifferences:

<p>Learn that and more in <a href="04-giraffes.html"

rel="chapter">Giraffes</a>.</p>


<p>As stated earlier, <a href="chapter-14.html"

rev="appendix">tofu is delicious</a>.</p>

Eachrelandrevvaluemustbeaspace-separatedlist.Forinstance,inthepreviousexample,rel="chaptersection"wouldindicatethehrefpointstoasectionwithinachapter.Pleasesee“LinkTypes”inChapter1forthelistofdeinedvalues.Youdonothavetoincluderelorrevoneachanchor(includingoneorbothisfarlesscommonthannot),becauseifeitherisundeined,isleftblank,orcontainsavaluetheuseragentdoesn’trecognize,norelationshipisdeined.Thelinkstillfunctions,though.

n tabindex:Pleasesee“Attributes”inChapter1fordetails.n target:*NotvalidwithStrictX/HTMLDOCTYPEs.targetspeciiesthe

nameoftheframeoriframeinwhichthelinkshouldopen.Ifthenamedoesn’texist,thelinkopensinawindow.HTMLprovidesfourspecialtargetnameswithspeciicbehavior:_blank(linkopensinanew,unnamedwindow),_self,_parent,and_top.PleaseseetheframesetelementinChapter10formoredetails.targetisnotdepre-catedinHTML5,butitmaynotreferenceaframeelementsinceframesdon'texistinHTML5.BeginningauthorsoftenwonderhowtoopenalinkinanewwindowwhileusingaStrictDOCTYPE,sincetargetisn’tallowed.Letmepref-acethisbysayingthatit’sbestnottoopenalinkinanewwindow,becauseyouwanttoleavethatdecisionuptotheuser.Butforthosetimeswhenyoumust,youcanimplementitwithJavaScript.Oneapproachusesrel=”external”ontheaasahookforthescript.YoucanindJavaScriptforitbysearchingonline.Nomatteryourmethod,Irecommendyouaddtitle=”Opensexternalsiteinnewwindow”orasimilarmessagetoeachrelevantlinkasacuetousers.Additionally,


useCSStoplaceaniconnexttoeachlinksousersknowataglancethelinkbehavesdifferently.

n type=”content-type”:Tellstheuseragentthecontenttypeofthecontentatthelink’sdestination.Itisonlyadvisory.

HTML5andtheaelementHTML5introducesafewchangestotheaelement.

aasPlaceholder

Ifadoesn’thavethehrefattribute,itrepresentsalinkplaceholder.Forexample,youcouldpopulatetheadynamicallywithJavaScriptbasedonuserbehavior.

WrapaAroundNearlyAnyElement

InabigandextremelyusefuldeparturefrompreviousversionsofHTML,HTML5allowswrappinganaaroundmostelements,includ-ingparagraphs,lists,andmore.Forexample,thefollowingisvalidHTML5,makingboththeh1andh2textanactivelink:

<a href=”giraffe-escapes.html”>

<hgroup>

<h1>Giraffe Escapes from Zoo</h1>

<h2>Animals worldwide rejoice</h2>

</hgroup>

</a>

Theonlylimitationisthatacannotcontainelementsclassiiedasinteractivecontent,suchasotherlinks,theaudio,video,details,form,iframeelements,andmore(they’remostlycommonsense).Thevalidatorwilltellyouwhenyou'vegoneastray.



HTML5andtheaelement(continued)

AttributesinDetail

HTML5includestheseadditionalattributes:n media:Thisattributedescribesthemediaforwhichthehrefdes-

tinationresourcewasdesigned(justlikethemediaattributewhenusinglinktoloadastylesheet).Itisonlyadvisory.Thevalueis“all”ifmediaisomitted;otherwise,itmustbeavalidmediaquerylistfromtheMediaQueriesspeciication(http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/#syntax).mediaisallowedonlyifhrefispresent.

n ping:pingfacilitatestrackinguserbehaviortogatheranalytics.Itspeciiesaspace-separatedlistofURLs(oneisine,too)thattheuseragentshouldnotifyiftheuserfollowsahyperlink.Typically,thiswouldbeaserver-sidescriptthatlogstheuser’saction.pingisallowedonlyifhrefispresent.Historically,developershaveusedothertrackingmethods,butthey’retypicallyhiddenfromtheuser.Useragentssupportingpingallowonetodisableit,puttingtrackingincontroloftheuserwhereitbelongs(ifyou’reamarketer,youmightdisagree!).Andpingimprovesperformancebyeliminatingtheadditionalover-headofothermethods(somerequiremoretripstotheserverand/orloadextraJavaScript).


abbrAnabbreviation

Syntax <abbr></abbr>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsetheabbrelementtomarkupanabbreviation,suchasJr.forJunior,UKforUnitedKingdom,andB.S.forBachelorofScience.abbrisoftenconfusedwiththeacronymelement,whichisalsofeaturedinthischap-ter.Pleaseseehttp://www.htmlfiver.com/extras/abbr-acronym/formorediscussionofthedifferencebetweenthetwo.

Example1:

<p>They wake up at 7 <abbr>a.m.</abbr> and go to bed at 9

<abbr>p.m.</abbr> every day.</p>

<p>They listen to games via the online <abbr title="Major

League Baseball">MLB</abbr> Gameday Audio service.</p>

Notetheuseoftheoptionaltitleattributetoprovidetheexpansionoftheabbreviation.titleimprovesaccessibility,sinceausercanconigureascreenreadertoannouncethetext,anditalsoappearsasatooltipwhenthemousepointerisontheabbr.

Alternatively,ifyouwanttomaketheexpansionevenmoreaccessibleandexplicit,aswellassupportprintingitinallbrowsers,youcanplaceitinparenthesesinsteadofinthetitle,asshowninExample2.

Example2:

<p>They listen to games via the online <abbr>MLB</abbr>

(Major League Baseball) Gameday Audio service.</p>


RenderingofabbrandacronymUseragentstypicallydon’tdisplayabbroracronymtextdifferentlythanothertextbydefault,thoughsomesuchasFirefoxandOperadoshowadottedbottomborder(underline)ifyoudeineatitle.Thisactsasavisualcuetosightedusersthatatooltipisavailable.YoumayreplicatethiseffectinothermodernbrowserswiththisbitofCSS:

/* show underline when a title is provided */

abbr[title], acronym[title] {

border-bottom-style: dotted;

border-bottom-width: 1px;

}

note Ifyoudon’tseethedottedbottomborderonyourabbroracronyminInternetExplorer,tryadjustingtheparentelement’sline-height

propertyinCSS.

note InternetExplorer6rendersabbrtext,butitdoesn’trecognizeabbrasanelement(unlessyouexecutedocument.createElement('abbr')

first),soyoucan’tstyleitwithCSS,andthetitletooltipwon’tdisplay.

HTML5andtheabbrElementHTML5eliminatestheconfusionbetweenabbreviationsandacro-nymsbydeclaringtheacronymelementobsoleteandadvisingauthorstouseabbrinallinstances.

Italsospeciiesthatifanabbreviationisinpluralformwithintheelement,thetitletext,ifpresent,shouldbepluralaswell.


acronymAnacronym

Syntax <acronym></acronym>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionTheacronymelementdeinesanacronym.Itisoftenconfusedwiththeabbrelement,whichisforabbreviations.(Anacronymisalsoanabbre-viationbutonethatspellsaword,suchaslaser,radar,andscuba.)Pleaseseehttp://www.htmlfiver.com/extras/abbr-acronym/formorediscussionofthedifferencebetweenthetwo.

Example:

<p>After the <acronym>radar</acronym> detected movement under

the ship, she threw on her <acronym title="self-contained

underwater breathing apparatus">scuba</acronym> gear to go

check it out.</p>

Asshown,theoptionaltitleattributedeinestheexpandedformoftheacronym.Pleaseseetheabbrentryformoreaboutthevalueoftitleandanalternativeapproach,aswellashowtitleimpactsacronymrenderinginsomebrowsers.

HTML5andtheacronymElementHTML5eliminatestheconfusionbetweenabbreviationsandacro-nymsbydeclaringtheacronymelementobsoleteandadvisingauthorstouseabbrinallinstances.

bBoldtext

Syntax <b></b>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionInX/HTML,thebelementispurelypresentational;itrenderstextasboldbutprovidesnomeaning.Youcanthinkofitasaspanelementthatisboldbydefault.Becauseit’ssolelypresentational,bfelloutoffavorseveralyearsagoliketheielementandisallbutdeprecatedintheeyesofmany.Developersareadvisedtousethestrongelementinsteadwheneverappropriate,sinceithassemanticvalueanddoesn’tspeaktohowtheenclosedtextshouldlook.

Example:



<p>That intersection is <strong>extremely dangerous

➥ </strong>.</p>

Useragentsrenderbothstrongandbthesamewaybydefault(andbothcanbealteredwithCSS):

That intersection is extremely dangerous.

However,don’tusestrongforcontent,suchasaheading,justbecauseyouwantittobebold.Instead,useh1—h6,ortheappropriatesemanticelementandstyleitaccordinglywithCSS.


bvs.strong,HTML5,andMoreHTML5redeinesbsoitsuseisrootedintypographicalconventions,insteadofsolelymakingtextbold.Pleaseseetheielemententryinthischapterformorebackgroundconcerningbvs.strong,aswellasb’sroleinHTML5.

bdoBidirectionaltextoverride

Syntax <bdodir=””></bdo>

Attributes Core(dirisrequired),HTML5Only:Global

DescriptionUsethebdo(“bidirectionaloverride”)elementanditsrequireddirattri-butetochangethedirectionalityoftheenclosedtext.dirspeciiesthedesireddisplaydirectionandtakesavalueofeitherltr(“lefttoright”)orrtl(“righttoleft”).

Example1:<p>This text appears left-to-right by default, while

<bdo dir="rtl">this appears right-to-left</bdo>.</p>

Useragentsrenderthisasfollows:

This text appears left-to-right by default, while tfel-ot-thgir sraeppa

siht.

That’sacrudeexamplejusttoshowthebasicconcept,buthere’ssomeofthe“why”and“when”ofbdo.


EachUnicodecharacterhasadirectionalityassociatedwithit—eitherlefttoright(likeLatincharactersinmostlanguages)orrighttoleft(likecharactersinArabicorHebrew).Unicode’sbidirectional(“bidi”)algo-rithmdetermineshowtodisplaycontentthatincludesamixtureofbothleft-to-rightandright-to-leftcharacters.bdocomesintoplaywhenthealgorithmdoesn’tdisplaythecontentasintendedandyouneedtoover-rideit.Pleaseseehttp://www.htmlfiver.com/extras/bdo/formoredetails.Additionally,theW3C'sarticle“CreatingHTMLPagesinArabic,HebrewandOtherRight-to-leftScripts”(http://www.w3.org/International/tutorials/bidi-xhtml/)discussestheissuesatlength.

bigLargertext

Syntax <big></big>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionTextcontainedinabigelementrendersinanindeterminatelargersize(anditmayvaryinuseragents).Likethesmallelement,bigisn’tofi-ciallydeprecatedinX/HTML,butpracticallyspeakingitis,anddevelop-ersareadvisednevertouseit.Instead,useCSStocontrolyourfontsizeinconjunctionwithapropersemanticelement.Theemand,especially,strongelementsareidealsubstitutesforcasesinwhichyoumighthavebeeninclinedtousebig.(Avoidusingspansinceithasnosemanticmeaninganddoesn’tenhanceaccessibility.)Example1showsstronginplaceofbig.


Example:

<p>This is the sale <strong>you CAN’T miss!</strong></p>

Thestrongtextwon’tbelargerthanitssurroundingtextbydefault,butyoucanstyleitasyoupleasewithCSS:larger,anormalweightinsteadofthedefaultbold,andsoon.

HTML5andthebigelementThebigelementisobsoleteinHTML5.

blockquoteAlongquotation

Syntax <blockquote></blockquote>Attributes Core,I18n,Events,cite,HTML5Only:Global

DescriptionUsetheblockquoteelementtodenotealong(block-level)quotation.Itisthecounterparttotheqelement,whichisappropriateforashort(inline)quotation.Theoptionalciteattributeallowsyoutospecifythesource’sURI.

Example:

<p>In <cite>The Brothers Karamazov</cite>, Dostoevsky wrote:

➥ </p>

<blockquote cite=”http://www.dostoevskybooks.com/the-brothers-

➥ karamazov/”>


<p>The stupider one is, the closer one is to reality. The

stupider one is, the clearer one is. Stupidity is brief

and artless, while intelligence wriggles and hides

itself. Intelligence is a knave, but stupidity is honest

and straightforward.</p>

</blockquote>

Browserstypicallyindentblockquotecontentbydefault(youcanchangethiswithCSS):

In The Brothers Karamazov, Dostoevsky wrote:

The stupider one is, the closer one is to reality. The stupider

one is, the clearer one is. Stupidity is brief and artless, while

intelligence wriggles and hides itself. Intelligence is a knave,

but stupidity is honest and straightforward.

note Besuretouseblockquoteonlyifyourcontentisquotedfromasource,notjustbecauseyouwanttoindentit.Youmayindentother

HTMLelementsbysettingthemargin-leftpropertyinCSS.

AttributesinDetailn cite:UsethisoptionalattributetoincludeaURIthatpointstothe

quotation’ssource.ThepreviousexamplereferstoDostoevsky’sbookonasite(ictitious,inthiscase).Pleaseseethedfnelemententryinthischapterformoredetailsaboutciteaccessibilityandpresentationissues.(Note:Theciteattributeisdifferentfromtheciteelement,whichisalsousedintheexampleanddescribedinfullinthischapter.)

note ForapagewithaStrictDOCTYPE,blockquotecontentmustbemarkedupwiththeappropriateelements(likepintheexample)

ratherthanwrappeddirectly.However,Istronglyencourageyoutomarkitupevenifyou’reusingaTransitionalDOCTYPE.It’sbetterforaccessibilityandcontrollingpresentationwithCSS,andit’llmakeyourtransitiontoStricteasier.


HTML5andtheblockquoteElementHTML5saystheblockquoteandciteelementsareinvalidforrepre-sentingaconversation.

brAlinebreak

Syntax <br>or<br />


DescriptionThebrelementforcesalinebreakinarunoftext,suchasinapoemorstreetaddress.Asarule,usebrsparinglysinceitmixespresentation(thedomainofCSS)withyourHTML.Donotuseittocreateabreakbetweenparagraphs;wrapthecontentinthepelementinstead,anddeinethespacebetweenparagraphswiththeCSSmarginproperty.

Example:

<p>

125 Center Street<br />

Moose Jaw, Saskatchewan<br />

Canada S6H 3J9

</p>

DeprecatedAttributesn clear:UsetheCSSclearpropertyinsteadtodictatethelowof

contentthatfollowsabr.


citeAreferencetoasource

Syntax <cite></cite>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsetheciteelementforacitationorreferencetoasource.Examplesincludethetitleofaplay,ascript,abook,asong,amovie,aphoto,asculpture,aconcertormusicaltour,aspeciication,anewspaper,alegalpaper,aperson,andmore.

Forinstancesinwhichyouarequotingfromthecitedsource,useqorblockquote,asappropriate,tomarkupthequotedtext(pleaseseetheirentriesinthischapter).Tobeclear,citeisonlyforthesource,notwhatyouarequotingfromit.citemayalsobeusedwithoutarelatedquotation.

Examples:

<p>Two of the books on her summer reading list are <cite>A

Separate Peace</cite> and <cite>The Odyssey</cite>.</p>

<p>Which character in <cite>This is Spinal Tap</cite> said,

<q>It's such a fine line between stupid, and clever</q>?</p>

<p>When he went to The Louvre, he learned that <cite>Mona

Lisa</cite> is also known as <cite>La Gioconda</cite>.</p>

Useragentstypicallyitalicizecitetextbydefault,likethis(youcanalteritwithCSS):


Which character in This Is Spinal Tap said, “It’s such a fine line

between stupid and clever”?

HTML4,HTML5,andtheciteElementDustupHTML4isdifferentfromHTML5inthatitalsoallowsusingciteonaperson’sname,suchaswhenquotingtheperson.HTML4providesthisexample(I’vechangedtheelementnamesfromuppercasetolowercase):

As <cite>Harry S. Truman</cite> said,

<q lang="en-us">The buck stops here.</q>

Inadditiontoinstanceslikethat,developersoftenuseciteforthenameofblogandarticlecommenters(thedefaultWordPressthemedoes,too).

Amidsomedisagreementinthedevelopmentcommunity,HTML5explicitlydeclaresthatusingciteforaperson’snameisnotappro-priate.Instead,itdeinesciteassolelyforthe“titleofawork,”likeatitleofaplay,ascript,andtheotherones(exceptaperson)listedinthepreviousdescription.ManydevelopershavemadeitcleartheyintendtocontinuetouseciteonnamesbecauseHTML5doesn’tprovideanalternativetheydeemacceptable(namely,thespanandbelements).


codeAcodefragment

Syntax <code></code>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethecodeelementtomarkupafragmentofcomputercode.Forinstance,you’lloftenseecodeusedonWebtutorials.Typically,it’snestedinporpre,asappropriate,thoughotherelementsmaybeacceptable,too.

Example:<p>The <code>showPhoto(id)</code> function displays the

full-size photo of the thumbnail in our <code><

➥ ul id="thumbnails"></code> carousel list.</p>

Useragentstypicallyrendercodeinamonospacefontbydefault,likeso:

The showPhoto(id) function displays the full-size photo of the

thumbnail in our <ul id="thumbnails"> carousel list.

Ifyou’dliketorenderablockofcode,wrapitinapreelementtopreserveitsformatting.Pleaseseethepreentryinthischapterforanexampleandmoreinformation.

tip Pleaseseethekbd,samp,andvarelemententriesinthischapterforothercomputer-andprogramming-relatedsemantics.


HTML5andthecodeElementHTML5sayscodeisalsoappropriateforailename.HTML4isquiteshortondetailsaboutcode,butinmyjudgment,thisisappropriateforX/HTMLusage,too.

delDeletedcontent

Syntax <del></del>Attributes Core,I18n,Events,cite,datetime,HTML5Only:Global

DescriptionThedelelementindicatescontentthathasbeendeletedfromapreviousversionofthedocument.It’susefulwhenyou’dliketoexplicitlyshowwhathaschangedasapageevolves.Itscounterpartistheinselement,whichindicatescontentthat’sbeeninsertedsinceapreviousversion.Youarenotrequiredtousethemintandem,however.

Forboth,thinkofatechnicalspeciicationorlegaldocumentthatgoesthroughmultipleiterationsbeforebecominginal,agiftregistrylistthatisupdatedasitemsarepurchased,oraWebtutorialyouupdateafterareaderprovidesvaluablefeedbackinthecommentssection.Ineachcase,youmaywanttoinformthereaderofthecontent’sevolutionwithdeland/orins.


Example1(asinlineelement):

<h3>Tomorrow's Showtimes</h3>

<ol>

<li><ins>2 <abbr>p.m.</abbr> (Another show just added!)

➥ </ins></li>

<li><del datetime=”2010-03-03T10:16:15-05:00”>5 <abbr>p.m.

➥ </abbr></del> <ins>SOLD OUT</ins></li>

<li><del cite=”http://www.hot-ticket-plays.com/show-

➥ sells-quickly/” datetime=”2010-03-02T10:10:14-05:00”>8:30

<abbr>p.m.</abbr></del> <ins>SOLD OUT</ins></li>

</ol>

Bydefault,useragentstypicallyrenderastrikethroughondelcontentandunderlineinscontent(youcanalterthiswithCSS).Example1wouldappearlikethis:

1. 2 p.m. (Another show just added!)

2. 5 p.m. SOLD OUT

3. 8:30 p.m. SOLD OUT

AsImentioned,delandinsareoftenusedtogetherbutdon’thavetobe.Forexample,Iinsertedcontentintheirstlistitembutdidn’tdeleteany.Conversely,theremaybetimesyoudocumentadeletionwithoutinsert-ingareplacement.

AttributesinDetailTheseattributeshavethesamepurposeforbothdelandins:n cite="url":UsethisoptionalattributetoincludeaURItoasource

thatexplainswhythechangewasmade.Forinstance,inthelastliinExample1,citemightpointtoastoryabouttheshowsellingout


intenminutes.Alternatively,youcouldprovideabriefmessageinthetitleattribute,whichdisplaysasatooltip.(Note:Theciteattributeisdifferentfromtheciteelement,whichisalsodescribedinthischapter.)

n datetime:Usethisoptionalattributetospecifythedateandtimeofthechange,asshowninExample1.TherequiredformatisYYYY-MM-DDThh:mm:ssTZD.Pleaseseehttp://www.w3.org/TR/html4/types.html#type-datetimeforafullexplanation.

note

citeanddatetimearecuriousinthattheyaddvaluetoyourcontent,butbrowsersdon'treadilyexposetheinformationtousers.Pleasesee

http://www.htmlfiver.com/extras/del-ins/forfurtherdiscussionofthisaccessi-bilityissueandsomesolutions.

AsInlineorBlock-LevelElementdelandinsarerareinthattheycanbeeitherinlineorblock-levelelements.Theyareinlinewhensurroundingcontentwithinablock-levelelement,suchasaparagraphortheliinExample1.Theyareblock-levelwhentheycontainoneormoreblock-levelelements,asinExample2.Aninstanceofdelorinscannotbebothatthesametime,however;youcannotnestblock-levelcontentinsidedelorinswheneitherisusedinline.

Thisexampleshowsinsasablock-levelelement;theapproachisthesamefordel.

Example2(asblock-levelelement):

<ins>

<p><strong>Update:</strong> Since initial publication of

this story, we learned that Mr. Johnson’s bike ride

across the United States will commence on July 7th.</p>

</ins>


note Browsersrendercontentinablock-leveldelandinsinconsistentlybydefault.Mostdisplayastrikethroughfordelandanunderlineforins

onallnestedcontentasexpected,butattheleast,Firefox3.5andolderdonot.YoucanrectifythiswiththefollowingexplicitCSSrule(the*meanseveryelementinsidedelandinsgetsthetreatment):del * {

text-decoration: line-through;}

ins * {

text-decoration: underline;}

dfn

Deininginstanceofterm

Syntax <dfn></dfn>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionThedfnelementindicatesthedeininginstanceofaterm.Wrapdfnonlyaroundthetermyou’redeining,notthedeinitionitself.

Example1:

<p>The contestant was asked to spell “pleonasm.”

She asked for the definition and was told that <dfn>pleonasm

➥ </dfn> means <q>a redundant word or expression</q> (Ref:

<cite><a href="http://dictionary.reference.com/browse/

➥ pleonasm">dictionary.com</a></cite>).</p>

Useragentstypicallyitalicizedfntextbydefault:


The contestant was asked to spell “pleonasm.” She asked for the

definition and was told that pleonasm means a redundant word or

expression (Ref: dictionary.com).

Notethatalthoughpleonasmappearstwiceinourexample,dfnmarksthesecondoneonly,becausethat’swhenIdeinedtheterm(thatis,it’sthedeininginstance).Similarly,ifIweretousepleonasmsubsequentlyinthedocument,Iwouldn’twrapitindfnbecauseI’vealreadydeinedit.However,Icouldaddanidtothedfnandlinktoitfromotherpointsinthedocumentorsite.Pleasealsonotethatyoudon’tneedtousetheciteelementeachtimeyouusedfn,justwhenyoureferenceasource.

dfnmayalsoencloseanotherinlineelementlikeabbr,whenappropriate.

Example2:

<p>A <dfn><abbr title=”Junior”>Jr.</abbr></dfn> is a son who

has the same full name as his father.</p>

tip dfnisalsoappropriateinadefinitionlist.PleaseseethedlanddtelementsinChapter4formoredetails.

HTML5andthedfnElementHTML5says,“Theparagraph,descriptionlistgroup,orsectionthatisthenearestancestorofthedfnelementmustalsocontainthedeinition(s)forthetermgivenbythedfnelement.”Thepreviousparagraphexamplesreflectthis.

HTML5alsostipulatesthatifyouusetheoptionaltitleattribute,itshouldbethesameasthedfnterm.However,if,asinExample2,younestasingleabbrindfnandthedfndoesnothaveatextnodeofitsown,theoptionaltitleshouldbeontheabbronly.


emEmphasizetext

Syntax <em></em>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsetheemelementtoconveyemphasis.Itscounterpartisthestrongelement,whichconveysgreateremphasis.(Pleaseseethe“HTML5andtheemElement”boxconcerningdifferencesinHTML5.)

Althoughbothemandtheielementrendertextinitalicsbydefault,alwaysuseemwhenemphasizingcontentsinceithassemanticmean-ingandidoesn’tinX/HTML.Pleaseseetheientryinthischapterforadetaileddiscussionaboutivs.em.

Example:

<p>Your Ford Pinto is <em>really</em> cool.</p>

Thistypicallydisplaysbydefaultasfollows:

Your Ford Pinto is really cool.

YoucanchangethedisplaywithCSS,ofcourse,evenmakingitboldifyou’dlike.

note It’snotappropriatetouseemsimplyasameanstoitalicizetext.Asalways,choosethepropersemanticelementforyourcontentandthen

styleit.Forinstance,theremaybetimeswhentheciteelementistherightchoiceinsteadofem.


HTML5andtheemElementInHTML4,emisforemphasis,andthestrongelementisforgreateremphasis.HTML5redeinesthemabit,soemaccountsforalldegreesofemphasisandstrongconveysimportance.It’sasubtleshift.

InHTML5,emrepresentsdifferentlevelsofemphasisbywhetherit’snestedinanotherem;eachnestedlevelisemphasizedmorethanitsparent.HereI’veadjustedthepreviousexampletodemonstrate:

<p>Your Ford Pinto is <em><em>really</em> cool</em>.</p>

Now,I’memphasizingbothreallyandcool,butreallyisstrongerbecauseit’scontainedinthenestedem.

HTML5alsoremindsusthatemchangesthemeaningofasentencebywhereitappears.Forinstance,thenextexampleconveysthat“your”Pintoisreallycool,whilesomeoneelse’sisn’t.

<p><em>Your</em> Ford Pinto is really cool.</p>

Asanotherexample,ifyouwereexcitedbeyondbeliefbythePinto,youcouldconveyitbyplacingtheentiresentenceinanemandadd-inganoptionalexclamationmarktoleavenodoubt:

<p><em>Your Ford Pinto is really cool!</em></p>

iItalicizedtext

Syntax <i></i>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionInX/HTML,theielementispurelypresentational;itrenderstextinital-icsbutprovidesnomeaning.Youcanthinkofitasaspanelementthatisitalicizedbydefault.Becauseit’ssolelypresentational,ifelloutoffavorseveralyearsagolikethebelement.Usetheemelementinsteadtoemphasizetext,sinceithassemanticvalueanddoesn’tspeaktohowtheenclosedtextshouldlook.

Example:



<p>He had a great final kick, but <em>just</em> missed

catching the race leader.</p>

Useragentsrenderbothemandithesameway(andbothcanbealteredwithCSS):

He had a great final kick, but just missed catching the race leader.


bandivs.strongandem,aLittleBackground,andHTML5

Thebandielementswerethesubjectofmuchopinionateddiscus-sionintheearlierdaysofHTML5’sevolution.Somecalledfortheirdeprecationorremoval,whileothersthoughttheyhadtoremain.Thoughadecisionhasbeenmade,thesentimentshaven’tchanged.

Youcouldspendhoursreadingallanglesoftheargumentsbothforandagainstbandi,buttheyboildowntoacouplekeyposi-tions:Thoseagainstthemthinkit’swrongtouseanelementstrictlyintendedforpresentationandthatconveysnosemanticmeaning;thoseforthemthinkbandiaretooentrenchedintheWeb(manymillionsofpagesusethem)andbelieveemandstrongarenotappro-priatesemanticsforeverycase.

Tothelatter,thereareestablishedtypographicconventionsintradi-tionalpublishingthatfallbetweenthecracksoftheavailableHTMLsemantics.Amongthemareitalicizingcertainscientiicnames(forexample,“TheUlmusamericanaistheMassachusettsstatetree.”),foreignphrases(forexample,“Thecoupleexhibitedajoiedevivrethatwasinfectious.”),andnamedvehicles(forexample,“TheOrientExpressbeganservicein1883.”).Theseitalicizedtermsaren’tempha-sized,juststylizedperconvention.Therearefewercasesforbold,butHTML5citeskeywordsinadocumentabstractandaproductnameinareviewasexamples.

Ratherthancreateseveralnewsemanticelements(andfurthermuddythewaters)toaddresscaseslikethese,HTML5takesapracti-calstancebytryingtomakedowithwhatwehave:emforalllevelsofemphasis,strongforimportance,andbandiforthebetween-the-crackscasesto“stylisticallyoffset[thetext]fromthenormalprose.”Thenotionisthatalthoughbandidon’tcarryexplicitsemanticmeaning,thereaderwillrecognizeadifferenceisimplied.Andyou’restillfreetochangetheirappearancefromboldanditalicswithCSS.



bandivs.strongandem,aLittleBackground,andHTML5(continued)

Makenomistake,though,HTML5doesemphasizethatyouusebandionlyasalastresortwhenanotherelement(suchasstrong,em,cite,andothers)won'tdo.

HTML5’sapproachisunderstandable,allthingsconsidered.Thatbeingsaid,theideaofalwaysusingemandstronginsteadofiandb,respectively,issowovenintothefabricofstandards-focuseddevel-opersthatthemajorityareunlikelytodeviate.Manyofthemstillthinkitisbettertoaddsomemeaningtoanelement(suchaswithem),evenifitisn’tquiteonpoint,thanitistousewhattheyperceivetobeasolelypresentationalelement.

insInsertedcontent

Syntax <ins></ins>Attributes Core,I18n,Events,cite,datetime,HTML5Only:Global

DescriptionUsetheinselementtodenotecontentyou’veaddedtoanHTMLdocu-mentsinceapreviousversionincaseswhentrackingthehistoryaddsvalue.insisoftenusedinconjunctionwiththedelelement,whichdenotesdeletedcontent.Assuch,bothelementsandtheirattributesaredescribedingreaterdetailinthedelentryinthischapter.


kbdTextforusertoenter

Syntax <kbd></kbd>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethekbdelementtomarkuptexttheusershouldenter.Itappliestobothletterstypedandkeyspressed.

Example:

<p>To log into the demo:</p>

<ol>

<li>Type <kbd>tryDemo</kbd> in the User Name field</li>

<li><kbd>TAB</kbd> to the Password field and type

<kbd>demoPass</kbd></li>

<li>Hit <kbd>RETURN</kbd> or <kbd>ENTER</kbd></li>

</ol>

Useragentstypicallydisplayamonospacefontforkbdbydefault.Ourexample(sanstheparagraph)wouldrenderlikethis:

1. Type tryDemo in the User Name field

2. TAB to the Password field and type demoPass

3. Hit RETURN or ENTER

tip Pleaseseethecode,samp,andvarelementsforothercomputer-andprogramming-relatedsemantics.


pAparagraph

Syntax <p></p>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionThepisoneofthemost-usedelementsontheWeb,whichshouldcomeasnosurprisesinceitspurposeistodeineaparagraph.

Youmayuseponitsown(seeExample1)orinconjunctionwithnestedinlineelements.Forinstance,youmayseeanimgelementinaparagraph,alongwithelementsthatenrichthesemanticsofthecontent,suchasciteinExample2.

Examples:

<p>Centuries-old sisters, Marge and Priscilla, were the

creation of the children’s fertile imaginations.</p>

<p><img src=”movie_poster.jpg” width=”300” height=”175”

alt=”Monty Python and the Holy Grail poster” /><cite>Monty

Python and the Holy Grail</cite> was released in 1975.</p>

Asshownhere,browsersrendereachparagraphonitsownlinebydefault:

Centuries-old sisters, Marge and Priscilla, were the creation of the

children’s fertile imaginations.

. . . next paragraph . . .


DeprecatedAttributesn align:UsetheCSStext-alignpropertywithavalueofcenter,

justify,left,orrightinstead.

note Nestingablock-levelelementinaparagraphisnotallowed.

prePreformattedtext

Syntax <pre></pre>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethepreelementtorenderpreformattedtext.Themostcommonusecaseistopresentablockofcode,butyoumayalsouseprefortextandASCIIart.

Example1(code):

<pre>

<code>

var band = {

bass: "Geddy",

guitar: "Alex",

drums: "Neil",

showsPlayed: "2112"

};

</code>

</pre>


Browserstypicallyrenderthisasshown(sanstheoutline)andinamono-spacefont:

Asyousee,prepreservestheindentation,sothecodeblockdisplaysinfromtheleftedge.Withoutpre,thecodedisplayslikeasentence,makingithardertoreadevenforoursimpleexample:

var band = { bass: "Geddy", guitar: "Alex", drums:

"Neil", showsPlayed: "2112" };

Hereisanexamplewithtext.

Example2(text):

<pre>

This is flush left.

This begins fourteen spaces from the left side.

This begins six spaces from the left side and two lines

➥ down.

</pre>

Asexpected,itdisplaysjustasitappearsinthecode(andasthecontentdescribes).

You’llnoticethattheparagraphsaren’twrappedinpelements.Thisisdeliberate,becauseit’sinvalidtonestmanyHTMLelementsinsidepre,


includingp,sub,sup,andmore.Besuretovalidateyourpagestocheckwhetheryou’veaccidentallyincludedaninvalidelementinapre.

PresentationConsiderationswithpreBeawarethatuseragentstypicallydisableautomaticwordwrappingofcontentinsideapre,soifit’stoowide,itmightaffectyourlayoutorforceahorizontalscrollbar.ThefollowingCSSruleenableswrappingwithinpreinmanybrowsers,butnotInternetExplorerexceptversion8wheninIE8mode.

pre {

white-space: pre-wrap;

}

Onarelatednote,inmostcasesIdon’trecommendyouusewhite-space:pre;onanelementsuchasdivasasubstituteforpre,becauseiftheuseragentdoesn’tsupportCSS,theformattingwillbelost.Furthermore,thewhitespacecanbecrucialtothesemanticsoftheenclosedcontent,especiallycode,andonlyprealwayspreservesit.

DeprecatedAttributesn width:UsetheCSSwidthpropertyinstead.

note preisn’tashortcutforavoidingmarkingupyourcontentwithpropersemanticsandstylingitspresentationwithCSS.Forinstance,ifyou

wanttopostanewsarticleyouwroteinawordprocessor,don’tsimplycopyandpasteitintoapreifyoulikethespacing.Instead,wrapyourcontentinpelementsandwriteCSSasdesired.

tip Pleaseseethecode,kbd,samp,andvarelementsinhischapterforothercomputer-andprogramming-relatedsemantics.


qAshortquotation

Syntax <q></q>Attributes Core,I18n,Events,cite,HTML5Only:Global

Usetheqelementtoencloseashort(inline)quotationthatdoesn’trequireaparagraphbreak.Thequotationmaybeaphrasesomeonesaidorareferencefromadocument,movie,song,andsoon.qisthecounter-parttotheblockquoteelement,whichisforlong(block-level)quotations.

Example1:

<p>Kathy is fond of quoting her favorite movie,

<cite>Phantasm</cite>, by exclaiming, <q cite=”http://

➥ www.phantasmscreenplay.com”>You play a good game, boy, but

the game is finished!</q> every chance she gets.</p>

qcanstandonitsownorbepairedwiththeciteelement(inotherwords,<cite>Phantasm</cite>),asinExample1.

Authorsshouldnotincludequotationmarkswhentheyuseq.MostuseragentsautomaticallyrenderthemasrequiredbyHTML4andHTML5.However,InternetExplorer7andolderfailtodoso.Hereisthecorrectrendering:

Kathy is fond of quoting her favorite movie, Phantasm, by exclaiming,

“You play a good game, boy, but the game is finished!” every chance

she gets.

Besureyoudon’tuseqsimplybecauseyouwantquotationmarksaroundawordorphrase,though.Forinstance,<p>Helikestheword<q>morsel.</q></p>,isimproperbecausemorselisn’taquotationfrom


asource.Inthatcase,usecharacterentities,suchas<p>Helikestheword“morsel.”</p>(or"oneachsideforstraightquotationmarks).

AttributesinDetailn cite:UsethisoptionalattributetoincludeaURItothesourceyouare

quoting.Forinstance,Example1pointstothePhantasmscreenplayonasite(ictitious,inthiscase).Pleaseseethedelelemententryinthischapterformoredetailsaboutciteaccessibilityandpresenta-tionissues.(Notethattheciteattributeisdifferentfromtheciteelement,whichisalsousedinExample1anddescribedinfullelse-whereinthischapter.)

NestedQuotationsYoumayalsonestaqinsideanotherone.

Example2:

<p>The short story began, <q>When she was a child, she would

say, <q>Hello!</q> to everyone she passed.</q></p>

Sinceouterandinnerquotationsaretreateddifferentlyinlanguages,addthelangattributetoqasneeded.UseragentsaresupposedtorenderExample2withsinglequotationsaroundthenestedportion,likethis:

The short story began, "When she was a child, she would say, ‘Hello!’

to everyone she passed."

However,supportisinconsistent(evenwithlangexplicitlydeclared),includingamongmodernbrowsers,surprisingly.Firefoxhandlesitcorrectly,whilethelikesofChromeandSafarirenderdoublequotationsinallcases.


tip

Ahandfulofonlinetutorialsdiscusssolutionsforshowingquotationmarksforqacrossbrowsersconsistently.Twoexamplesarehttp://

monc.se/kitchen/129/rendering-quotes-with-cssandhttp://juicystudio.com/article/fixing-ie-quotes.php. Becauseofthecross-browserissues,youmaysurroundaquotationwithacharacterentitysuchas“(leftquotation)and”(rightquotation)or"(straightquotationoneachside)insteadofusingq.Similarly,‘and’renderleftandrightsinglequotations,respectively.Youdolosesomeofthesemanticswiththisapproach,though.

sampSampleoutputtext

Syntax <samp></samp>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionThesampelementrepresentssampleoutputtextfromaprogramorscript.

Example:

<p>Once the payment went through, the site returned a message

reading, <samp>Thanks for your order!</samp></p>

Useragentstypicallydisplaysampcontentinamonospacefontbydefault,likethis:

Once the payment went through, the site returned a message reading,

Thanks for your order!

tip Pleaseseethecode,kbd,andvarelementsforothercomputer-andprogramming-relatedsemantics.


smallSmallertext

Syntax <small></small>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionTextcontainedinasmallelementrendersinanindeterminatesmallersize(anditmayvaryinuseragents).Likethebigelement,smallisn’toficiallydeprecatedinX/HTML,butpracticallyspeakingitis,anddevel-opersareadvisednevertouseit(seethe“HTML5andthesmallElement”boxforanexception).Instead,controlyourfontsizewithCSSinconjunc-tionwithapropersemanticelement.Theemelementisoftenagoodsubstitute,asshownhere.

Example:

<p>His handwriting was <em>very, very tiny</em>, so he was

able to fit a term’s worth of notes on a single page.</p>

His handwriting was very, very tiny, so he was able to fit a term’s

worth of notes on a single page.

Theemtextwon’tbesmallerthanitssurroundingtextbydefault,butyoucanstyleitwithCSSasyouplease.Usespanincaseswhenemoranotherelementdoesn’tfeelappropriateforyourcontentandyoujustneedacontainertofacilitatemakingitsmallerwithCSS.


HTML5andthesmallElementHTML5hasredeinedthesmallelementtoputittouseinsteadofmakingitobsoletelikethebigelement.

AccordingtoHTML5,usesmallforsidecommentssuchasineprint,which“typicallyfeaturesdisclaimers,caveats,legalrestrictions,orcopyrights.Smallprintisalsosometimesusedforattribution,orforsatisfyinglicensingrequirements.”

smallisintendedforbriefportionsofinlinetext,notspanningmul-tipleparagraphsorotherelements.

Example:

<p>Order now and you'll receive free shipping. <small>

(Some restrictions may apply.)</small></p>

smallshouldnotbeconfusedwiththeHTML5-onlyasideelement,whichmaycontainlargeblocksofcontent(someofwhichmayincludesmallelements).PleaseseetheasideentryinChapter11formoredetails.

Lastly,ifyouusesmallwithemandstrong,itdoesn’tdiminishtheweightofthemeaningofthoseelements.


strongStrongertextemphasis

Syntax <strong></strong>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethestrongelementtoconveystrongeremphasisthanitscounter-part,theemelement.(Note:ThemeaninghaschangedinHTML5.Pleaseseethe“HTML5andthestrongElement”box.)

Althoughbothstrongandthebelementrenderinboldbydefault,alwaysusestronginsteadwhenconveyingstrongeremphasissincebispurelypresentationalandhasnosemanticmeaninginX/HTML.Pleaseseetheielemententryinthischapterforadetaileddiscussionaboutbandivs.strongandeminHTML5.

Examples:

<p>They've been married for <strong>44 years</strong>!</p>

<p><strong>Warning:</strong> Pan will be hot.</p>

strongtypicallyrendersbydefaultlikethis:

They’ve been married for 44 years!

YoucanchangeitwithCSS,ofcourse,evenmakingititalicizedifyou’dlike.

note It’snotappropriatetousestrongsimplyasameanstoboldtext.Asalways,choosethepropersemanticsforyourcontentandthenstyleit.

Forinstance,ifyou’retemptedtousestrongtocreateaheading,usetheappro-priateheadinglevel(h1–h6)instead.


HTML5andthestrongElementInX/HTML,emisforemphasis,andthestrongelementisforgreateremphasis.HTML5redeinesthemabit,soemaccountsforalldegreesofemphasisandstrongconveysimportance.It’sasubtleshift.Theirstexampleshownearlier(thatis<p>They’vebeenmarried...</p>)woulduseeminHTML5insteadofstrong.

Additionally,inHTML5,strongindicatesagreaterlevelofimpor-tanceeachtimeit’snestedinanotherstrong.Let’ssupposewewraptheentiresecondexampleinstrong:

<p><strong><strong>Warning:</strong> Pan will be hot.

➥ </strong></p>

Theinnerstrong,inotherwords,<strong>Warning:</strong>,con-veysgreaterimportancethantheparentstrong.

subAsubscript

Syntax <sub></sub>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethesubelementtomarkupcontentsuitableforsubscriptnotation(inotherwords,notjustbecauseyouwantcontenttoappearbelowthelineoftext).

Example:

<p>The chemist asked for a glass of H<sub>2</sub>O.</p>


Asyouwouldexpect,useragentsrendersubtextbelowothertextonthesamelinebydefault,likeso:

The chemist asked for a glass of H2O.

LineSpacing,subandsupIfyouhaveaparagraphthathasmorethanonelineandcontainsoneormoresuborsupelements,thespacingbetweenthelinesmayvary,dependingonthebrowserandyourpage’sfontandline-heightsettings.YoucansolvethiswithCSS.Solutionsareavail-ableonlineifyousearchforlinespacingwithsupandsub.However,donotheedanyadvicesuggestingyouuseanelementotherthansuborsuptocircumventthislayoutissue.

supAsuperscript

Syntax <sup></sup>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethesupelementtomarkupcontentsuitableforsuperscriptnotation(inotherwords,notjustbecauseyouwantcontenttoappearabovethelineoftext).

Example:

<p>The mathematician wrote 4<sup>3</sup> for his age.</p>


Asyouwouldexpect,useragentsrendersuptextaboveothertextonthesamelinebydefault,likeso:

The mathematician wrote 43 for his age.

tip Pleaseseethe“LineSpacing,subandsup”boxinthischapter.

tt

Teletypeormonospacetext

Syntax <tt></tt>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionThettelementispurelypresentational;ittypicallyrendersintheuseragent’smonospacefontbydefaultbutconveysnomeaning.ttisn’tofi-ciallydeprecated,butpracticallyspeakingitis,andyoushouldnotuseit.

Instead,usetheelementthatmostaccuratelydescribesthemeaningofthecontent,andthenstyleitwithCSSasdesired.Thecode,kbd,andsampelements(alldescribedelsewhereinthischapter)aregoodseman-ticcandidatesformostinstanceswhereyoumighthavebeentemptedtousett.

HTML5andthettElementThettelementisobsoleteinHTML5.


varAvariable

Syntax <var></var>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionUsethevarelementtomarkupavariableorcomputerprogramargument.

Examples:

<p>If <var>x</var> is the number of marathons Heather has

run, she has run 419.2 total miles in the races, and each

one is 26.2 miles, what is the value of <var>x</var>?</p>

<p>Einstein is best known for <var>E</var>=<var>m</var>

<var>c</var><sup>2</sup>.</p>

Useragentstypicallyrendervarinitalicsinthesamefontasothertextbydefault,likeso:

If x is the number of marathons Heather has run, she has run 419.2

total miles in the races, and each one is 26.2 miles, what is the value

of x?

Einstein is best known for E=mc2.

varandthecodeElementTherearevaryingopinionsaboutwhetheroneshouldusevartomarkupvariablesinsidethecodeelement.HTML4isn’tmuchhelp,because


itsimplysaysvar“indicatesaninstanceofavariableorprogramargu-ment”andprovidesnoexamples.

Generalconsensusisit’sprimarilyintendedforinstancessuchasthoseinourexamplesandothersrepresentingaplaceholdervariable.(IfyouweremarkingupaMadLibssheet,youwouldput<var>adjective</var>,<var>verb</var>,andsoon.)Isuggestthatifyouaremarkingupcode,varisnotrequired,thoughmaybeusedifyouneedtodifferentiatethevariablesfromtheothercode(assumingyouaren’temphasizingavari-able,inwhichcaseemwouldbemoreappropriate).

tip Seethecode,kbd,andsampelementsforothercomputer-andprogramming-relatedsemantics.

Embeddedcontentistypicallysomeformofmedia:animage,amovie,aFlashapplication,andsoon.Ineachcase,it’sanexternalresourcethat’sloadedintoyourpage.Thischapterfocusesontheelementsthatfacili-tatethat.

Ifyou’reworkingonanHTML5site,besuretocheckoutthischapter’scompanion,Chapter13,whichfocusesonembeddedcontentelementsuniquetoHTML5,includingaudio,video,canvas,andmore.

note Lookingfortheembedelement?PleaseseeChapter13.Thoughinwidespreaduseforyears,itwasn’tpartoftheX/HTMLspecs.

However,HTML5makesitofficial.

EmbeddedContent(ImagesandObjects)

6


areaAregionwithinamap

Syntax <map> <area>or<area /></map>

Attributes Core,I18n,Events,accesskey,alt,coords,href,nohref*,shape,target*,onblur,onfocus,HTML5Only:Global,hreflang,media,ping,rel,type

DescriptionTheareaelementdeinesaregionwithinaclient-sideimagemapandmaybeusedonlyinconjunctionwiththemapelement.Pleaseseethemapentryinthischapterforafullexplanation.

AttributesinDetailPleaseseethemapentryinthischapterformoreinformationaboutthealt,href,andshapeattributes.n accesskey:Pleasesee“Attributes”inChapter1.n nohref:*ObsoleteinHTML5.Whenpresent,thisBooleanattribute

speciiesthattheareadoesn’thavealink.n onblur=”script”:Thiseventireswhenanarealosesfocus,whichisto

saywhenuserstabawayfromorclickoutsidethedeinedregion.It’stheoppositeofonfocus.AswithallJavaScriptevents,itisbesttoadditunobtrusivelyratherthaninlineintheareaelement’sHTML.(SearchonlineforunobtrusiveJavaScripttolearnmore.)

Part2:HTMLElementsandGuidance Chapter6:EmbeddedContent(ImagesandObjects) 143

n onfocus=”script”:Thiseventireswhenanareagainsfocus,whichistosaywhenuserstabtothedeinedregion(orastheyarepressingthemousebuttononthelinkinbrowserslikeIEandOpera).It’stheoppositeofonblur.AswithallJavaScriptevents,itisbesttoadditunobtrusivelyratherthaninlineintheareaelement’sHTML.(SearchonlineforunobtrusiveJavaScripttolearnmore.)

n target=”framename”:*NotallowedwithStrictDOCTYPEs.Thisdeinestheframeoriframeinwhichtoopenthehref.PleaseseeChapter10formoredetails.Useitonlyifhrefispresent.

HTML5andtheareaElementSincethenohrefattributedoesn’texistinHTML5,simplydon’tincludehreftomakeanareanotlinked.

AttributesinDetail

Framesdon’texistinHTML5,soyoucanusethetargetattributeonlytopointanhreftoaniframe.

areahastheseadditionalattributesinHTML5:n hreflang=”langcode”:Thisindicatesthebaselanguageofthe

href’sdestination,muchlikethewaythelangattributespeciiesthelanguageofotherHTMLelements.Hence,youmayusehreflangonlywhenhrefispresent.

n mediaandping:Pleaseseethe“HTML5andtheaelement”boxintheaentryofChapter5formoredetails.

n rel:PleaseseetheaentryofChapter5formoredetails.n type=”content-type”:Thistellstheuseragentthecontenttypeof

thecontentatthelink’sdestination.Itisonlyadvisory.


imgAnembeddedimage

Syntax <imgsrc="">or<imgsrc=""/>

Attributes Core,I18n,Events,alt,height,ismap,longdesc*,name*,src,usemap,width,HTML5Only:Global

DescriptionTheimgelementembedsanimageinthedocument.ImagesaretypicallyaGIF,JPEG,orPNG.

imguseisprettystraightforward.Inmostcases,you’llusejustthealt,height,src,andwidthattributes.

Example:

<p>

<img src=”dave_roberts_steal.jpg” width=”320” height=”240”

alt=”Dave Roberts slides in safely to second.” />

. . .

</p>

Althoughyoucansetthewidthandheighttoothervalues,it’sbesttousetheimage’sintrinsicdimensions.Ifyoumakeanimagelarger,itwillappeardistorted.Ifyoumakeitsmaller,you’reusingmorebandwidththanisnecessarytodisplaythedesiredimagesize.Instead,cutoutasmallerversionoftheimage,andembedthatoneinyourpage.

Thealtattributeiscriticalforaccessibility,becauseitprovidesabriefdescriptionoftheimageasalternatetextforscreenreaders.Thetextalsodisplaysinmostbrowsersiftheimagefailstoloadorifimagesare


turnedoff.Ifanimagedoesn’twarrantalttext,putalt=””(screenread-erstypicallyignoretheseemptyaltvalues,butwithoutthemthey’lloftenreadaloudtheimgsrcvalue).

AttributesinDetailn alt=”text”:Includeanaltattributeforeveryimagetoenhanceacces-

sibility.Pleaseseethedescriptionjustbefore“AttributesinDetail.”n height=”percentageorpixels”:Thisspeciiestheimage’sheight,typi-

callyinpixels.Theimagestretchesorshrinksaccordingly.Whensettoapercentage,it’srelativetoitsparentcontainer’sheight.

n ismap:Whenpresent,thisBooleanattributeindicatesthattheimageispartofaserver-sideimagemap.Thistypeofimagemapisrarelyusedanymore,butwhenitis,theimgmustbeinanaelementwhosehrefpointstotheserver-sidescript.Seethemapentryinthischapterforanexampleofaclient-sideimagemap,thepreferredapproach.

n longdesc=”uri”:*ObsoleteinHTML5.Thispointstoaresource(thatis,atextile,HTMLpage,andsoon)withalongerdescriptiontosupple-ment(notreplace)altwhenitsbriefdescriptionisn’tsuficient.Whentheimgisassociatedwithanimagemap,describetheimagemap’scontents.

n name=”cdata”:*DeprecatedinXHTML.ObsoleteinHTML5.Eventhoughnameisn’tdeprecatedinHTML4,alwaysuseidinsteadtoidentifyanimageforthepurposesofscriptingorstylingwithCSS.

n src=”uri”:Thisspeciiestheimage’slocation.n usemap=”#name”:Thisassociatestheimagewithamapelement.It

mustbe#followedbythemap’snameattribute.Pleaseseethemapentryinthischapterforanexample.Notethatwhentheusemap


attributeispresent,theimagecannotbecontainedinsideeitheranaorabuttonelement.

n width=”percentageorpixels”:Thisistheimage’swidth,typicallyinpixels.Whensettoapercentage,it’srelativetoitsparentcontainer’swidth.

DeprecatedAttributesUsetheCSSpropertieslistedinparenthesesinsteadofthesedeprecatedattributes:align(floatandvertical-align),border(border),hspace(margin-leftandmargin-right),andvspace(margin-topandmargin-bottom).AlloftheseattributesareobsoleteinHTML5.

mapImagemapcontainer

Syntax <mapname=””> <area>or<area/></map>

Attributes Core,I18n,Events,name,HTML5Only:Global

DescriptionAnimagemapspeciiesoneormoreregionswithinasingleimage,typi-callyforthepurposesoflinkingittoanotherpageorresource.Themapelementcontainstheareaelementsthatdeinethelinkedregions.

Considerthefollowingexample,whichtakesaphotoofitemsinagarageandcreateslinkstoindividualpagesaboutthewashingmachine,tire,andtricycle(what,youdon’tblogaboutyourgarage?).

Example:

<div>

<img src=”things_in_the_garage.jpg” width=”400”

height=”300” alt=”Things in the garage, including a

tire, tricycle and washing machine.” usemap=”#garage” />

<map name=”garage”>

<area shape="rect" coords="16,21,132,152"

href="washing-machine.html" alt="Learn about the

washing machine" />

<area shape="circle" coords="194,159,45"

href="tire.html" alt="Learn about the tire" />

<area shape="poly" coords="288,88,381,194,251,195"

href="tricycle.html" alt="Learn about the tricycle" />

</map>

</div>

Theimgelement’susemapattributeassociatestheimagewiththemap;itmustbe#followedbythemap’snameattribute.Amapcanbeassociatedwithmorethanoneimginapage.(TheHTMLValidatormayincorrectlytellyounameisdeprecatedforStrictDOCTYPEs.)

Eachareaelementdeinesaregionwithintheimage,andhrefdeinestheregion’slinkdestinationURI.Therearefourshapevaluesfromwhichtochoose:circle,poly,rect,anddefault.Declareashapewiththeshapeattribute,anddeineitscoordinateswithcoords(they’rerelativetothetop-leftcorneroftheimage).

Herearetherules:n Whenshape=”circle”,thecoordsattributetakesthreenumbers:the

x,ycoordinatesofthecircle’scenter(forexample,194,159)andthecircle’sradius(forexample,45).


n

Whenshape=”poly”,thecoordsattributetakesthreeormorepairsofx,ycoordinatestodeineapolygon.Intheexample,thethreepointsare288,88and381,194and251,195.

n

Whenshape=”rect”,coordstakestwopairsofnumberstodeinearectangle.Theirsttworepresentthex,ycoordinatesofthetop-leftcorner(forexample,16,21),andthesecondtwoarethebottom-rightcorner(forexample,132,152).

n Whenshape=”default”,itspeciiestheentireimage(coordsisnotrequired).

n

Whenshapeisn’tincluded,theregionshapedefaultstorect.

Thealtattributeonareaismuchdifferentthanitisonanimg.Itshouldreadlikelinktextregardingthehrefdestination(seetheexample),notdescribethatregionoftheimage.altisavailabletoscreenreaderuserssothey’llknowwhytofollowalink.InternetExplorerdisplaysitasatooltip.Usethetitleattributetodisplayatooltipforallbrowsers,butalwaysincludealtregardlessunlessyouhaven’tdeinedhref.

tip Inreality,mostpeopleuseatooltodrawtheregionsandgeneratethemapand area coderatherthanfiguringoutallthecoordinatesby

hand.ManyHTMLeditorshavesuchatoolbuiltin,butifyoursdoesn’t,searchforimagemapeditoronline.

note Technically,mapcanbeassociatedwithanobjectorinputelement,too,butyou’llrarelyseethisinpractice.

AttributesinDetailn name=”text”:Deinesthenameofyourimagemapinordertoassoci-

ateitwithanimageviatheimgelement’susemapattribute.Pleaseseetheexample.


objectAgenericembeddedobject

Syntax <object></object>Attributes Core,I18n,Events,archive*,classid*,codebase*,code-type*,data,declare*,height,name,standby*,tabindex,type,usemap,width,HTML5Only:Global,form

DescriptionTheobjectelementaddsanexternalresource,typicallymediacontentsuchasFlashapplications(games,video,audio,andsoon)butalsoimages,video(QuickTime,andsoon),documents(PDF,Word,andsoon),andJavaapplets(prettyrarenowadays).object’sbrowsersupportvariesbythetypeofcontent,sobesuretotestitaccordingly.ByfaritsmostprevalentuseisforloadingFlashapplications.

Theobject’sinnercontentisfallbackcontentforsearchenginesandbrowsersthatdon’tsupportwhattheobjectwouldotherwiseload.Makesurethealternativecontentrelectstheintendedcontentorisamessageinformingusershowtheycanaccessit,suchaswheretodown-loadaplug-in.

Example1showsanobjectthatloadsaSWF,alongwithitsalternativecontent.Note:Thisismerelytodemonstrateasimpleobject.Idon’trecom-mendyouusethiscodetoembedFlashbecauseitwon’tstreamamovieinIE.YoucanuseSWFObject2,discussedinamoment,forabetterapproach.

Example1:

<object type="application/x-shockwave-flash"

data="how_to_change_tire.swf" width="512" height="384">


<param name="movie" value="how_to_change_tire.swf" /> 



<h2>How to Change a Tire</h2>

<ol>

<li>Remove spare tire and jack from trunk</li>

. . . remaining steps . . .

</ol>

</object>

Youcanalsonestobjects.Ifthebrowsercan’thandletheirstone,itlookstothesecond,andsoon,downtothealternativecontent.Thebare-bonesstructure(inotherwords,withoutactuallyspecifyingobjectdatatoload)lookslikeExample2.

Example2(nestedobjects):

<object>

<object>

<p>Alternative content</p>

</object>

</object>

ProbablythemostubiquitousexampleofnestedobjectsisSWFObject2,averypopularmethodforembeddingFlashinavalid,cross-browsermanner.Somebrowsershandlenestedobjectsbetterthanothers(pleaseseehttp://www.alistapart.com/articles/lashembedcagematch/),soSWFObject2usesIE’sconditionalcommentstoprovideIEwithonesetofobjectcodeandotherbrowserswithanother.Pleasesee“Step1”athttp://code.google.com/p/swfobject/wiki/documentationforanexample.


Objectvs.EmbedYoumightbesayingtoyourself,“Wait,doesn’ttheembedelementembedapplicationslikeFlash,too?”Yes,itdoes,butithasneverbeenanoficialpartofHTMLuntilHTML5(seeChapter13).Althoughit’snowafewyearsold,thisarticlesummarizesthetwoelementsnicely(notjustintermsofFlashembedding),describingprosandconsforeach:http://www.alistapart.com/articles/lashembedcagematch/.IgnoreitsmentionofSWFFixattheend,though;SWFObject2hasreplacedthatmethod.

AttributesinDetailn archive=”URIslist”:*ObsoleteinHTML5.Thisspace-separatedlistof

URIsspeciiesthelocationofoneormorearchives(JARiles,forexam-ple)tospeedupthedownloadoftheobject’sresources,whichmayincludethosespeciiedbyclassidanddata.RelativeURIsarerelativetothecodebaseattributeifit’sset.

n classid=”URI”:*ObsoleteinHTML5.Thisspeciiesthelocationofanobject’simplementation.Forinstance,classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”tellsInternetExplorertoloadtheFlashActiveXcontrol.classid’svaluemaybeinternal,likethepreced-ingvalue,orpointtoalocationontheWeb.

n codebase:*ObsoleteinHTML5.ThissetsthebasepathforresolvingrelativeURIsintheclassid,data,andarchivevalues.Ittakesprece-denceoverabaseattributeinthedocumenthead.Omitittousethedocument’sbaseURI.

n codetype=”content-type”:*ObsoleteinHTML5.Thisindicatesthecontenttypeoftheclassiddatasotheuseragentcandeterminewhetheritsupportsthecontentbeforedownloadingit.Itdefaultstothetypevalueifcodetypeisomitted.

n data=”URI”:Thispointstothedata(resource)tobeembeddedintheobject.Forexample,foraPNG,itcouldbedata=”rowboat.png”.


n declare:*ObsoleteinHTML5.Whenincluded,thisBooleanattributespeciiesthattheobjectshouldnotbeinstantiatedwhenthepageloadsbut,instead,whenanotherelementreferstoit.Anobjectwithdeclaremusthaveanidsoitcanbereferenced,andtheobjectmustappearinthesourcebeforeanyelementthatreferstoit.Onewaytoinstantiateadeclaredobjectiswithalink,asin<p><ahref=”#idOfObject”>Watchthemovie.</a></p>.

n name=”cdata”:Thisspeciiestheobjectnamewhenit’ssubmittedinaform.

n standby=”text”:*ObsoleteinHTML5.Thisspeciiesamessagetodisplaywhiletheobject’simplementationanddataareloaded.

n tabindex:Pleasesee“Attributes”inChapter1.n type=”content-type”:Thisindicatesthecontenttypeofthedata,

helpingauseragentdeterminewhethertoloadit(inotherwords,ifit’ssupported).TheHTTPcontenttypereturnedbytheservertakesprecedence.

n usemap:Thisassociatesamapelementwiththeobjectwhensettothemap’snameattributevalue.Pleaseseethemapelementinthischapterforanexampleofusemapwithimg;thesameprincipleapplieswithobject.

n width=”percentageorpixels”andheight=”percentageorpixels”:Thesespecifytheobject’sdimensionsinpixelsorasapercentageofitsparentelement’ssize.Thoughthey’retechnicallyoptional,somebrowsersrequirethem.

DeprecatedAttributesUsetheCSSpropertieslistedinparenthesesinsteadofthesedeprecatedattributes:align(floatandvertical-align),border(border),hspace


(margin-leftandmargin-right),andvspace(margin-topandmargin-bottom).AlloftheseattributesareobsoleteinHTML5.

HTML5andtheobjectElementThearchive,classid,code,codebase,codetype,declare,andstandbyattributesareallobsoleteinHTML5.Forallofthese,withtheexcep-tionofdeclareandstandby,youcanuseaparamelementwithanameequaltotheattributename(thatis,<paramname="archive"value="..."/>)ifyouneedtopassthatdatatotheembeddedobject.Pleaseseeparaminthischapterformoreinformation.

AttributesinDetail

HTML5requiresatleastthedataortypeattributetobepresent.n form=”formelementID”:Whensettoaformelement’sid,theform

attributeassociatestheobjectwiththatformelement.

paramObjectresourceparameter

Syntax <paramname=""value="">or<paramname=""value=""/>

Attributes Core,I18n,Events,name,type*,value,valuetype*,HTML5Only:Global

DescriptionTheparamelementpassesaparameternameandvaluetotheexternalresourceloadedbyanobjectelementforittouseatruntime.Each


objectmayhavemultipleparams.Therearen’tasetofparamnamesdeinedintheHTMLspecs;it’sunderstoodthattheembeddedresourcewillknowwhattodowiththosepassedtoit.

objectisusedtoembedFlashmorethananytypeofcontent.TwocommonparamstopassaSWFareflashvarsandwmode.Theirstpassesastringofvariables(eachseparatedwith&)intothemovie,andthesecondallowsyoutopositionHTMLontopofaSWFwiththeCSSz-indexproperty(itmayimpactperformance,though,sokeepaneyeoutforthat).

Example:

<object . . .>

. . .

<param name=”flashvars” value=”content=info.xml&page=3

/>”

<param name="wmode" value="opaque" />

. . .

</object>

PleasealsoseeExample1intheobjectentryinthischapter.

AttributesinDetailn name=”cdata”:Theparametername.n type=”content-type”:*ObsoleteinHTML5.Speciiesthecontenttypeof

value’sdesignatedresourcewhenvaluetype=”ref”.n value=”cdata”:Theparametervalue.n valuetype=”data|object|ref”:*ObsoleteinHTML5.Speciiesthe

contenttypeofthevalueattribute.


– Whenvaluetype=”data”,whichisthedefault,itindicatesthatvalue’svalueispassedasastring.

– Youcanpassinaresourcefromanotherobjectwhenvaluetype=”object”andvalueisahashnameoftheotherobject’sid.Examplesare<objectid=”idOfObject"data=”wheelbarrow.gif”type=”image/gif”></object>and<paramname=”image”valuetype=”object”value=”#idOfObject”/>inthesecondobject.

– Whenvaluetype=”ref”,valuemustbeaURIwhereruntimevalues(suchasanimageorasoundile)arestored.

Formsdrivedatagatheringandsearching,whetherit’sforWebapplica-tions,solicitinguser-generatedcontent,sellingproducts,orconductingpolls.

Thischaptercoverstheform-relatedelementscommontoalllavorsofHTML,plusincludestheirnewattributesinHTML5,whichhelpmaketheWebaricherapplicationmedium.

Ifyou’relookingforanoverviewofforms,theformentryprovidesanexampleofacompleteformalongwithitsbehaviorandadescriptionofitscomponents.

Forms

7


buttonAformbutton

Syntax <button></button>Attributes Core,I18n,Events,accesskey,disabled,name,tabindex,type,value,onblur,onfocus,HTML5Only:Global,autofocus,form,formaction,formenctype,formmethod,formnovalidate,formtarget

DescriptionThebuttonelementcanbeasubmitbutton,aresetbutton,orastaticbutton.Inthisregard,itisthesameastheinputelementsoftype=”submit”ortype=”image”(bothofwhichsubmitaform),type=”reset”,andtype=”button”(astaticbutton).

However,buttonisdifferentinthatyoumayplaceHTML(text,images,andmostelements)insideitandstyleitwithCSS.(Youmaystyleinputbuttons,too,buttheydon’tacceptcontentlikebutton.)

Example:<button type=”submit” name=”submitbtn”><strong>Finalize

Order</strong></button>

Theexampleshowsasubmitbuttonandassumesit’scontainedinaformelement.Settype=”reset”foraresetbutton(whichrestoresallformcontrolstotheirinitialvalues),andsettype=”button”forastaticonethatrequiresaddingbehaviorwithJavaScript.DisplayanimagebuttonbyusingeitheranimgasthecontentoraCSSbackground-imagetechnique.

However,buttonhasonemaingotcha:unusualInternetExplorerbehav-ior,particularlyinIE6.(Yes,althoughIE6isold,itremainsarequirementformanyifnotthemajorityofsites.)

Part2:HTMLElementsandGuidance Chapter7:Forms 159

IE6and7,aswellasIE8incompatibilitymode,alldon’tsubmitabutton’svalue;theysubmititscontents—yes,theHTMLthatisbetween<button>and</button>(technically,knownasitsinnerText).Thisisparticularlyoff-puttingwithaformofmethod=”get”becausethatHTMLendsupinyourquerystring.NotethatIE8instandardsmodecorrectlysubmitsthebutton’svalue,asdoallothercommonuseragents.

IE6exhibitsalargerproblemwhenyourformhasmultiplebuttons.Itsubmitsthenameofallthebuttons,notjusttheonetheuserselected,soyoucan’tprocesstheformaccordingly.Forexample,didtheuserselectUpdateShoppingCartorPlaceMyOrder?

Ifyourformhasonlyonebuttonandyou’reusingmethod=”post”(orifthemuddiedquerystringdoesn’tpresentproblems),you’reOK.Otherwise,yoursafestbetisusinginputbuttons,notbuttonelements.inputwithtype=”image”oftenprovidesplentyofcreativecontrol.

AttributesinDetailn accesskeyandtabindex:Pleaseseethe“Attributes”sectionof

Chapter1.n disabled:Pleasesee“AttributesinDetail”fortheinputelementin

thischapter.n name=”cdata”:Thisspeciiesthebutton’snameforthepurposesof

processingtheform.PleaseseethedescriptionfortheprobleminIE6.n onblur=”script”andonfocus=”script”:Pleasesee“AttributesinDetail”

fortheinputelementinthischapter.n type=”button|reset|submit”:Pleaseseethedescriptionfordetails

ofthethreetypes.Iftypeisunspeciied,mostbrowsersdefaulttosubmit,butIE6and7,aswellasIE8incompatibilitymode,alldefaulttobutton,sotheywon’tsubmittheformunlessthetype=”submit”.

n value=”cdata”:Thissetsthebutton’svalue,whichispairedwithitsname.


fieldsetAsetofrelatedcontrols

Syntax <fieldset> <legend></legend>

. . . [form controls] . . .

</fieldset>

Attributes Core,I18n,Events,HTML5Only:Global,disabled,form,name

DescriptionThefieldsetelementgroupstogetheroneormorerelatedformcontrols.Theoptionallegendelementidentiiesthegroup,displaysinthepage,andisreadbyscreenreaders.Pleaseseetheexampleanddiscussionintheformelemententryinthischapter.

HTML5andthefieldsetElementThefieldsetelementsupportstheseadditionalattributesinHTML5.

AttributesinDetailn disabled:Pleasesee“AttributesinDetail”fortheinputelementin

thischapter.n form=”formid”:Pleaseseethe“HTML5andtheinputElement”

boxinthischapter.n name=”cdata”:Thisspeciiesthefieldsetelement’sname.


formAninteractiveform

Syntax <formaction=””>. . . [your form] . . .

</form>

Attributes Core,I18n,Events,accept*,accept-charset,action,enctype,method,name,onreset,onsubmit,HTML5Only:Global,autocomplete,novalidate,target

DescriptionUsetheformelementanditscontrolstocollectdatafromusers.Usesincludeenablingregisteringonasite,submittingshippingandcreditcardinformation,conductingapoll,gatheringusercommentsonablogornewssite,andsoon.(Pleasenotethatyoumaynotnestaformelementinsideanotherone.)

Aformcontainsoneormorecontrols(button,input,select,andtextarea)withwhichtheusercanengage,aswellasotherelements(fieldset,label,andlegend)thataddsemanticandstructuralmeaning.

Theupcomingcodeexampleresultsinthisformdefaultrendering:

note Elementslookdifferentdependingonthebrowserandplatform.YoucandictatetheappearancewithCSStovaryingdegrees.

Thecodethatfollowscontainsallbuttwooftheavailableformchildelementssoyoucanseehowtheyworktogether(buttonandoptgrouparetheonlyonesnotshown,butthey’redescribedintheirrespectiveentriesinthischapter).I’vebrokenthecodeintotwopartstomakeiteasiertodiscussandhavehighlightedatleastoneinstanceofeachform-relatedelementandattributetheexampleuses.

Example(part1):

<h1>Public Radio Station Listener Survey</h1>

<form action="process-form.php" method="post">

<div> 

<label for="fullname">Full Name:</label>

<input type="text" id="fullname" name="fullname"

maxlength="100" />

</div>

<fieldset> 

<legend>Gender</legend>

<input type="radio" id="female" name="gender"

value="female" /> <label for="female">Female</label>

<input type="radio" id="male" name="gender"

value="male" /> <label for="male">Male</label>

</fieldset>

. . . [code from Example (part 2)] . . .

note Iuseadivintheexampletocontainmostformelements.Someprefertouseafieldsetforeachorliswithinalist.Therearenosetrules

aboutthisaslongasyoudon’tuseatable.


Thispartoftheexampleincludestheform,fieldset,legend,label,andtextinputtypeelementsandradiobuttoninputtypeelements.

Theformelement’sstarttagbeginseachform.Intheexample,theaction=”process-form.php”valuespeciiestheserver-sidelocationthatissenttheformdataforprocessingoncetheusersubmitsitviatheSubmitMyInformationbuttonattheendofpart2oftheexample.Pleasesee“AttributesinDetail”concerningmethod=”post”.

Eachformcontrolhasanameattribute,whichispairedwithitsvalueattribute.Thevalueistypicallydictatedbywhattheuserentersorselects.Whenaformissubmitted,eachcontrolnamewithavalueispassedtotheprocessingscript.Thenamemustbeuniquethroughoutaform,withtheexceptionofarelatedsetofradiobuttonsorcheckboxes.Forinstance,inpart1oftheexample,there’saradiobuttoninputeachforfemaleandmale,butbothhavename=”gender”.Theirvalueattri-butesaredifferent,though;theformsubmitsthevalueof“female”iftheuserselectsthatoptionand“male”fortheother.

Thelabelelement’stextdescribesaformield(forexample,<labelfor="fullname">FullName:</label>).Eachlabelelementisexplicitlyassociatedwithacontrolwhenitsforattributevalueisthesameasacontrol’sid.Forinstance,inpart1ofexample,becausetheirstlabelhasfor=”fullname”,it’sassociatedwiththiscontrol:<inputtype="text"id="fullname"name="fullname"maxlength="100"/>(acontrol’snameandidvaluesareoftenthesamebutdon’thavetobe).

note Donotuseaspecific

name(forexample,name=”email”)ononeelementandthesameidvalue(forexample,id=”email”)onadiffer-

entelement,oryou’reboundtorunintoproblemsinInternetExplorerifyoutrytoaccesstheelementswithJavaScript.

Thefieldsetelementgroupstogetheroneormorerelatedformcontrols.Theoptionallegendelementidentiiesthegroupanddisplaysinthe

page.Forexample,afieldsetcontainsourgender-relatedradiobuttons,and<legend>Gender</legend>describesthegroup.legendiscrucialforscreenreaderusersbecauseitprovidescontexttothefieldset’scontrols.

Thatcoversthehighlightsoftheirstpartofourform.Nowlet’slookatthesecondpart.Again,I’vehighlightedportionsthatI’lldiscussafterthecode.

Example(part2):

. . . [code from Example (part 1)] . . .

<div> 

<label for="country">Country:</label>

<select id="country" name="country">

<option value="AF">Afghanistan</option>

<option value="AL">Albania</option>

. . . [more country options] . . .

</select>

</div>

<div> 

<label for="comments">Comments:</label>

<textarea id="comments" name=”comments” rows="3"

cols="40"></textarea>

</div>

<div> 

<input type="checkbox" id="subscribed"

name="subscribed" checked="checked" /> <label

for="subscribed">Yes, I'm a current subscriber</label>

</div>

<div> 

<input type="submit" value="Submit My Information" />

</div>

</form>


Part2oftheexampleincludestheselect,option,textarea,checkboxinputtype,andsubmitbuttoninputtypeelements.

Aselectboxincludesoneormoreoptionelementsthatrepresentthechoicesausermaymake.Forinstance,inthecaseof<optionvalue="AF">Afghanistan</option>,Afghanistanappearson-screen.Iftheuserselectsit,theAFvalueispassedtotheserveruponsubmission.

Atextareaisdifferentfromatextinput(seepart1oftheexample)becauseitcanbeseverallinestall,asdeinedbytherowsattributeandbecauseyoucan’tsetamaxlengthinX/HTML(youcancontrolitwithJavaScript,however).Thecolsattributespeciiesthenumberofcharac-tersallowedonaline,effectivelydeiningitswidth.You’llnoticedifferentrenderingsizesacrossbrowsers;usetheCSSheightandwidthpropertiestonormalizethedimensions.

Nextupisaninputwithatypeofcheckbox.You’llnoticethechecked=”checked”attributeinpart2oftheexamplecode.Thisprese-lectsthecheckbox.(Note:checked=”checked”istheXHTMLsyntax;usesimplycheckedforHTML4,thougheitherformatisacceptableinHTML5.)

Theexample’s<inputtype="submit"value="SubmitMyInformation"/>codedisplaysabuttonthatreadsSubmitMyInformation—orwhateveryouspecifyasthevalue.Becausetheinputissettotype=”submit”,theformissubmittedwhentheuserengagesthebutton.

Thisshouldgiveyouasenseofhowaformworks.Pleaseseetheotherentriesinthischapterforadditionaldetailsabouttheform-relatedelementsandtheirattributes.

AttributesinDetailn accept=”content-typelist”:*ObsoleteinHTML5.Pleasesee“Attributes

inDetail”fortheinputelementinthischapter.


n accept-charset=”charsetlist”:Thisspace-and/orcomma-delimitedlistindicatesthecharacterencodingsforinputdatathattheserverprocessingtheformaccepts.Typically,it’sleftout,sincethedefaultvalueisthereservedstring,“UNKNOWN,”whichbrowsersmayinterpretasthecharacterencoding(suchasutf-8)ofthepagethatcontainstheform.

n action=”uri”:RequiredinX/HTML.Thisattributepointstotheserverlocationthatwillprocesstheformwhenitissubmitted(pleaseseetheexample).Ifomitted,theformwillsubmittothecurrentpage.

n enctype=”content-type”:Whenmethod=”post”,thisattributecanbeusedtospecifytheencodingoftheformdatasenttotheserver.Typically,it’sleftout(thedefaultvalueisapplication/x-www-form-urlencoded);however,youshouldincludeitasenctype=”multipart/form-data”ifyourformincludesaninputwithtype=”file”.Thethirdpossiblevalueistext/plain(dataislargelyunencodedwhensubmitted),butitisusedrarely.

n method=”get|post|plusdelete|putforHTML5”:Themethod="post"declarationmeansthatuponsubmission,theformvaluesaresenttotheserverwithoutbeingexposedtotheuser.Itisthemoresecuremethod.Generallyspeaking,it’sthemethodofchoicewheneveryouwanttopostinformationtotheservertosave,update,orremovedatainadatabase.Anexampleisashippingaddressandcreditcardinfor-mationformonane-commercesite.Whenmethod="get",thevaluesareappendedtotheactionvalue’sURIfollowedbyaquestionmark.Generallyspeaking,usemethod="get"wheneveryouwanttogetinformationfromtheserveraftertheformissubmitted.Anexampleisasearchformthatreturnsresults.Ifaction=”search-results.php”andthesearchinputtextieldhasaname=”searchphrase”attribute,thenthetailendofthe


URIwouldbesearch-results.php?searchphrase=Kermit+and+YodaaftersearchingforKermitandYoda.HTML5includestwomoremethodvalues,deleteandput,whichmaptotheHTTPDELETEandHTTPPUTmethods,respectively.

n name=”cdata”:Thisattributewasincludedforbackwardcompatibilitywithmucholderuseragents,butyoushoulduseidinsteadtoapplyauniqueidentiier(forexample,<formid=”signup”...>)forstylingorscriptingpurposes.

n onreset=”script”:Thiseventireswhentheuseractivatesaninputbuttonwithtype=”reset”.AttachthiseventunobtrusivelyinsteadofasanattributeintheHTML.

n onsubmit=”script”:Thiseventireswhentheformissubmitted,allow-ingyoutoexecuteJavaScript,suchasafunctionthatsubmitstheformviaAjaxinsteadofapagerefreshincaseswherescriptingisenabled.AttachthiseventunobtrusivelyinsteadofasanattributeintheHTML.

HTML5andtheformElementTheformelementhasthreeadditionalattributesinHTML5.

AttributesinDetailn autocomplete:Pleaseseethe“HTML5andtheinputElement”box

inthischapter.n novalidate:Whenpresent,thisBooleanattributeindicatesthat

theform’sdatashouldnotbevalidatedwhenit’ssubmitted.n target=”name”:Thissetsthetargetoftheformsubmissionand

canhaveavalueof_blank,_parent,_self,or_top,oravalueyouspecifythatcouldmatchthenameofaniframe.


inputAninputcontrol

Syntax <inputtype=””/>or<inputtype=””/>

Attributes Core,I18n,Events,accept,accesskey,alt,checked,disabled,ismap,maxlength,name,onblur,onchange,onfocus,onselect,readonly,size,src,tabindex,type,usemap,value,HTML5Only:Global,autocomplete,autofocus,disabled,form,formaction,formenctype,formmethod,formnovalidate,formtarget,height,list,max,min,multiple,pattern,placeholder,required,step,width

DescriptionTheinputelementisthemostdiverseoftheformcontrols,sinceitcanbeacheckbox,aradiobutton,asingle-linetextentryield,hiddenfromtheuser,ameanstouploadaile,animagebuttonforsubmittingaform,andmore.Thetypeattributedictateswhichoftheseshapesaninputtakes.

Examplesofeachtype:

<input type=”button” name=”calculate” value=”Calculate” />

<input type=”checkbox” name=”newsletter” value=”technology” />

<input type=”file” name=”uploadedvideo” />

<input type=”hidden” name=”productids” value=”19382, 10375” />

<input type=”image” name=”submit” src=”btn_submit.png”

alt=”Submit Form” />

<input type=”password” name=”password” maxlength=”25” />

<input type=”radio” name=”color” value=”blue” />

<input type=”reset” name=”reset” value=”Reset Form” />

<input type=”submit” name=”submit” value=”Place Order” />

<input type=”text” name=”firstname” maxlength=”50” />


note Pleaseseethe

formentryinthischapterforanexampleregardinginputsoftype=”checkbox”,type=”radio”,type=”submit”,and

type=”text”,includingascreenshotofhowtheyrenderbydefault.

Aninputoftype=”button”rendersabuttonthatdoesnotsubmittheformwhentheuseractivatesit.Thevalueattributeprovidesthetextthatappearsonthebutton.YoumayuseJavaScripttoapplybehaviortoit.

Aninputoftype=”checkbox”islikeanon/offswitch.Itsvalueissubmit-tedonlywhentheboxisselected(“on”).Likeradiobuttons,asetofrelatedcheckboxesmayhavethesamenameattribute;however,insuchacase,theirvalueattributesshouldbedifferent.Forinstance,youmightofferseverale-mailnewslettersforwhichuserscansignup.Yourcheckboxescouldbe<inputtype=”checkbox”name=”newsletter”value=”design”/>and<inputtype=”checkbox”name=”newsletter”value=”technology”/>.Ausermayselectmultiplecheckboxes.

Aninputoftype=”file”allowsuserstobrowseontheircomputerornetworkforailetoupload.

Aninputoftype=”hidden”doesn’tdisplay,andtheusercannotchangeitsvalue.Ahiddeninputallowsyoutopassdatafrompagetopage.

Aninputoftype=”image”displaysasubmitbuttonthatisrepresentedbythesrcattribute.Whentheformissubmitted,thepasseddataisname.x=x-valueandname.y=y-value.Thenameistheelement’snameattributevalue.x-valueandy-valuearethexandypixelcoordinates—measuredfromthetopleftcorneroftheimage—ofwheretheuserclickedwithintheimage(ifamouseorsimilarpointingdevicewasused).

Useaninputoftype=”password”whenrequestingauser’spassword.Itrenderslikeatextinputexceptthatforprivacy,dots,orasimilarcharac-terdisplayinsteadofthecharacterstheuserenters.


Aninputoftype=”radio”displaysaradiobutton.Radiobuttonstypi-callycomeinsetsofatleasttwo(otherwiseuseacheckbox).Unlikeacheckbox,ausermayselectonlyoneradiobuttonfromasetofthemsharingthesamenameattribute.However,likewithacheckbox,makesureeachrelatedradiobuttonhasadifferentvalue.Pleaseseethegenderexampleanddescriptionintheformentryinthischapter.

Aninputoftype=”reset”displaysabuttonthatresetsallcontrolstotheirinitialvalues(thatis,priortouserinvolvement).ThetextonthebuttonreadsResetunlessyouoverrideitwiththevalueattribute.

Aninputoftype=”submit”displaysabuttonthatsubmitstheformwhentheuseractivatesit.ThetextonthebuttonreadsSubmitunlessyouoverrideitwiththevalueattribute.

Aninputoftype=”text”providesasingle-linetextboxwithanoptionalmaxlengthattributethatlimitsthenumberofcharactersacceptedbythebox.Ifvalueisset,itstextappearsinthetextinputbydefault.Usethetextareaelement(alsointhischapter)toallowforalonger,multilinetextentry.

AttributesinDetailn accept="content-typelist":*ObsoleteinHTML5.Thisattributespeciies

acomma-separatedlistofmediatypesauseragentmayusetoverifythatilessubmittedbyaformviaaninputtype=”file”isacceptable.However,browsersupportispoor,soyoushouldn’trelyonit.Besureyourserver-sideform-processingscriptperformsallrequiredvalidationofuploadediles.

n accesskey:Pleaseseethe“Attributes”sectionofChapter1.n alt=”text”:Thisbehaveslikealtontheimgelement—providingalter-

natetextwhentheimagedoesn’tdisplay—exceptinthiscaseit’sforaninputoftype=”image”.


n checked:Whenpresent,thisBooleanattributepreselectsinputsoftype=”checkbox”andtype=”radio”.AswithotherBooleanattributes,ittakesadifferentformdependingonthemarkuplanguageversion(asspeciiedbytheDOCTYPE).checked="checked"istheXHTMLsyntax;usesimplycheckedforHTML4,thougheitherformatisaccept-ableinHTML5.

n disabled:Whenpresent,thisBooleanattributedisablestheelementsotheusercan’tinteractwithit.Furthermore,adisabledcontroldoesn’treceivefocus,itisskippedintabbingnavigation,anditsvalueisnotsubmittedwiththeform.

n ismap:Whenpresent,thisBooleanattributespeciiesthataninputoftype=”image”isaserver-sideimagemap.You’llrarely,ifever,seethisusedthesedays.

n maxlength=”number”:Thisspeciiesthemaximumnumberofcharac-tersallowedinatype=”text”ield.

n name=”cdata”:Thisassignsanametotheinput,whichispairedwithitsvaluewhenprocessingtheform.

n onblur="script"andonfocus="script":Theseeventsareopposites.onblurireswhenfocusleavestheelement,suchaswhentheusertabsawayfromitorclicksoutsideit,whileonfocusireswhenfocusisrestored.Aswithotherevents,addthemunobtrusivelywithJavaScriptratherthanhard-codingthemintheHTML.

n onchange="script":Thiseventireswhentheuserchangesthecontent.n onselect="script":Thiseventireswhentheuserselectscontentinan

inputoftype=”text”.n readonly:Whenpresent,thisBooleanattributeprohibitstheuser

fromalteringtheelement’scontents.Theelementstillmayreceivefocus,betabbedtowiththekeyboard,andsubmitswiththeform.


n size="number":Thissetsthenumberofcharactersthatarevisibleforaninputoftype=”text”.Renderingvariesacrossbrowsers,sousetheCSSwidthpropertyforinercontrolandmoreconsistency.

n src=”uri”:Thisspeciiesthelocationoftheimageforaninputoftype=”image”.

n tabindex:Pleaseseethe“Attributes”sectionofChapter1.n type=”text|password|checkbox|radio|submit|reset|file|hidden|

image|button”:Pleaseseethedescriptionsofeachtypeinthisentry.n usemap:Whenpresent,thisBooleanattributespeciiesthataninput

oftype=”image”isaclient-sideimagemap.PleaseseetheentryforthemapelementinChapter6formoredetails.

n value:Thisisthevalueoftheinputthatisassociatedwithitsname,bothofwhicharepassedtotheprocessingscriptwhentheformissubmitted.

HTML5andtheinputElementOneofHTML5’sprimarygoalsistoprovidenativeelementsthatenablecreatingWebapplicationsmoreeasily.Inthatvein,itmakesbigadvancesintheformdepartment,especiallyasitpertainstoinputtypesandotherattributes.

AttributesinDetailn autocomplete=”on|off”:Manybrowsersstorevaluesyou’ve

enteredinatextield(withaparticularname)forsubsequentusewhenillingoutanotherform.Forinstance,nodoubtyou’vefoundyourselftypingyourcityore-mailaddressinatextield,onlytoseeitappearinasmallmenufromwhichtochoose.It’shandywhenyou’reusingtheform,butit’sdangerousifsomeoneelseusesyourbrowserlater.Theymaybeexposedtosensitive


information(suchasacreditcardnumber)you’veentered.Whenyousetautocomplete=”off”,theuseragentwon’tdothis.Thedefaultvalueisthatoftheautocompletesettingfortheinput’sformowner--whichisthenearestformelementthatcontainstheinput--orthatisassociatedwiththeieldviatheinput’sformattri-bute.Aformelement’sautocompletedefaultstoon,sobesuretosetautocomplete=”off”forallsensitiveinputields.

n autofocus:Whenpresent,thisBooleanattributetellsthebrowsertosetfocusontheieldassoonasthepageisloaded.Thisallowsuserstousethecontrolwithouthavingtotabtoitorclickitirst.

n form=”formid”:Bydefault,eachformcontrolisassociatedwithitsnearestancestorformelement(thatis,theformthatcontainsit).Setthisattributetotheidofadifferentforminthepagetooverridethisbehavior.

n formaction,formenctype,formmethod,formnovalidate,andformtarget:Thesearethesameastheformelement’saction,enctype,method,novalidate,andtargetattributes,respectively,exceptyoumayassignthemtoasubmitbutton.Iftheyaren’tpresent,theydefaulttotherelatedattributevaluesoftheinput’sformowner(seetheautocompleteattribute).

n height=”numberofpixels”andwidth=”numberofpixels”:Thesespecifytheheightandwidth,respectively,ofaninputoftype=”image”.

n list=”datalistid”:Thisidentiiesanelementthatlistspredeinedoptionssuggestedtotheuserinadatalistelement(seeChapter14).Itsvalueshouldmatchtheidoftherelevantdatalistinthesamedocument.

n maxandmin:Theseindicatetherangeofacceptablevaluesforinputsthatareoftypedate,datetime,datetime-local,month,number,range,time,andweek. (continuesonnextpage)

HTML5andtheinputElement(continued)


n multiple:Whenpresent,thisBooleanattributespeciiestheuserisallowedtoentermorethanonevalueintheinputield.Itappliesonlytoinputsoftype=”email”andtype=”file”.

n pattern=”regularexpression”:Thisspeciiesaregularexpres-sion—thesamekindyouuseinJavaScriptperECMAScript—againstwhichthebrowsershouldchecktheinput'svaluewhenaformissubmitted(butbeforeit’ssenttotheserver).Pleaseseethe“Patterns”sectionoftheECMAScriptspec:http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf.Forexample,youwouldcheckforaive-digitnumericpatternwith<inputpattern="[0-9]{5}"name="zipcode"title="Azipcoderequiresfivenumbers."/>.Youshouldincludeatitleattributethatdescribestherequiredpattern;useragentsdisplayittousersasahint.patternisawelcomeadditiontoHTML5sinceitallevi-atestheneedtowriteJavaScriptforclient-sideformvalidation(ofcourse,youshouldalwaysdoserver-sidevalidationregardless).

n placeholder=”text”:Thisdeinesawordorbriefphrasethatdisplaysintheelementasahinttowhattheusershouldenterintheield.Whentheusertabstotheield,clicksit,orhasprevi-ouslyenteredtextinit,theplaceholdervaluedoesn’tshow.Itappliesonlytoaninputoftype=”text”andatextareaelement.Itshouldn’tbeusedasareplacementforthelabelelement.

n required:Whenpresent,thisBooleanattributerequirestheusertoengagetheinput(thatis,makeaselectionorentertext,asthecasemaybe)beforesubmittingtheform.Useragentsmayalertuserswhenthey’vefailedtocompletetheield(tryitinOpera10.5toseeitinaction!).

n step:AccordingtoHTML5,this“indicatesthegranularitythatisexpected(andrequired)ofthecontrol’svalue,bylimitingtheallowedvalues.”Itappliestoinputsthatareoftypedate,datetime,datetime-local,month,number,range,time,andweek.



n type=”color|date|datetime|datetime-local|email|month|number |range|search|tel|time|url|week”:TheseadditionalinputtypesareoneofHTML5’sbiggestfeatures.Wheresupported,validationoccursnativelyinthebrowser.Theemail,search,tel,andurltypesarespeciictypesoftextields.Theothersprovidenewkindsofcontrols,suchasacolorpickerforcolorandthosedescribedin“ExamplesofNewinputTypes.”

ExamplesofNewinputTypes

Hereareafewexamplesofthenewinputtypes.Operahasthebestsupportatthetimeofthiswriting.Nonsupportingbrows-erstypicallyfallbacktoaninputoftype="text".Pleaseseehttp://www.htmlfiver.com/extras/inputs/formoreinformationaboutthenewtypes(andmoreexamples).

Thedatetypeprovidesacalendar.Inthisexample,theusermustselectadateonorafterJune11,2010.(datetime,datetime-local,month,andweekalsoprovideacalendar,thoughtheirallowedvaluesdiffer.datetimeanddatetime-localalsoshowatimecontrollikethekindtype=”time”displays.)

<input type="date" name="eventdate" min="2010-06-11" />

Thenumbertypeshowsatextieldandspinnercontrol.Inthisexam-ple,theuserisrequiredtoselectanumber,anditmustbebetween10and25:

<input type="number" name="quantity" min="10" max="25"

required=”required” />

Therangetypeshowsaslidercontrol.Inthisexample,thevalueisbetween100and500inincrementsof10.:

<input type="range" name="pick" min="100" max="500"

step="10" />



labelAformcontrollabel

Syntax <labelfor=””></label>

Attributes Core,I18n,Events,accesskey,for,onblur,onfocus,HTML5Only:Global,form

DescriptionUsethelabelelementtoassociateatextlabelwithaformcontrol.Setitsforattributetothecontrol’sidtomaketheassociation;thisiscrucialforaccessibility.Manybrowsersputthecursorfocusinsidetheinput(orselectthechoiceinthecaseofaradiobuttonorcheckbox)iftheuserclicksthelabeltext.

Example:

<label for=”address”>Street Address:</label> <input

type=”text” id=”address” name=”address” />

Pleasealsoseetheexampleanddiscussionintheformelemententryinthischapter.

note Youareallowedtowraplabelaroundcontrols,suchasacheckboxinput.However,somescreenreadersmayfailtoannouncethecontrol

containedinthelabel,sobesuretotestyourform.Whenindoubt,stickwiththemodelshownintheexample.

AttributesinDetailn accesskey:Pleaseseethe“Attributes”sectionofChapter1.n for=”controlid”:Associatesthelabelwithacontrolwhensettothe

control’sid.


n onblur=”script”andonfocus=”script”:Theseeventsareopposites.onblurireswhenfocusleavesthelabel,whileonfocusireswhenitisrestored.

HTML5andthelabelElementThelabelelementhasoneadditionalattributeinHTML5.

AttributesinDetailn form=”formid”:Pleaseseethe“HTML5andtheinputElement”

boxinthischapter.

legendAieldsetcaption

Syntax <fieldset> <legend></legend>

. . . [form controls] . . .

</fieldset>

Attributes Core,I18n,Events,accesskey,HTML5Only:Global

DescriptionTheoptionallegendelementidentiiesthegroupofcontrolscontainedwithinafieldset.Thelegenddisplaysinthepageandisreadbyscreenreaders,providingvisuallyimpaireduserscontextfortherelatedformcontrols.Pleaseseetheexampleanddiscussionintheformelemententryinthischapter.


AttributesinDetailn accesskey:Pleaseseethe“Attributes”sectionofChapter1.

DeprecatedAttributesThealignattributeisdeprecated.

optgroupAgroupofselectchoices

Syntax <optgrouplabel=””><option></option>

. . .

</optgroup>

Attributes Core,I18n,Events,disabled,label,HTML5Only:Global

DescriptionUsetheoptgroupelementtoorganizeoneormoregroupsofrelatedoptionelementsinaselectelement.Eachoptgroupmustcontainatleastoneoption.

Example:

. . .

<select name="computers">

<optgroup label="Desktops">

<option value="xyz2000">The XYZ 2000</option>

. . . [more Desktop options] . . .

</optgroup>

<optgroup label="Laptops">


. . . [Laptop options] . . .

</optgroup>

</select>

. . .

Typically,optgrouprendersbydefaultlikethis:


thischapter.BothInternetExplorer6and7ignoreitonoptgroup.n label="cdata":Required.Thisprovidesthegroup’slabelthatdisplays

intheselectboxabovetheoptgroup’soptions.

optionAselectelementchoice

Syntax <option></option>Attributes Core,I18n,Events,disabled,label,selected,value,HTML5Only:Global

DescriptionTheoptionelementprovidesachoicewithinaselectelement.

Pleaseseetheformandoptgroupelemententriesinthischapterforexamplesandmoreinformation.



thischapter.BothInternetExplorer6and7ignoreitonoption.n label="cdata":Iflabeltextisspeciied,useragentsaresupposedto

renderitinsteadofthetextinsidetheoption.OnlyChrome,Opera,andSafarisupportitamongpopularbrowsers.

n selected:Whenpresent,thisBooleanattributepreselectstheoption.Morethanoneoptionmaybepreselectedifthemultipleattributeissetontheselectelement.

n value=”cdata”:Thisisthevaluesubmittedwiththeformiftheuserchoosestheoption.Ifthevalueattributeisn’tspeciied,theoption’sinsidetext,forinstance,<option>GroundShipping</option>,isitsvalue.

HTML5andtheoptionElementHTML5’sdatalistelementmaycontainoneormoreoptionele-ments.PleaseseeChapter14fordetails.

selectAmenuofchoices

Syntax <selectname=””><option></option>

</select>

Attributes Core,I18n,Events,disabled,name,multiple,size,HTML5Only:Global,autofocus,form


DescriptionUsetheselectelementtoprovideoneormorechoicesinasingle“menu.”Eachchoiceisrepresentedbyanoptionelement,whichmayeitherexistonitsownorexistaspartofanoptgroup.Pleaseseetheexamplesintheformandoptgroupelemententriesinthischapter.


thischapter.n name=”cdata”:Thisspeciiestheselectelement’snamesotheform-

processingscriptcanassociatetheselectedoptionswiththeselect.n multiple:Whenpresent,thisBooleanattributeallowsformorethan

onechoicefromtheselectbox.n size=”number”:Bydefault,aselectdisplaysonlyoneoptionwhen

theuserhasn’texpandedthelist.Setthesizeattribute(forexample,size=”3”)tothenumberofoptionsyouwanttoshowinstead.(Note:ChromeandSafarimayshowmoreoptionsthandesiredwhensizeislessthan5.)Typically,whensizeisset,aselectrendersasalistboxwithascrollbarontheright.

HTML5andtheselectElementTheselectelementsupportstheautofocusandformattributesinHTML5.Pleaseseethe“HTML5andtheinputElement”boxinthischapter.


textareaMultilineieldfortext

Syntax <textarea></textarea>Attributes Core,I18n,Events,accesskey,cols,disabled,name,onblur,onchange,onfocus,onselect,readonly,rows,tabindex,HTML5Only:Global,autofocus,form,maxlength,placeholder,required,wrap

DescriptionAtextareaelementisamultilinetextcontrol.Itisusefulincaseswhenyouwouldliketoprovidemorespaceforcontentthananinputoftype=”text”comfortablyallows,forexample,whensolicitingreaderfeedbackonablogentryoraproductpage.Youcanprepopu-lateatextareawithcontentbyplacingitbetween<textarea>and</textarea>.Pleaseseetheexampleanddiscussionintheformelemententryinthischapter.

AttributesinDetailn accesskey:Pleaseseethe“Attributes”sectionofChapter1.n cols=”number”:RequiredinX/HTML.Thissetsthemaximumnumber

ofcharactersperline,effectivelysettingthetextarea’swidthunlessyouoverwriteitwiththeCSSwidthproperty.

n disabled:Pleasesee“AttributesinDetail”fortheinputelementinthischapter.

n name=”cdata”:Thisspeciiesthetextarea’snameforthepurposesofprocessingtheformandthiselement’svalue.

n onblur=”script”andonfocus=”script”:Pleasesee“AttributesinDetail”fortheinputelementinthischapter.


n onchange=”script”:Thiseventireswhentheuserchangesthecontent.Sincetextareadoesn’thaveamaxlengthattributeinX/HTML(itdoesinHTML5,althoughmostbrowsersdon’thonorityet),youcanwriteJavaScriptthatwillcheckforthelengthofthecontenteachtimeitchangesandpreventtheuserfromtypingmoreifitexceedsthelimityoudetermine.

n onselect=”script”:Thiseventireswhentheuserselectscontentinthetextarea.

n readonly:Whenpresent,thisBooleanattributesprohibitstheuserfromalteringthetextarea’scontents.Theelementstillmayreceivefocus,betabbedtowiththekeyboard,andsubmitswiththeform.Onecommonuseisonatextareathatcontainstermsofusecopy,followedbyacheckboxinputaskingtheusertoselectittoagreetotheterms.

n rows=”number”:RequiredinX/HTML.Thissetsthenumberofrowsoftext,effectivelysettingthetextarea’sheightunlessyouoverwriteitwiththeCSSheightproperty.

n tabindex:Pleaseseethe“Attributes”sectionofChapter1.

HTML5andthetextareaElementThetextareaelementsupportstheseadditionalattributesinHTML5.

AttributesinDetailn autofocus:Pleaseseethe“HTML5andtheinputElement”boxin

thischapter.n form=”formid”:Pleaseseethe“HTML5andtheinputElement”

boxinthischapter. (continuesonnextpage)


HTML5andthetextareaElement(continued)

n maxlength=”number”:Thissetsthemaximumnumberofcharac-tersallowedinthetextarea.

n placeholder=”text”:Pleaseseethe“HTML5andtheinputElement”boxinthischapter.

n required:Whenpresent,thisBooleanattributerequirestheusertoentertextbeforesubmittingtheform.

n wrap=”hard|soft”:Thisspeciiesthetypeoftextwrappingintheield.Setwrap=”hard”toensurenolinehasmorecharactersthanisspeciiedbythecolsattribute,whichisrequiredinthisinstance.Ifwrapisnotset,itdefaultstosoft(theuseragentig-uresoutwrappingonitsown).

Tabulardatacantakemanyformssuchasinancialorsurveydata,acalendarofevents,abusschedule,oratelevisionprogrammingschedule.Whateverthecasemaybe,thiskindofinformationisusuallypresentedwithoneormorecolumnorrowheadingsalongwiththedata.

Thetableelementisyourelementofchoiceintheseinstances.It—alongwithitschildelements—aredescribedinthischapter.Ifyou’relookingforacodeexampleandsummaryofthemajorityofatable’selementsandfeatures,pleaseheadtothetableentry.

Notethattablesarenotintendedtocontrolpagelayout,sincethat’sthedomainofCSS(butyoualreadyknewthat,right?).

TabularData

8


captionAtablecaption

Syntax <caption></caption>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionTheoptionalcaptionelementprovidesabriefdescriptionofatable.Itmayappeardirectlyonlyafterthe<table>starttag.Useragentstypi-callydisplaythecaptioncenteredabovethetablebydefault.Pleaseseethetableentryinthischapterforanexample.

DeprecatedAttributesn align:UsetheCSScaption-sideproperty(withavalueoftopor

bottom)insteadtodictatewhetherthecaptionshouldappearaboveorbelowthetable.Firefoxalsosupportsadditionalvaluesofleftandrightforcaption-side,thoughthey’renolongerstandard.PleasenotethatInternetExplorer7andpreviousversionsdon’tsupportcaption-side.UsetheCSStext-alignproperty(withavalueofleft,center,orright)tocontrolacaption’shorizontalalignment.

colAtablecolumnforstyling

Syntax <col>or<col/>

Attributes Core,I18n,Events,align*,char*,charoff*,span,valign*,width*,HTML5Only:Global

Part2:HTMLElementsandGuidance Chapter8:TabularData 187

DescriptionThecolelementallowsyoutoapplystyletooneormoretablecolumns.Itdoesn’timpactthetable’sstructure.Allcolsmustgoaftercaptionorbeforetheadifeitherofthoseelementsispresent.InX/HTML,theymayexistontheirownorbecontainedwithinoneormorecolgroupelements.However,ifatleastonecolgroupispresent,allcolsmustbeinoneormorecolgroups.HTML5requiresallcolelementstobeexplic-itlycontainedinsideoneormorecolgroups.

Pleaseseethecolgroupentryinthischapterforexamplesandfurtherdiscussion,andseethe“AttributesinDetail”sectionsincebothelementshavethesameattributes.

colgroupAgroupoftablecolumns

Syntax <colgroup></colgroup>Attributes Core,I18n,Events,align*,char*,charoff*,span,valign*,width*,HTML5Only:Global

DescriptionThecolgroupelementallowsyoutogrouponeormoretablecolumnsforstylingpurposes.Itdoesn’timpactthetable’sstructure.colgroupmayexistonitsown(seeExample2)orcontainoneormorecolelements(seeExample1),whichallowmoregranularstylingcontrolwithinacolgroup.Allcolgroupsmustgoaftercaptionandbeforetheadifeitherofthoseelementsispresent.

Let’saddcolgroupandcolelementstotheexamplefromthetableelemententryinthischapter.I’veabbreviatedportionsofthecodesurroundingthecolgroups.

Example1(colgroupswithcols):

<table summary=" . . . ">

<caption> . . . </caption>

<colgroup class="quarter">

<col />

</colgroup>

<colgroup class="years">

<col span="3" />

</colgroup>





</table>

Thespanattributemaybeusedoneithercolgrouporcol,andineithercase,itindicatesthenumberofcolumnstheelementspansforstyling.(spandoesn’timpactthetable’sstructure,unlikethecolspanattributethatmayappearonathortd.)Theclassattribute(oryoucoulduseidifit’suniquetothepage)allowsyoutotargetCSStoacolgroup.Forexample,ifyouapply.yearscol{background:#ccc;width:60px;}totheExample1code,eachthandtdinthesecond,third,andfourthcolumnswillbe60pixelswidewithagraybackground(theirstcolumnisdictatedbytheirstcolgroup).

There’sactuallymorecodeinExample1thanisnecessarysinceeachofthecolgroupshasonlyonecol.So,youcanrewritethecolgroupportionlikeinExample2.Inthiscase,thecolelementsareimplied.

Example2( justcolgroups):

. . . [table start tag and caption] . . .

<colgroup class="quarter"></colgroup>

<colgroup class="years" span="3"></colgroup>

. . . [rest of table] . . .


And,inX/HTMLthere’syetathirdwaytowriteit.

Example3( justcols):

. . . [table start tag and caption] . . .

<col class="quarter" />

<col class="years" span="3" />

. . . [rest of table] . . .

Inshort,whetheryouusecolgroupand/orcolisuptoyoudependingonwhatmakesthecodethelightesttoaccommodateyourstylingneeds.However,youmaynotuseacombinationofExamples2and3;ifyouuseatleastonecolgroup,allcolsmustappearinoneormorecolgroups.

tip Use.years{background:#ccc;width:60px;}toapplythesamestylingtoExamples2and3asinExample1.

note BrowsersvaryinwhatCSSstylestheyapply(andhowyoumustapplythem)tocolgroupandcol.Forinstance,InternetExplorertendsto

supportmoretextstylingoptions(suchasbold,italics,andalignment)viacolgroupandcolthanotherbrowsers.

AttributesinDetailForalign,char,charoff,andvalign(allofwhichareobsoleteinHTML5),pleasesee“AttributesinDetail”forthetbodyelementinthischapter.n span=”numberofcolumns”:Setspantothenumberofcolumnsthe

elementshouldrepresentforstyling.Ifspanisomitted,itdefaultsto1.Pleaseseetheexamplesinthisentry.

n width=”numberofpixels,apercentagevalue,or0*”:*ObsoleteinHTML5.Thisattributeisn’tdeprecatedinX/HTML,butusetheCSSwidthpropertyinsteadtosetanumberofpixelsorapercentage(seetheexplanationforExample1inthisentry).widthtakesathirdvalue,


too.Whenitissetto0*(zeroasterisk),eachcolumnshoulddisplayattheminimumwidthnecessarytocontainitscontents.Browsersupportforthisvalueisinconsistent,though.

tableTabulardataparentelement

Syntax <table></table>Attributes Core,I18n,Events,border*,cellpadding*,cellspacing*,frame*,rules*,summary,width*,HTML5Only:Global

DescriptionUsethetableelementtopresenttabulardata,suchasdatainaspread-sheet.Forinstance,itcouldbeinancialorsurveydata,acalendarofevents,oratelevisionprogrammingschedule.Atthemostfundamentallevel,atableiscomprisedofrowsofcells.Eachrow(tr)containsheading(th)and/ordata(td)cells.SeveralotherHTMLelementsandattributesareparticulartoconstructingtables,asyouwillseeinexampleshereandelsewhereinthischapter.

note Althoughnottechnicallyillegal,donotusetablestocontrolthelayoutofyourpages,sinceit’sconsideredaverybadanddatedpractice.

Instead,usethepropersemanticsforyourcontentandcontrolyourlayoutwithCSS.Thetableelementismeanttostructuretabulardata.(HTMLe-mailsaretheoneunfortunateexception,butthat’sonlybecausenotalle-mailclientsandproviderssupport,orallow,theCSSrequiredtoachievecertainlayoutsconsistently.)

Someofthetable-relatedelementsandattributesaregearedtowardmakingatablemoreaccessible.Sightedusersmaytakeforgrantedhoweasilytheycangleaninformationpresentedinatablejustbyglancing

atit.However,imagineyouareusingascreenreader(orotherassistivedevice),andthetableinformationisreadtoyou.Itcanbedisorientingunlessthetableincludesinformationthatdeclarescolumnandrowheadingsandassociatesthemwithdatacells,forinstance,sothedatacanbeannouncedincontext.

Let’stakealookatthesampletableI’llexplainbeforegettingintothecode.Alltheformattingshownisthetypicaldefaultbrowserrendering,thoughaswithotherelements,youcanstyletablesmuchdifferentlywithCSS.

I’vesplitthetablecodeintotwopartstomakeiteasiertodiscuss.I’vealsohighlightedatleastoneinstanceofeachtable-relatedelementandattri-butethattheexampleuses.

Example(part1—thetableheaderandfooter):

<table summary=”Company financials from 1962-64 in which each

year is a column heading and the quarter within each year is

a row heading.”>

<caption>Company Financials for 1962-1964 in

Thousands</caption>

<thead> 

<tr>

<th scope=”col”>Quarter</th>

<th scope=”col”>1962</th>



</tr>

</thead> (continuesonnextpage)

<tfoot> 

<tr>

<th scope=”row”>TOTAL</th>

<td>$595</td>

<td>$648</td>

<td>$664</td>

</tr>

</tfoot>



Let’sdiscussafewofthecomponentsshowninthisirstpart.Notsurprisingly,eachtablebeginswiththe<table>starttag.Unlikethesummaryattribute,theoptionalcaptionelementdoesdisplayinthepage(see“AttributesinDetail”regardingsummary).Ifyouincludeacaption,itmustimmediatelyfollowthestarttagforthetable.

Thetheadelementexplicitlymarksaroworrowsofheadingsasthetablehead.Eachrowisencapsulatedinatrelement,andeachofitsheadingsismarkedupwithathelement,asshownwith<thscope=”col”>Quarter</th>,<thscope=”col”>1962</th>,andsoon.thelementstypicallydisplayinboldandcenter-alignedbydefault.Thescopeattributedoesnotaffectpresentation,butithelpsmakeatableaccessible.Itinformsascreenreaderorotherassistivedevicethattheheadingisforeachtdinarow(whenscope=”row”)oracolumn(whenscope=”col”)orisforagroupofrows(whenscope=”rowgroup”)oragroupofcolumns(whenscope=”colgroup”)inamorecomplextable.

Thetfootelementexplicitlymarksaroworrowsasthetablefoot.Sampleusesincludecolumncalculations,suchasintheexample,orarepeatofthetheadheadingsforalongtable,suchasatrainschedule.Eventhoughitseemscounterintuitive,tfootmustcomebeforetbodyinthecode(showninpart2oftheexample)eventhoughitdisplaysafterit.(Note:HTML5allowstfootaftertbodyaslongasthere’sonlyonetfoot

inthetable.)Pleasesee“ThetheadandtbodyElements”boxformoreinformation.

note You’llnoticeinpart1oftheexamplethatonlythefirst

tfootchildelementisath,whichisincontrasttothetheadthathasfourths.It’s

becauseonlyoneofthecellsisaheading,inthiscasefortherow,asdenotedwith<thscope="row">TOTAL</th>.

Allright,nowontothesecondpartoftheexample,whichincludesthetable’sdata.

Example(part2—thetablebodydata):

. . . [tfoot] . . .



<tbody> 

<tr>

<td scope="row">Q1</td>

<td>$145</td>

<td>$167</td>

<td>$161</td>

</tr>

. . . [similarly structured tr and tds for Q2-Q4 rows]

. . .

</tbody>

</table>

Thetbodyelementsurroundsallthedatarows,whicharespeciiedbytrelementsjustlikeinthetheadandtfoot.Eachdatacellisatd,andtbodyisrequiredwheneveryouincludeatheadortfoot.

ThekeenobservermighthavespottedthattheirstelementintheQ1throughQ4rowsisatdwithscope=”row”,insteadofath.Iused<tdscope="row">Q1</td>becauseeachofthe“Q1”through“Q4”cells


intheirstcolumnisdataunderneaththe“Quarter”columnheading(<thscope="col">Quarter</th>)inthethead.Whenyouplacethescopeattributeonatd,itbehaveslikeaheadingfromtheperspectiveofanassistivedevice.(scopeonatdisobsoleteinHTML5;useathwithscopeinstead.)

ResourcestoLearnMoreTablescanbeverycomplexdependingonthedatayouneedtorepresent.I’vecollectedsomelinkstoresourcesthatprovideavarietyoftablediscussionsandexamples,withanemphasisonmakingtablesacces-sible.Thelinksareavailableathttp://www.htmlfiver.com/extras/tables/.

AttributesinDetailn border,frameandrules:*AllareobsoleteinHTML5.Thesearepresen-

tationalattributesthatwerecreatedbeforeCSShadameanstoprovidesimilarcontrol.So,althoughtheyaren’tdeprecatedinX/HTML,usetheCSSborderpropertyonthevarioustableelementsinstead.

n cellpadding=”numberofpixelsorpercentagevalue”:*ObsoleteinHTML5.Thisattributesetstheamountofspacearoundthecontentwithineachcell.UsetheCSSpaddingpropertyonthetdandthelementsinstead.

n cellspacing=”numberofpixelsorpercentagevalue”:*ObsoleteinHTML5.Thisattributesetstheamountofspacebetweeneachcell.ThereisaCSSalternative,border-spacing,butInternetExplorer8andolderdon’tsupportit.Ifyourgoalistoremoveallspacingbetweencells,there’sawayaroundthis;usetable{border-collapse:collapse;}inyourCSSinsteadof<tablecellspacing=”0”>inyourHTML.However,ifyou’dliketosetthespacingtoavalueotherthanzero(3,forexample)andyouwantIEtodisplaythesamespacingasotherbrowsers,you’llhavetoresortto<tablecellspacing=”3”>insteadofusingtheCSSborder-spacingproperty.


n summary=”text”:Thisoptionalattributeprovidesanoverviewofthetablestructureandcontenttoscreenreadersandotherassistivedevices.Itdoesnottypicallydisplayinthepage.Reservesummaryforinstanceswhensomeexplanatorytextwouldbeusefultothevisuallyimpaired.Pleaseseetheexampleinthisentry.

n width=”numberofpixelsorpercentagevalue”:*ObsoleteinHTML5.Thisattributeisn’tdeprecatedinX/HTML,butusetheCSSwidthpropertytodictatethetablewidthinstead.Forexample,usetable{width:90%;}.Whensetasapercentage,thetablewidthisrelativetothewidthoftheelementinwhichit’scontained.Browserstypicallydetermineatable’swidthbasedonitscontentifwidthisn’tspeciiedandusuallywon’tletitexceedthecontainer’swidth(unlessthere’salargeimageinit).

DeprecatedAttributesn align:UsetheCSSfloatormarginpropertiesinstead.n bgcolor:UsetheCSSbackground-colorpropertyinstead.

ThetheadandtfootElementsThoughnotrequired,Irecommendyouincludeatheadineachtablethathasatleastonerowofcolumnheadings,andusetfootasappropriate.

theadandtfootallowbrowserstodifferentiateatable’sheadandfootfromitsbodydata(intbody)sothetbodycanscrollindepen-dentlyofthem.Also,somebrowsersmayprintthetfootandtheadelementsoneachpageifatablespansmultiplepages.Furthermore,usersofassistivedevicesmaybeneitfromtheheadingsbeingexplicitlydeclared,andyoucangaingreaterCSScontrol.


tip Youmaynestatableinsideanotherone,thoughthecasesfordoingsoarenotcommon.Nestingmustbedonewithinatd.

tbodyAtable’sbodyofdatacells

Syntax <tbody></tbody>Attributes Core,I18n,Events,align*,char*,charoff*,valign*,HTML5Only:Global

DescriptionThetbodyelementcontainstherows(trelements)ofdatacells(tdelements)thatrepresentatable’sbodyofdata.Itisrequiredwheneveratableincludesatheadortfootelement.Atablemayhavemorethanonetbody.Pleaseseethetableelemententryinthischapterforanexampleandfurtherdiscussion.

AttributesinDetailThecolgroup,tbody,td,tfoot,th,thead,andtrelementssharetheseattributes,noneofwhichenjoyswidespreaduse.n align=”left|center|right|justify|char”:*ObsoleteinHTML5.

Thoughalignisn’tdeprecatedinX/HTML,usetheCSStext-alignpropertyontbodyinstead.YoumayalsowanttousetheCSSmargin-left:autoand/ormargin-right:autodeclarationsonatbody’schildelements.Setalign=”char”whenalsospecifyingthecharattribute.

n char=”character”:*ObsoleteinHTML5.Theintentofcharistoallowyoutospecifyasingletextcharacterthatservesastheaxisfor


horizontalalignmentwithincells.Thedefaultisthedecimalpointcharacterfortheelement’slanguage(forexample,aperiodinEnglishandacommainFrench).However,browsersupportforcharisvirtuallynonexistent.

n charoff=”number”:*ObsoleteinHTML5.Usedintandemwithalign=”char”andthecharattribute,charoffisintendedtoallowyoutospecifyapositiveornegativenumericoffsettotheirstoccurrenceofthealignmentcharacteroneachline.However,browsersupportforcharoffisvirtuallynonexistent.

n valign=”top|middle|bottom|baseline”:*ObsoleteinHTML5.Thoughvalignisn’tdeprecatedinX/HTML,usetheCSSvertical-alignprop-ertyontbodyinstead.

tdAcelloftabledata

Syntax <td></td>Attributes Core,I18n,Events,abbr*,align*,axis*,char*,charoff*,colspan,headers,rowspan,scope*,valign*,HTML5Only:Global

DescriptionUsethetdelementtospecifyatabledatacell.Typically,atdcontainsnumericortextdatawithoutHTMLelements,butitisvalidtoplacebothinlineandblock-levelcontentinadatacell.

Thisexampleshowsabrieftableforthepurposesofdemonstratingtheeffectofcolspanandrowspan,whichcanalsobeappliedtothelements.Pleaseseethetableelemententryinthischapterforalonger,propertableexampleandfurtherdiscussion.


Example(withcolspanandrowspan):

<table border="1">

<tbody>

<tr>

<td rowspan="3">1</td>

<td colspan="2">2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

</tr>

</tbody>

</table>

tip Iincludedborder=”1”soyoucouldseethecellboundariesquicklywithoutwritingCSS.Thisapproachcanbehandyasyou’rebuildinga

table.Whenyou’redone,removetheborderfromtheHTMLandsetitinyourCSSifdesiredwhenstylingyourtable.

Theexampletypicallyrenderslikethis:


AttributesinDetailForalign,char,charoff,andvalign(allofwhichareobsoleteinHTML5),pleasesee“AttributesinDetail”forthetbodyelementinthischapter.n abbr=”text”:*ObsoleteinHTML5.Useabbrtospecifyanabbreviated

versionofthetd’scontent.Ascreenreadermightreadtheabbrvalueinsteadofthetdvalue.

n axis=”cdata”:*ObsoleteinHTML5.Browsersupportforthisattributeisvirtuallynonexistent.Intheory,itallowsyoutospecifyaspace-separatedlistofnamesofyourchoosingasawayofcategorizingacell.Pleaseseehttp://www.w3.org/TR/html4/struct/tables.html#multi-dimensionformoreinformation.

n colspan=”number”:Thisspeciiesthenumberofcolumnsthecellspansacross.Pleaseseetheexample.

n headers=”listofids”:Thisattributeperformsasimilartaskasscope—associatingtdswiththeirheadingsforthebeneitofassis-tivedeviceusers—exceptinamoreexplicitmanner.Supposeyouhaveacalendartablewithtwoheadingsabovethesamecell,suchas<thid=”month”colspan=”7”>June</th>inonerowand<thid=”weekday”>Fri</th>inthenext.YouexplicitlyassociateacellwiththesebylistingtheirIDs(separatedbyaspace)astheheadersvalue:<tdheaders=”monthweekday”>11:Bakesale</td>.UseheadersinsteadofscopeinHTML5pages.

n rowspan=”number”:Thisspeciiesthenumberofrowsthecellspans.Pleaseseetheexample.

n scope=”col|colgroup|row|rowspan”:*ObsoleteinHTML5onatdbutvalidonath;useonathinstead.Thisbeneitsscreenreadersbyspeci-fyingthattheelementisaheadingforeitherarow(scope=”row”),acolumn(scope=”col”),agroupofrows(scope=”rowgroup”),ora


groupofcolumns(scope=”colgroup”).Pleaseseeanexampleofscopeinthetableentryinthischapter.

DeprecatedAttributesn bgcolor:UsetheCSSbackground-colorpropertyinstead.n height:UsetheCSSheightpropertyinstead.n nowrap:UsetheCSSwhite-space:nowrapdeclarationinstead.n width:UsetheCSSwidthpropertyinstead.

tip Unlikemostotheruseragents,InternetExplorerdoesn’tdisplaytheborderonanemptytd,evenifyoutypeaspaceinit,like<td></td>.

However,itwillrendertheborderifthecontentisanonbreakingspaceentity,asin<td> </td>.IEshowsatd’sbackgroundcolorregardlessofcontent.

tfootAtablefoot

Syntax <tfoot></tfoot>Attributes Core,I18n,Events,align*,char*,charoff*,valign*,HTML5Only:Global

DescriptionThetfootelementexplicitlymarksaroworrows(eachasatrelement)asthetablefoot.Pleaseseethetableelemententryinthischapterforanexampleandfurtherdiscussion,including“ThetheadandtfootElements”box.Pleasealsosee“AttributesinDetail”inthetbodyentryinthischapter,sincethetwoelementshavethesameattributes.


thAtablecolumnorrowheading

Syntax <th></th>Attributes Core,I18n,Events,abbr*,align*,axis*,char*,charoff*,colspan,headers,rowspan,scope,valign*,HTML5Only:Global

DescriptionThethelementspeciiestheheadingofatablecolumnorrow.Pleaseseethetableelemententryinthischapterforanexampleandfurtherdiscus-sion.Pleasealsosee“AttributesinDetail”and“DeprecatedAttributes”inthetdentryinthischapter,sincethetwoelementsarethesameregard-ingattributeswithoneexception:scopeisvalidonathinHTML5.

theadAtablehead

Syntax <thead></thead>Attributes Core,I18n,Events,align*,char*,charoff*,valign*,HTML5Only:Global

DescriptionThetheadelementexplicitlymarksaroworrows(eachasatrelement)ofheadingsasthetablehead.Theheadingsprovidecontexttothetable’scolumnsofdata.

Pleaseseethetableelemententryinthischapterforanexampleandfurtherdiscussion,including“ThetheadandtfootElements”box.Also


see“AttributesinDetail”inthetbodyentryinthischapter,sincethetwoelementshavethesameattributes.

trAtablerow

Syntax <tr></tr>Attributes Core,I18n,Events,align*,char*,charoff*,valign*,HTML5Only:Global

DescriptionThetrelementdesignatesatablerowandmaycontaintdand/orthelements,asisappropriate.Pleaseseethetableelemententryinthischapterforanexampleandfurtherdiscussion.Pleasealsosee“AttributesinDetail”inthetbodyentryinthischapter,sincethetwoelementshavethesameattributes.

DeprecatedAttributesn bgcolor:UsetheCSSbackground-colorpropertyinstead.

Ontoday’sWeb,client-sidescripting—namely,JavaScript—makestheworldgo’round.Orfadeinandout.Orcompleteyoursearchtermasyou’retypingit.Ordriveaninteractivenewsmodule.Orcontrolavideoplayer.Or...yougettheidea.

Alas,showingyouhowtowriteJavaScriptoranyotherscriptinglanguageisbeyondthescopeofthisbook,butIwillshowyoutheeasypart,whichisgettingyourscriptsintoapage.

Pleasealsosee“Attributes”inChapter1foralistoftheeventsyoucanapplyandcapturewithJavaScript.

Scripting

9


ScriptingandPerformanceBestPractices

Afulldiscussionofbestpracticespertainingtoscriptsandpageperformanceisbeyondthescopeofthisbook,butI’lltouchonafewpointsthatarehighimpact.

First,ithelpstounderstandhowabrowserhandlesscripts.Asapageloads,thebrowserdownloads(ifit’sexternal),parses,andexecuteseachscriptintheorderinwhichitappearsinyourHTML.(Seethedeferattributeinthescriptelemententryforrelatedinformation.)Asit’sprocessingit,thebrowserneitherdownloadsnorrendersanyothercontentthatappearsafterthescriptelement—noteventext.Thisisknownasblockingbehavior.

Thisistrueforbothembeddedandloadedscripts,andasyoucanimagine,itcanreallyimpacttherenderingspeedofyourpagedependingonthesizeofyourscriptand/orwhatactionsitperforms.

MostbrowsersdothisbecauseyourJavaScriptmayincludecodeonwhichanotherscriptrelies,mayincludecodethatgeneratescontent(suchaswithdocument.appendChild()),ormayincludecodethatotherwisealtersyourpage.Browsersneedtotakeallofthatintoaccountbeforeinishingrendering.

So,howdoyouavoidthis?TheeasiesttechniquetomakeyourJavaScriptnonblockingistoputallscriptelementsattheendofyourHTML,rightbeforethe</body>endtag.Ifyou’vespentevenjustalittletimeviewingsourceonothers’sites,nodoubtyou’veseenscriptsloadedintheheadelement.Outsideoftheoccasionalinstancewherethatmaybenecessary,it’sconsideredadatedprac-ticethatyoushouldavoidwheneverpossible. (continuesonnextpage)

Part2:HTMLElementsandGuidance Chapter9:Scripting 205

ScriptingandPerformanceBestPractices(continued)

AnothersimplewaytospeedupyourscriptloadingistocombineyourJavaScriptintoasingleile(orasfewaspossible)andminifythecodeusingatoolsuchasthefollowing:n GoogleClosureCompiler:

http://code.google.com/closure/compiler/(downloadanddocumentation),http://closure-compiler.appspot.com(onlineversionoftool)

n YUICompressor:http://developer.yahoo.com/yui/compressor/(downloadanddocumentation),http://refresh-sf.com/yui/(unoficialonlineversionoftool)

Eachwillreduceyourilesize,butresultswillvaryfromscripttoscript.

Thosearetwocommonandpowerfulmethods,buttheyonlyscratchthesurfaceofwhat’spossible.Forin-depthdiscussionsofscript-loadingmethodsandoptimization,IhighlyrecommendEvenFasterWebSites(O’Reilly)bySteveSoudersandhissite,http://www.stevesouders.com.


noscriptScriptalternative

Syntax <noscript></noscript>Attributes Core,I18n,Events,HTML5Only:Global

DescriptionContentcontainedinanoscriptelementdisplaysonlywhentheuseragentdoesn’thavescriptingenabledordoesn’tsupportthetypeofscriptspeciied.Itcancontainbothinlineandblock-levelcontent.Youmaynotnestanoscriptinsideanotherone.

Example:

<script src=”widget.js” type=”text/javascript” />

<noscript>

<p>This content only displays if JavaScript is disabled or

not supported by the browser.</p>

</noscript>

AlthoughnoscriptisdesignedasafallbacktoJavaScript,it’sbesttoavoidusingitwheneverpossible.Instead,yourpage’sdefaultexperience(thatis,withoutJavaScript)shouldmakecontentavailabletoallusers,whilebrowserswithJavaScriptenableddisplayanenhancedexperience.Thisapproachisknownasprogressiveenhancement.

Forexample,imagineyouhaveacarouselofadozenimagethumbnails,andifyouselectone,thefull-sizeversionofthatthumbnaildisplays.Saythedefaultexperience(withCSS)isthatallthethumbnailsdisplayinagrid(builtasanunorderedlist).Selectingathumbnailreloadsthepageanddisplaysthefull-sizeimageabovethegrid.However,iftheuser


agenthasJavaScriptenabled,theprogressivelyenhancedversionrecon-iguresthethumbnailgridintoahorizontalcarouselthatdisplaysfourthumbnailsatatime.Userscanuseleftandrightarrowstonavigatethroughthecarousel,andiftheyselectathumbnail,thefull-sizeimagedisplaysabovethecarouselwithoutapagerefresh.

HTML5andthenoscriptElementHTML5notesthatnoscriptshouldbeusedonlywhenyouareservinganHTML5document,notanXHTML5document.

Italsoallowsfornoscriptinadocumenthead,thoughitscontentmaybethelink,meta,andstyleelementsonly.ThisisnotvalidinX/HTML.

scriptEmbedorloadascript

Syntax <script></script>Attributes charset,defer,type,src,HTML5Only:Global

DescriptionUsethescriptelementtoimportorembedaclient-sidescriptinadocu-ment.Thoughscriptsupportsotherlanguages,JavaScriptisundeniablythescriptinglanguageofchoice.scriptmayappearinboththeheadandbodyelementsandmultipletimeswithinadocument.However,asInoteatthebeginningofthechapter,it’sbesttocombineyourJavaScriptintooneileandloaditattheendofyourpagewheneverpossible.

note YoucannotplaceHTMLelementswithina

scriptblock(youcancreateHTMLwithJavaScript,however).

YoucanaddJavaScripttoyourpageinthreeways:byputtingitinanexternalile,byembeddingthecodeasthecontentsofthescriptelement,orbyapplyingitinlinewithaneventattribute.I’llcovertheirsttwoways(thethirdisn’tadvised).

Inmostcases,you’llwanttohouseadistinctpieceofJavaScriptinanexternalilebothsomultiplepagescanloaditandbecauseit’seasiertomaintainyourcodeinoneileratherthaninthescriptblocksofseveralHTMLiles.Additionally,auseragentwillcachetheileafterit’sloadedtheirsttime,speedingupthepageloadofsubsequentpagesonthesamesitethatusethescript.

Example1(importexternalfile):

. . .

<body>

. . .



<script src=”js/carousel.js” type=”text/javascript”>

➥ </script>

</body>

</html>

Alternatively,youcanembedtheJavaScriptinyourpage;however,asnoted,theirstapproachisusuallypreferred.

Example2(embeddedcode):

. . .

<body>

. . .


AttributesinDetailn charset:Thisspeciiesthecharacterencodingofascriptloadedvia

thesrcattribute.Itdoesnotapplytoanembeddedscriptblock(suchasExample2).Pleasesee“CharacterEncoding”inChapter1.

n defer(IE6–8,FF3.1–3.6):Pleasesee“ThescriptElementandPerformanceBestPractices”boxearlierinthischapterforanexplana-tionofhowuseragentshandlescriptsbydefault.TheBooleandeferattributeallowsyoutotellthebrowserthatitmaychoosetoloadandexecuteascriptaftertherestofthepagehasbeenparsedandrendered.Inessence,youareindicatingthatyourJavaScriptdoesn’tincludeanycodethatotherscriptsinthepagedependonorthatgeneratesHTMLcontent.Ifyoudeferascriptthatdoeseitherofthese,yourpageisnotlikelytorenderproperly.Example:<script type="text/javascript" src="photo-gallery.js"

defer="defer"></script>

Pleasenotedefer’slimitedbrowsersupport,listedearlier.n src=”uri”:ThesrcvaluerequiresavalidURIthatpointstoyourexternal

script.Theexternalscript’slanguagemustmatchwhatyouspecifyinthetypeattribute.Also,ifascriptelementhasbothasrcattribute(likeExample1)andembeddedcode(likeExample2),thelatterisignored.

n type=”content-type”:Usetypeinsteadofthedeprecatedlanguageattributetospecifyascript’sMIMEtype.Forinstance,setittotext/javascriptwheneitherembeddingorloadingJavaScript.Thisattributeisrequired.


DeprecatedAttributesn language=”cdata”:Usetypeinsteadoflanguage.

tip Pleasesee“ScriptingandPerformanceBestPractices”earlierinthischapter.

HTML5andthescriptElementHTML5introducesanewattributetoscriptcalledasync.asyncisaBooleanattributethatinstructsascripttobeexecutedasynchronouslyassoonasitisavailable.Itmaybeusedonlyonascriptelementwithasrcattribute.Example:<script type="text/javascript" src="module-slider.js"

async="async"></script>

Youmayassignbothasyncanddeferforthepurposesofolderbrowsersthatsupportdeferonly.However,asynctakesprecedenceifabrowsersupportsbothattributes.Pleaseseehttp://www.htmlfiver.com/html5-browser-support/forthelatestsupportinformation.

FrameswerefarmoreprevalentintheearlydaysoftheWeb,inpartbecausebandwidthwassopoorthatdeveloperssawabeneitinsplit-tingthescreenupintopiecesthatloadedindependentlyofoneanother.Butwithframescameusability,accessibility,andSEOshortcomings.

Nowadays,framesareconsideredarelicoftheearlydaysoftheWeb—somuchsothatHTML5doesnotincludethematall.Becauseofthis,cover-agehereofframe,frameset,andnoframesisverylight.

Themainfocusofthischapteristheiframeelement,whichisverymuchpartofHTML5,completewithsomenewattributes.

Frames

10


frameAframewithinaframeset

Syntax <framesrc="">or<framesrc=""/>

Attributes Core,frameborder,longdesc,marginheight,marginwidth,name,noresize,scrolling,src

Description

note TheframeelementisobsoleteinHTML5.

Theframeelementrepresentsaframewithinaframesetelement.Pleaseseetheframesetentryinthischapterformoreinformation.

AttributesinDetailWhenpresent,theBooleannoresizeattributedisallowstheuserfromresizingtheframe.Pleaseseetheiframeelementinthischapterfordetailsabouttheotherattributes.

framesetAsetofframes

Syntax <frameset></frameset>Attributes Core,cols,onload,onunload,rows

Descriptionnote TheframesetelementisobsoleteinHTML5.Youcancreateasimilar

visualeffectwiththeCSSposition:fixeddeclaration.

Part2:HTMLElementsandGuidance Chapter10:Frames 215

Theframesetelementsplitsthewindowintooneormoreframeelements.EachframeloadsitsownHTMLdocument,andnavigationtakesplacewithineachframeunlessalink’stargetattributepointstothenameattributeofanotherframe,iframe,orwindow.

targetalsohasfourpredeinedvalues:_blank(opensthelinkinanewwindow;canbeusedinnormal,nonframespages,too),_parent(opensthelinkintheparentframeset),_self(thedefaultsetting;opensthelinkinthesameframecontainingthelink),and_top(opensthelinkinthefullbrowserwindow,notconstrainedtoaframe).

Framesetsmaybeconiguredinawidevarietyofways.Pleaseseehttp://www.w3.org/TR/html4/present/frames.htmlforexamples.

AttributesinDetailn colsandrows:Eachoftheseisacomma-separatedlistofthenumber

ofpixels,percentagevalues,andrelativelengths(whichuseanaster-isk).colsdeinesthelayoutofverticalframes,whilerowsdeineshori-zontalones.Thedefaultforeachis100%,whichmeansonecolumnandonerow(thatis,theentirescreen).Anexamplewithrelativelengthsiscols="*,475px,3*".Themiddlecolumnis475pixelswide,andtheirstandthirdcolumnsare25percentand75percentoftheremainingwidthspace,respectively.

n onload="script":Thiseventireswhenallframeelementshaveloaded.n onunload="script":Thiseventireswhenallframeelementshavebeen

removedfromthewindow,suchaswhenalinkwithtarget="_top"isselected.


iframeAnembeddedframe

Syntax <iframe></iframe>Attributes Core,frameborder*,height,longdesc*,marginheight*,marginwidth*,name,scrolling*,src,width,HTML5Only:Global,sandbox,seamless,srcdoc

DescriptionTheiframeelementallowsyoutoembedoneHTMLdocumentinsideanotherone.Thedocumentloadedintheiframeisitsownentity;forexample,itisn’timpactedbyCSSintheparentpage(seeHTML5’sseamlessattributeforanexception).Whenyouactivatealinkinaniframe,itloadsintheiframeunlessithasatargetattributethatpointselsewhere.Pleaseseetheframesetelementinthischapterformoreabouttarget.

Example:

<iframe name=”embeddedpage” width=”300” height=”400”

src=”embedded-page.html”><p>This content shows if the user’s

browser doesn’t support iframes.</p></iframe>

AttributesinDetailn frameborder="1|0":*ObsoleteinHTML5.Thedefaultvalueofthis

attributeis1,whichinformstheuseragenttorenderaborderontheiframe.Avalueof0turnsitoff.Sinceframeborderispresentationalinnature,usetheCSSborderpropertyinsteadinbothX/HTMLandHTML5documents.


n height="numberofpixelsorapercentagevalue"andwidth="numberofpixelsorapercentagevalue":Thisspeciiesthedimensions.Ifeachissettoapercentagesuchas33%,itwilloccupyathirdofitsparentelement’savailablespace.

n longdesc="uri":*ObsoleteinHTML5.Thisprovidesalinktoalongdescription(tosupplementthetitleattribute,ifpresent)oftheiframefornonvisualuseragentssuchasascreenreader.Itisusedrarely.

n marginheight="numberofpixels"andmarginwidth="numberofpixels":*BothareobsoleteinHTML5.marginheightspeciiestheamountofspacebetweenthetopandbottomedgesoftheiframeanditscontents.marginwidthdoesthesameexceptfortheleftandrightsides.Althoughthesearen’tdeprecatedinX/HTML,theyarepresentationaleffects,souseCSSinstead.

n name="cdata":Thisnamestheiframesootherelementsmaytargetitviatheirtargetattribute.

n scrolling="auto|no|yes":*ObsoleteinHTML5.Avalueofauto,whichisthedefaultstate,informstheuseragenttoprovidescrollbarswhennecessary.nomeanstonevershowscrollbars,andyesmeansalwaysshowthem.Althoughthisisn’tdeprecatedinX/HTML,usetheCSSoverflow(withavalueofauto,hidden,orscroll)propertyinstead.

n src="uri":Thisisthelocationofthedocumentorresourceloadedintotheiframe.

DeprecatedAttributesn align:UsetheCSSfloatpropertyinstead.


HTML5andtheiframeElementInHTML5,theiframeelementdoesnothavefallbackcontentinbetweenthestartandendiframetags.

HTML5addsthreeattributestoiframe.

AttributesinDetailn sandbox:Thesandboxattributeallowsyoutosetrestrictions

onaniframe’scontent.Thevalueforthisoptionalattributeisaspace-separatedlistthatincludesoneormoreofthesevalues:allow-same-origin,allow-top-navigation,allow-forms,andallow-scripts.Whensandboxisset,theiframe’sformsandscriptsaredisabled,itslinksarepreventedfromtargetingareasoutsidetheiframe,anditsplug-insaredisabled.However,settingsand-boxtoallow-formsandallow-scriptsreenablestheappropriateelements.Scriptscannevercreatepop-upwindows,though.Theallow-same-originvaluetreatsthecontentoftheiframeasifitwerefromthesameoriginastheparentpage(thatis,thepagethatcontainstheiframe).Pleaseseehttp://www.w3.org/TR/html5/text-level-semantics.html#attr-iframe-sandboxformoredetails,particularlyregardingwarningsforcertainvaluecombinations.

n seamless:Whenpresent,thisBooleanattributemakestheiframe’slinksopenintheparentpageinsteadoftheiframeandmakestheparent’sCSSapplytotheiframe’scontents.

n srcdoc:YoumayassignsrcdoctoastringofHTMLthatrepresentswhatthecontentsoftheiframeshouldbe.Ifbothsrcandsrcdocarespeciied,srcdoctakespriority.Thisallowsalegacybrowsertoloadthesrcandasupportingbrowsertousethesrcdocvalue.


noframesFramesfallbackcontent

Syntax <noframes></noframes>Attributes Core,I18n,Events

Description

note ThenoframeselementisobsoleteinHTML5.

Thenoframeselementprovidesfallbackcontentforauseragentthatdoesn’tsupportframes.Pleaseseehttp://www.w3.org/TR/html4/present/frames.htmlforexamples.

Part3

ThispartofthebookcoversallelementsthatareuniquetoHTML5.ItcombineswithPart2todetailthefullsetofelementsavailabletoyouforHTML5development.

Pleasealsosee“AnHTML5Overview”inChapter1ifyou’renewtoHTML5.

HTML5isstillunderdevelopmentatthetimeofthiswriting,andalthoughit’sonstablefooting,it’sstillsubjecttochange.(Towit,someelementswereaddedandremovedwhilewritingthisbook.)Forthemostpart,I’veleftoutbrowsersupportinformationsinceitoftenchangesasvendorsaddmorefeaturesorreinetheirimplementations.Pleaseseehttp://www.htmlfiver.com/html5-browser-support/forup-to-dateinformation.

HTML5ElementsandGuidance

Chapter11: PrimaryStructureandSections. . . . . . . . . . . . . . . . . 223Chapter12: Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Chapter13: EmbeddedContent

(Images,Media,andMore) . . . . . . . . . . . . . . . . . . . . . . 263Chapter14: Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Chapter15: InteractiveElements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Part3Contents

ThischapterisacounterparttoChapter2becauseitdescribesrelatedelementsuniquetoHTML5.Ifyou’rewritingX/HTMLdocuments,thenthischapterisn’trelevant.But,ifyou’rewritingHTML5,thenitcombineswithChapter2todetailalltheprimarystructuralandsectionalelementsatyourdisposal.

InX/HTML,thedivelementisyourmaindevicetocontainchunksofcontent.Asyouknow,div,althoughgreatasacontainer,hasabsolutelynosemanticmeaning.Thesevenelementsinthischapterarecontainersthatdohavemeaning.divdoesn’tgoawayinHTML5;youjustwon’tuseitasoften.

PrimaryStructureandSections

11

Part3:HTML5ElementsandGuidance224

Furthermore,afewoftheseelementsdirectlyimpactadocument’soutlineandchangethewayyouuseh1–h6headingsinHTML5.Iexplainthatnextandthengetintotheentriesfortheindividualelements.

HTML5’sDocumentOutlineEachHTMLdocumenthasanunderlyingoutline,whichislikeatableofcontents.Now,theoutlineisn’tsomethingthatdisplaysinyourpageexplicitly,butaswithallsemantics,it’smeaningfultothelikesofsearchenginesandscreenreaders,whichusetheoutlinetogleanthestructureofyourpageandprovidetheinformationtousers.

InX/HTML,theh1–h6headingelementsareallyouhavetostructuretheoutline.HTML5,ontheotherhand,includesfoursectioningcontentelements—article,aside,nav,andsection—thatdemarcatedistinctsectionswithinadocumentanddeinethescopeoftheh1–h6(andfooter)elementswithinthem.

Thismeanseachsectioningelementhasitsownh1-h6hierarchy,whichisabigshiftfromX/HTML.Also,notonlyismorethanh1inapageOK,butit’srecommended.

Allthisimpactstheoutline.Let’scomparetwoequivalentoutlinestoseehowthisworks.Theirst,whichistypicalinX/HTML,usesheadingelementsonly.

Version1:

<body>

<h1>Product User Guide</h1>

<h2>Setting it up</h2>

<h2>Basic Features</h2>

Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 225

<h3>Video Playback</h3>

<h2>Advanced Features</h2>

</body>

Now,thesecondversion,whichusesbothheadingandsectionelements,includingonenestedsection.(Note:Thecodeindentationisunimportantanddoesn’taffecttheoutline.)

Version2:

<body>


<section>


</section>

<section>


<section>


</section>

</section>

<section>

<h1>Advanced Features</h1>

</section>

</body>

TheHTML5Outliner(http://gsnedders.html5.org/outliner/)isafantastictoolthatpresentsavisualrepresentationofyourdocument’soutline.UsingittogenerateoutlinesforVersions1and2showsthateventhoughtheirh1–h6headinglevelsaredifferent,bothresultinthisoutline:


1.ProductUserGuide1.Settingitup2.BasicFeatures

1.VideoPlayback3.AdvancedFeatures

Asyoucansee,eachsectionelementinVersion2becomesasubsectionofitsnearesth1–h6orsectioningcontentancestor(alsosection,inthiscase).Thesamebehavioristrueofallfoursectioningcontentelements(article,aside,nav,andsection)evenwhenthey’remixedtogether.

note Bycomparison,ifVersion2hadnosections,itsoutlinewouldbethis:1.ProductUserGuide2.Settingitup3.BasicFeatures4.VideoPlayback5.AdvancedFeatures

BothVersions1and2arevalidHTML5,butthesecondispreferablebecausethesectionelementsaremoreexplicitsemantically.Infact,inpracticeIrecommendyouwrapanarticleelementaroundVersion2’scontent,sincethat’sevenmoreappropriateinthiscontext(thoughtheresultingoutlineisslightlydifferent).Here’sanexample:

<body>

<article>


<section>


</section>

. . . [other sections] . . .

</article>

</body>


tip Pleaseseethesectionelemententryinthischapterforamorecompleteversion.

IhighlyrecommendyoucreateavarietyoftestpagesandcomparetheresultsintheHTML5Outlinertogetabetterfeelforhowtheoutlinealgorithmworks.UsetheOutlinerduringyourprojectwork,too,toensureyourstructureisasintended.First,besureyouvalidateyourHTML5pagesathttp://html5.validator.nu/.

ThistakessomegettingusedtofordeveloperswellversedinX/HTMLbutnewtoHTML5,becauseyou’reconditionedtothinkthatonlyoneh1isappropriateonapageexceptinrarecircumstances.But,itmakesalotofsenseifyouthinkaboutitintermsofheadingsandsectionswithinanormal(thatis,non-HTML)document,likethekindyoumightwritewithawordprocessor.

Nowlet’sdiveintothischapter’selements.

article

Aself-containedcomposition

Syntax <article></article>Attributes HTML5Only:Global

DescriptionThearticleelementsigniiesaself-containedcompositionthatisintendedtobedistributableorreusable,suchas(thoughnotnecessarily)insyndication.Forexample,itcouldbeanewsarticle,amusicreview,ablogentry,acasestudy,acompany’shistoryonanAboutUspage,aprod-uctdescription,auser-submittedcomment,oraninteractivewidgetorgadget.Inshort,articleisanyindependentitemofcontent.

Naturally,apagemaycontainseveralarticleelements.Forexample,ablog’shomepagetypicallyincludesafewofthemostrecentpostings;eachwouldbeitsownarticle.

Youmaynestanarticleinsideanotheraslongastheinnerarticleisrelatedtothearticleonthewhole(pleaseseeExample2).(Notethatyoumaynotnestanarticleinsideanaddresselement.)

Allright,you’vereadaboutarticle;nowlet’sseeit.

Example1(basicarticle):

<article>

<h1>The Diversity of Papua New Guinea</h1>

<p>Papua New Guinea is home to more than 800 tribes and

languages . . .</p>

. . . [rest of story content] . . .

<footer> 

<p>Leandra Allen is a freelance journalist who earned

her degree in Anthropology from the University of

Copenhagen./p>

<address>

You may reach her at <a href=”mailto:leandra@

➥ therunningwriter.com">[email protected]</

a>.

</address>

</footer>

</article>

Notetheuseofthefooterandaddresselements(seetheirentriesinthischapterandChapter2,respectively).Here,addressappliesonlytoitsparentarticle(theoneshown),nottothepageoranyarticlesnestedwithinthatarticle,suchasthereadercommentsinExample2.


Example2demonstratesnestedarticleelementsintheformofuser-submittedcommentstotheparentarticle.

Example2(nestedarticles):

<article>

<h1>The Diversity of Papua New Guinea</h1>

. . . [parent article content] . . .

<footer>

. . . [parent article footer] . . .

</footer>

<section>

<h1>Reader Comments</h1>

<article>

<footer>bloose wrote on <time datetime=”2010-08-20”

pubdate>August 20, 2010</time>:</footer>

<p>Great article! I’ve always been curious about

Papua New Guinea.</p>

</article>

<article>

. . . [next reader comment] . . .

</article>

</section>

</article>

tip Pleaseseetheotherelementsinthischapterforadditionalexamplesthatincludearticle.


asideTangentialcontent

Syntax <aside></aside>Attributes HTML5Only:Global

DescriptionTheasideelementindicatesasectionofcontentthatistangentiallyrelatedtothemaincontentonthepagebutthatcouldstandonitsown.Itmaybeaboxwithinthemaincontentitself,inthesamecolumnbutnotnestedinthemaincontent,orin(oras)asecondarycolumn.Examplesincludeapullquote,asidebar,aboxoflinkstorelatedarticlesonanewssiteorotherblogentries,advertising,groupsofnavelements,andalistofrelatedproductsonacommercesite.

Example1showsanasideusedforaninsetsidebar.

Example1(nestedinmaincontent):

<article>

<h1>The Diversity of Papua New Guinea </h1>

. . . [article content] . . .

<aside>

<h1>Papua New Guinea Quick Facts</h1>

<ul>

<li>The country has 38 of the 43 known birds of

paradise.</li>

<li>Though quite tropical in some regions, others

occasionally experience snowfall.</li>

. . .

</aside>

. . . [more article content] . . .

</article>

Thatsamearticlemightincludea“RelatedStories”asidecontainingalistoflinkstootheressaysaboutthecountryorsurroundingregion(Indonesia,Australia,andsoon).Alternatively,thatasidecouldbeinadifferentpagecolumninsteadofnestedinthearticle.

Now,let’sconsideranexampleofadesignportfolioorcasestudies,inwhicheachpagefocusesonasingleprojectandyouprovidelinkstotheotheronesinanadjacentcolumn(ascontrolledbyCSS,notsimplybyvirtueofarrangingthecodeasshowninExample2).

Example2(notnestedinmaincontent):

<article> 

<h1>. . . [name of project] . . .</h1>

<figure>. . . [project photo] . . .</figure>

<p>. . . [project write-up] . . .</p>

</article>



<aside>

<h1>Other Projects</h1>

<nav>

<ul>

<li><a href=”habitat-for-humanity.html”>Habitat for

Humanity brochure</a></li>

<li><a href=”royal-philharmonic.html”>Royal

Philharmonic Orchestra site</a></li>

. . .

</ul>

</nav>

</aside>


Itwouldbeperfectlyinetonestthisparticularasideintheprojectarticle,too,sincetheyarerelated.

Onthatsubject,anasidenestedinthepage’smaincontenttypicallyrequiresacloserrelationshipthanwhenit’soutside.Forexample,ifthemaincontentisablogentryarticleelement,youcouldmarkupyourblogrollinanon-nestedaside.Itwouldbeinappropriatetonestitinthearticle,becauseitisn’trelatedtothatspeciicentry—unless,ofcourse,yourblogpostis“MyFavoriteBlogs”!Notethatoneotherplaceyoumaynotnestanasideisinsideanaddresselement.

note Usethe figureelement,notaside,tomarkupfiguresthatarepartofanarticle,suchasachartorgraph.PleaseseeChapter12formore

information.

footer

Footerofsegmentorpage

Syntax <footer></footer>Attributes HTML5Only:Global

DescriptionUsethefooterelementtorepresentafooterforthenearestarticle,aside,blockquote,body,details,fieldset,figure,nav,section,ortdelementinwhichitisnested.Itsigniiesthefooterforthewholepageonlywhenitsnearestancestoramongtheseisthebody(seeExample1).Andifafooterwrapsallthecontentinitssection(suchasanarticle,forexample),itrepresentsthelikesofanappendix,index,longcolophon,orlonglicenseagreement,dependingonitscontent.

Afootertypicallyincludesinformationaboutitssection,suchaslinkstorelateddocuments(seeExample1),copyrightinformation(seeExample1),itsauthor(seeExample2),andsimilaritems.Afooterdoesnotneedtobeattheendofitscontainingelement,thoughusuallyitis.Also,youmaynotnestaheaderelementoranotherfooterwithinafooter,normayyounestafooterwithinaheaderoraddresselement.

Evenifyou’veneverwrittenalineofHTML5,you’renodoubtfamiliarwiththenotionofapagefooter.That’sonesuchuseforthefooterelement,asshowninExample1.

tip Pleaseseetheentryfortheheaderelementinthischapterforanexampleofhowthepageheaderandcontentareacouldbe

structured.

Example1(aspagefooter):

<body>

. . . [page header and content] . . .



<footer>

<p><small>© Copyright 2011 The Corporation, Inc.</

➥ small></p>

<ul>

<li><a href=”terms-of-use.html”>Terms of Use</a></li>

<li><a href=”privacy-policy.html”>Privacy Policy</a>

➥ </li>

</ul>

</footer>

</body>

Pleaseseethenavelemententryinthischapterforanexplanationofwhythelinksulisn’twrappedinanav.

ThefollowingborrowsfromExample1inthearticleelemententryinthischapter.Itdemonstratesafooterinthecontextofapagesection.Pleaseseethatentryforanexplanationoftheaddresselement’sscopehere.

Example2(asapagesectionfooter):

<body>

. . .

<article>

<h1>. . . [article header] . . .</h1>

<p>. . . [article content] . . .</p>

<footer> 

<p>Leandra Allen is a freelance journalist who

earned her degree in Anthropology from the

University of Copenhagen.</p>

<address>

You may reach her at <a href=”mailto:leandra@the

➥ runningwriter.com”>[email protected]

➥ </a>.

</address>

</footer>

</article>

<footer id=”footer”> 

. . . [copyright, terms of use, privacy policy] . . .

</footer>

</body>

Theid=”footer”(callitanythingyoulike)onthepagefooterisoptionalandisjusttodifferentiateitfromtheotherfooterforstylingcontrol.


header

Groupedintroductorycontent

Syntax <header></header>Attributes HTML5Only:Global

DescriptionUsetheheaderelementtomarkupagroupofintroductoryornavi-gationalcontent.Itusuallyincludesthesection’sheading(anh1–h6orhgroup),butthisisn’tmandatory.Someotherheaderusesincluderepre-sentingtheheaderforthewholepageorcontainingasearchform,rele-vantlogos,orasection’stableofcontents(seeExample2).SeeExample1regardingtheirstthree.Youmaynotnestafooteroranotherheaderwithinaheader,normayyounestaheaderwithinafooteroraddresselement.

note Don’tuseheaderunnecessarily.Ifallyouhaveisanh1–h6oranhgroupandnocompanioncontentworthyofgroupingwithit,there’s

noneedtowrapitinaheaderinmostcases.

Whenyouthinkofaheader,nodoubtapage’smastheadcomestomind,asinthiscommonstructureinX/HTMLpages:

<body>

<div id=”header”>

. . . [site logo, global navigation, etc.] . . .

</div>

. . . [page content and footer] . . .

</body>

HTML5’sheaderelementistherightchoiceforreplacingthatdiv,butaheadermayalsoappearelsewhereinyourpages,asshowninExample2.But,irst,let’sreplacethatpageheaderdiv.

Example1(aspageheader):

<body>

<header>







<nav>

<ul> . . . </ul>

</nav>

</header>

<article>

. . . [page content] . . .

</article>

<footer>

. . . [copyright, terms of use, privacy policy, etc.]

. . .

</footer>

</body>

tip Pleaseseetheentryforthefooterelementinthischapterforanexampleofhowtostructureapagefooter.

AsImentioned,headerisn’tlimitedtocontainingyourpage’smasthead.InExample2I’veaddedaheaderthatwrapsboththeheadingandques-tionlinksatthetopofaFAQ.Thecommonthemeoftheexamplesisthat

theheadercontainsagroupofintroductorycontentornavigationthatleadsintothenextsection.

Example2(inpagecontent):

<body>

<header>

. . . [site logo, navigation, etc.] . . .

</header>

<article>

<header>

<h1>Frequently Asked Questions</h1>

<nav>

<ul>

<li><a href=”#answer1”>What is your return

policy?</a></li>

<li><a href=”#answer2”>How do I find a

location?</a></li>

. . .

</ul>

</nav>

</header>



<article id=”answer1”>

<h1>What is your return policy?</h1>

<p> . . . [answer] . . . </p>

</article>

<article id=”answer2”>

<h1>How do I find a location?</h1>

<p> . . . [answer] . . . </p>

</article> (continuesonnextpage)

. . .

</article> 

. . .

</body>

tip ThenavelementisappropriatearoundthelistofFAQquestionlinkssinceit’samajornavigationgroupwithinthepage,asdiscussedinthe

naventryinthischapter.

hgroupGroupofmultipleheadings

Syntax <hgroup>[twoormoreheadings]</hgroup>

Attributes HTML5Only:Global

DescriptionThehgroupelementrepresentsasectionheaderandmaycontainonlytwoormoreh1–h6headings.It’sfortimeswhenyourheadinghasmulti-plelevels,suchassubheadings,alternativetitles,ortaglines,orifyoudon’twantthosesubheadingsoralternatetitletoaffectthedocumentoutline.Groupingtheminanhgroupindicatestheyarerelated.

Forinstance,considerthenewsstoryshownintheexample.

Example:

<article>

<hgroup>

<h1>Giraffe Escapes from Zoo</h1>

<h2>Animals Worldwide Rejoice</h2>


</hgroup>

<p>. . . [article content] . . .</p>

</article>

Onlytheirstinstanceofthehighest-rankedheadinginanhgroupappearsinthedocumentoutline—“GiraffeEscapesfromZoo”intheexample.Similarly,ifanotherh1appearedafterit,itwouldbeomittedfromtheoutlinejustliketheh2.Pleasesee“HTML5’sDocumentOutline”earlierinthischapter.

navSectionofmajornavigation

Syntax <nav></nav>Attributes HTML5Only:Global

DescriptionX/HTMLdoesn’thaveanelementthatexplicitlyrepresentsasectionofmajornavigationlinks,butHTML5does:thenavelement.Linksinanavmaypointeitherwithinthepage,tootherresources,orboth.However,useitonlyforyourdocument’smostimportantgroupsoflinks,notallofthem.

navdoesn’treplacetheneedtostructureyourlinksinanulandolelement,asappropriate.Continuetousethoseelements,andsimplywrapanavaroundthem.

HTML5recommendsnotwrappingancillarypagefooterlinkslike“TermsofUse”and“PrivacyPolicy”inanav,whichmakessense.Sometimes,though,yourpagefooterreiteratesthetop-levelglobalnavigationor

includesotherimportantlinkslike“StoreLocator.”Inmostcases,Irecom-mendputtingthosetypesoffooterlinksinanav.

Thefollowingsamplenewspageincludesfourlistsoflinks,onlytwoofwhichareconsideredmajorenoughtowarrantbeingwrappedinanav:

Example:

<body>

<header>





<nav>

<ul> . . . </ul>

</nav>

</header>

<div id=”main”>

<h1>Arts & Entertainment</h1>

<article>

<h1>Gallery Opening Features the Inspired,

Inspiring</h1>

<p>. . . [story content] . . . </p>

<aside>

<h1>Other Stories</h1>



<ul> . . . [story links] . . . </ul>

</aside>

</article>

</div>

<aside id=”sidebar”>

<nav>

<ul>

<li><a href=”/arts/movies/”>Movies</a></li>

<li><a href=”/arts/music/”>Music</a></li>

. . .

</ul>

</nav>

</aside>

<footer>



<ul> . . .</ul>

</footer>

</body>

ThesecondarynavigationintheasideallowstheusertonavigatetootherpagesintheArts&Entertainmentdirectory,soitconstitutesamajornavigationalsection.

Notethatyoushouldn’tnestanavwithinanaddresselement.

tip Example2intheheaderelemententryinthischapterincludesanexampleofanavsurroundingagroupoflinksthatpointwithin

thepage.

So,howdoyoudecidewhenagroupoflinksdeservesanav?Ultimately,it’sajudgmentcallbasedonyourcontentorganizationandaccessibility.Althoughthisfeaturedidn’texistatthetimeofthiswriting,auseragentsuchasascreenreadermaychoosetoprioritizelinkscontainedinanavoverothers.Forinstance,itcouldallowuserstojumpeasilyfromonenavblocktoanotherwithakeyboardcommand.Orauseragentmaypresentthenavelementsandsuppressotherlinksinitiallytoassistcertainusers(note:thisisn’tdefaultbrowserbehavior).


sectionThematiccontentgrouping

Syntax <section></section>Attributes HTML5Only:Global

DescriptionThesectionelementindicatesathematicgroupingofcontent,typicallywithaheading.Examplesincludecompositionsections(andsubsections,ifnested;seetheexample),chapters,oreachtabwithinatabbedmodule.

note Keepinmindthatsectionisnotagenericcontainerlikediv,becausesectionconveysmeaning.Generallyspeaking,usesectioninsteadof

divifitscontentshouldappearinthepage’soutline(see“HTML5’sDocumentOutline”earlierinthischapter).

Thedistinctionbetweenarticleandsectionisalittlesubtle.HTML5recommendsusingarticleinsteadifthecontentcouldbesyndicated.Pleaseseetheexamplesthroughoutthischaptertogetasenseofhowtousearticle.

Thefollowingexample,likeExample2inthischapter’sarticleelemententry,showsarticleandsectionworkingtogether.

Example:

<article>


. . . [introductory content] . . .

<section>


. . . [instructions] . . .

</section>

<section> 


<section> 



</section>

<section> 

<h1>Jumping to Chapters</h1>


</section>

</section>

. . .

</article>

Notethatyoushouldn’tnestasectionwithinanaddresselement.

Thischapterfeaturestext-levelsemanticsthatareuniquetoHTML5.

Ofthese,youwillprobablyindyourselfusingthenewfigureandfigcaptionthemost,sincetheyaddressacommoncontentconvention(aigurewithacaption,surprise!)forwhichX/HTMLlacksdedicatedelements.

Thischapter’scounterpartisChapter5;togethertheydetailallthetext-levelelementsavailabletoyouwhendevelopingHTML5documentsandapplications.

Text

12


figcaptionCaptionforaigure

Syntax <figure> <figcaption></figcaption></figure>


DescriptionThefigcaptionelementrepresentsthecaptionorlegendforafigureelement’scontents.Itmightbeabriefphotodescriptionorreferencesthatbeginwith“ExhibitD”andthelike.Youcannotusefigcaptionunlessit’sinafigureelementandfigurehasothercontent.Andalthoughfigcaptionisoptional,afiguremayincludeonlyone,anditmustbeeithertheirstorlastchildelementofthefigure.

Pleaseseethefigureelementinthischapterformoredetailsandcodeexamples.

figureAigure

Syntax <figure></figure>Attributes HTML5Only:Global

DescriptionUsethefigureelementtomarkupaself-containedpieceofcontent(withanoptionalcaption)thatisreferredtobythemaincontentofyour

Part3:HTML5ElementsandGuidance Chapter12:Text 247

document.Typically,figureispartofthecontentthatreferstoit,butthefigurecouldalsoliveelsewhereonthepageoronanotherpage,suchasinanappendix.

Afigureelementmayincludeachart,agraph,aphoto,anillustration,acodesegment,andsoon.Thinkofhowyouseeiguresinmagazineornewspaperarticles,stories,andreports,andyou’llhaveagoodsenseofwhentousefigure.

Theoptionalfigcaptionisafigure’scaptionorlegendandmayappeareitheratthebeginningorattheendofafigure’scontent.(Seethefigcaptionentryinthischapterformoredetails.)

ConsiderExample1,anexcerptfromanannualreport,whichincludesapiecharttosupplementtheprimarycontent.

Example1:

<article>

<h1>2011 Revenue by Industry</h1>

. . . [report content] . . .

<figure>

<figcaption>Figure 3: 2011 Revenue by Industry

➥ </figcaption>

<img src=”chart_revenue.png” width=”260” height=”260”

alt=”Revenue chart: Clothing 42%, Toys 36%,

Food 22%” />

</figure>

<p>As Figure 3 illustrates, . . . </p>

. . . [more report content] . . .

</article>


tip

Notetheuseoftheimage’saltattributeinExample1toconveythechart’scontentstoscreenreadersorintheeventabrowser’simages

areturnedoff.

Anotherpartofthereportcouldincludealetterfromthepresidentofaboardoftrustees,accompaniedbyherphotoandacaption.

Example2:

<article>

. . .

<figure>

<img src=”photo_president.jpg” width=”200” height=”300”

alt=”Gwen Chapman” />

<figcaption>Gwen Chapman, President of the Board

➥ </figcaption>

</figure>

. . .

</article>

Or,insteadofaphoto,itcouldbeavideointroduction(pleaseseethevideoelementinChapter13).figuremayalsoincludemultiplepiecesofcontent.Forinstance,Example1couldincludetwocharts:oneforrevenueandanotherforproits.Keepinmind,though,thatwhenusingafigurewithmultiplepiecesofcontent,onlyonefigcaptionelementispermitted.

note Don’tusefiguresimplyasameanstoembedallinstancesofself-containedcontentwithinabodyoftext.Oftentimes,theaside

elementmaybeappropriateinstead.PleaseseeitsentryinChapter11.


markHighlightedtext

Syntax <mark></mark>Attributes HTML5Only:Global

DescriptionThemarkelementislikeasemanticversionofahighlighterpen.Inotherwords,youdon’tuseahighlighterbecauseyouwanttocolorsnippetsofyourtextbookorlegaldocumentyellow;youuseitbecausethetextyouhighlightisespeciallyrelevanttothetaskathand(suchaswhenstudy-ingforanexam,reviewingacontractforkeylanguage,andsoon).Thesameistruewhenyouusemark;styleitstextwithCSSasyouplease(ornotatall,asisthedefaultuseragentbehavior),butuseitonlywhenit’spertinenttodoso.

Nomatterwhenyouusemark,it’stodrawthereader’sattentiontoaparticulartextsegment.Herearesomeusecasesforit:n Highlightingpartofaquotethatwasn’thighlightedinitsoriginal

formbytheauthortocallattentiontoit(seeExample1).n Highlightingasearchtermwhenitappearsinaresultspageoran

article.Supposeyousearchedformegapixelandeachresultingarticleused<mark>megapixel</mark>tohighlightthetermthroughoutitstextforyourbeneit.

n Highlightingacodefragment(seeExample2).


Example1:

<p>So, I went back and read the instructions myself to see

what I’d done wrong. They said:</p>

<blockquote>

<p>Remove the tray from the box. Pierce the overwrap

several times with a fork and cook on High for <mark>15

minutes</mark>, rotating it half way through.</p>

</blockquote>

<p>I thought she’d told me <em>fifty</em>. No wonder it

exploded in my microwave.</p>

tip markisnotthesameaseitherem(representsemphasis)orstrong(representsimportance).PleaseseetheirentriesinChapter5.

Example2featuresahighlightedpieceofcode.(Again,themarkcodewon’tlookdifferentunlessyoustyleitwithCSS.)

Example2:

<p>Experienced developers know it’s bad practice to use a

class name that describes how it should look, such as with

the highlighted portion below:

<pre>

<code>

<mark>.redText</mark> {

color: #c00;

}

</code>

</pre>


meterAscalarmeasurement

Syntax <metervalue=””></meter>

Attributes HTML5Only:Global,form,high,low,min,max,optimum,value

DescriptionThemeterelementsigniiesameasurementwithinaknownrangeorafractionalvalue.InplainEnglish,it’sthetypeofgaugeyouusetorepre-sentthelikesofvotingresults(forexample,“30%Smith,37%Garcia,33%Clark”),thenumberofticketssold(forexample,“811outof850”),numericaltestgrades,anddiskusage.Youmayusemeterwithinmostotherelements,thoughnotwithinanothermeter.

Althoughit’snotrequired,asabestpracticeyoushouldincludetextinsidemeterthatrelectsthecurrentmeasurementsoolderuseragentsmaypresentit.

Examples:

<p>Project completion status: <meter value=”0.80”>80%

completed</meter></p>

<p>Car brake pad wear: <meter low=”0.25” high=”0.75”

optimum=”0” value=”0.21”>21% worn</meter></p>

meterisnotformarkingupgeneralmeasurementssuchasheight,weight,distance,orcircumferencethathavenoknownrange.Forexam-ple,youcannotdothis:<p>Iwalked<metervalue=”3”>3</meter>milesyesterday.</p>.However,youcandothefollowing:


Example(withtitle):

<p>Miles walked during half-marathon: <meter min=”0”

max=”13.1” value=”2.5” title=”Miles”>2.5</meter></p>

meterdoesn’thavedeinedunitsofmeasure,butyoucanusethetitleattributetospecifytextofyourchoosing,asinthepreviousexample.Useragentsmightdisplaythetitleasatooltiporotherwiseleverageitwhenrenderingthemeter.

note HTML5suggestsuseragentsmightrenderameterlikeahorizontalbarwiththemeasuredvaluecoloreddifferentlythanthemaximumvalue

(unlessthey’rethesame,ofcourse).Thinkofathermometeronitsside.Nobrowserssupportthisatthetimeofthiswriting.Inthemeantime,youcanstylemetertosomeextentwithCSSorenhanceitfurtherwithJavaScript.

AttributesinDetailEachoftheseattributesisoptionalexceptvalue.Andallthoseindicat-inganattributevalueofnumbershouldbesettoavalidloating-pointnumber.Negativenumbersareallowed.n form="formelementID":Associatesthemeterwiththeformelement

whoseidequalsthevalueofthisattribute.Thisoverridesthedefaultbehavior,whichisifmeterisnestedinsideaformelement,it’sassoci-atedwiththatelement.

n high="number",low="number",optimum="number":Worktogethertosplittherangeintolow,medium,andhighsegments.optimumindicatestheoptimumpositionwithintherange,suchas“0brakepadwear”inoneoftheexamples.Setoptimumlowerthanlowtoindi-catethatlowvaluesarebetter,dotheoppositeforhigh,andsetitinbetweenifneitheralowvaluenorahighvalueisoptimal.


n min="number":Speciiesthelowerboundoftherange.Itequals0ifit’sunspeciied.

n max="number":Speciiestheupperboundoftherange.Itequals1.0ifit’sunspeciied.

n value="number":Required.Speciiesthevalueforthemetertoindi-cateasthevaluemeasurement.Ifit’slessthantheminvalue,useragentstreatitthesameasmin,andifit’smorethanmax,itistreatedthesameasmax.

Furthermore,thefollowingmustbetruewhenyouapplytheseattributevalues(LTEmeans“islessthanorequalto”):n minLTEvalueLTEmax.n minLTElowLTEmax(iflowisspeciied).n minLTEhighLTEmax(ifhighisspeciied).n minLTEoptimumLTEmax(ifoptimumisspeciied).n lowLTEhigh(ifbothlowandhigharespeciied).

Andifaminimumormaximumisn’tspeciied,thenthevalueattributemustbebetweentherangeof0and1.

note Usetheprogresselement(seeitsentryinthischapter)insteadofmetertoindicateatask’sprogress,suchaswithaprogressbar.


progressTaskprogressindicator

Syntax <progress></progress>Attributes HTML5Only:Global,form,max,value

DescriptionUsetheprogresselementtodisplaythecompletionprogressofatask(likeaprogressbar).

Forinstance,aWebapplicationcouldindicatetheprogressasit’ssavingalargeamountofdata.Althoughit’snotrequired,asabestpracticeyoushouldincludetext(forexample,“0%saved,”asshownintheexam-ple)insideprogressthatrelectsthecurrentvalueandmaxforolderuseragents.

Example:

<p>Please wait as we save your data. Current progress:

<progress id=”progressBar” max=”100”>0% saved</progress></p>

Thoughafulldiscussionisbeyondthescopeofthisbook,typicallyyouwouldupdateboththeprogressvalueandtheinnertext(forexample,makeit“20%saved,”andsoon)dynamicallywithJavaScript.var bar = document.getElementById(‘progressBar’);givesyouaccesstotheelementfromtheexample,andthenyoucangetorsetbar.value.


AttributesinDetailThoseindicatinganattributevalueofnumbershouldbesettoavalidloating-pointnumber.n form="formelementID":Associatestheprogresswiththeform

elementwhoseidequalsthevalueofthisattribute.Thisoverridesthedefaultbehavior,whichisifprogressisnestedinsideaformelement,it’sassociatedwiththatelement.

n max="number":Speciiesthenumberthevalueattributemustreachtosignalthetaskiscomplete.Itmustbegreaterthan0,andifit’sunspeciied,itequals1.0.

n value="number":Speciiesthecurrentprogressasanumber.Itisoptional,butifit’sspeciied,itmustbeequaltoorgreaterthan0andlessthanorequaltothemaxattribute.

note Youmaynotnestoneprogressinsideanotherone.

note Therearetwotypesofprogresselements:determinateandindeter-minate.Adeterminateprogresshasavalue,soitsprogresscanbe

determinedbytherelationofthevaluetothemaxattribute.Anindeterminateprogressdoesnothaveaspecifiedvalue,soalthoughprogressmaybeoccur-ring,itslevelcan’tbedetermined(thetaskmaybewaitingforfeedback). HTML5suggestsuseragentsdisplaydeterminateandindeterminateprogresselementsdifferentlybutisshortonspecificsotherthantosaythatdeterminateonesshouldshowthevalueofvaluerelativetothevalueofmax.Nobrowserssupportthisatthetimeofthiswriting.Inthemeantime,youcanstyleprog-resstosomeextentwithCSSorenhanceitfurtherwithJavaScript.


rpForrubyfallbackparentheses

Syntax <rp>(</rp>and<rp>)</rp>


DescriptionUsetherpelementtodisplayparenthesesaroundrubytext(thertelement)inuseragentsthatdon’tsupportrubyannotations.Useragentsthatdosupportrubyignoretherp,sotheydon’tdisplaytheparentheses.

Pleaseseetherubyelementinthischapterforanexample.

rtRubytextcomponent

Syntax <ruby> <rt></rt></ruby>


DescriptionThertelementcontainstherubytextusedinarubyannotation.Thecontentofanrtrepresentstheannotationoftherubyelementcontentthatimmediatelyprecedesit(notincludinganrpelement).

Pleaseseetherubyelementinthischapterforanexample.


rubyArubyannotation

Syntax <ruby> <rp>(</rp><rt></rt><rp>)</rp></ruby>


DescriptionArubyannotationisaconventioninEastAsianlanguages,suchasChineseandJapanese,typicallyusedtoshowthepronunciationoflesser-knowncharacters.Thesesmallannotativecharactersappeareitheraboveortotherightofthecharacterstheyannotate.Theyareoftencalledsimplyrubyorrubi,andtheJapaneserubycharactersareknownasfurigana.

Therubyelement,aswellasitsrtandrpchildelements,isHTML5’smechanismforaddingthemtoyourcontent.rtspeciiestherubychar-actersthatannotatethebasecharacters.Theoptionalrpallowsyoutodisplayparenthesesaroundtherubytextinuseragentsthatdon’tsupportruby.ThisexampledemonstratesthisstructurewithEnglishplaceholdercopy.Theareaforrubytextishighlighted.

Example:

<ruby>

base <rp>(</rp><rt>ruby chars</rt><rp>)</rp>

base <rp>(</rp><rt>ruby chars</rt><rp>)</rp>

</ruby>


Auseragentthatsupportsrubymaydisplayitlikethis(orontheside):

IftheexampleincludedthebaseChinesecharactersforBeijing(whichrequirestwocharacters)andtheiraccompanyingrubycharacters,auseragentthatsupportsrubymaydisplayitlikethis(orontheside):

Asyoucansee,itignorestherpparenthesesandjustpresentsthertcontent.However,auseragentthatdoesn’tsupportrubydisplaysitlikethis:

Youcanseehowimportanttheparenthesesare;withoutthem,thebaseandrubytextwouldruntogether,cloudingthemessage.

note Atthetimeofthiswriting,onlyInternetExplorerandGoogleChromesupportrubyannotations(allthemorereasontouserpinyour

markup).TheHTMLRubyFirefoxadd-on(https://addons.mozilla.org/en-US/firefox/addon/6812)providessupportinthemeantime.

tip Youmaylearnmoreaboutrubycharactersathttp://en.wikipedia.org/wiki/Ruby_character.


timeDateand/ortime

Syntax <time></time>Attributes HTML5Only:Global,datetime,pubdate

DescriptionUsethetimeelementtorepresentaprecisetimeorGregoriancalendardate.Thetimeisbasedona24-hourclockwithanoptionaltime-zoneoffset.Youmaynotnestatimeelementinsideanotherone.

Thedatetimeattributeprovidesthedateand/ortimeinamachine-read-ableformat.Thissampledemonstratesthedatetimeformat:

2011-03-25T17:19:10-02:00

Thismeans“March25,2011,at10secondsafter5:19p.m.”Tseparatesthedate(YYYY-MM-DD)andtime(hh:mm:ss),andthetime-zoneoffsetisprecededby-(minus)or+(plus).Youaren’trequiredtoprovidedatetime,andifyoudo,itdoesn’tneedtobethefullcomplementofinformation(seeExample1).

Theoptionaltextcontentinsidetime(thatis,<time>text</time>)appearsonthescreenasahuman-readableversionofthedatetimevalue.

Thefollowingexamplesdemonstratevarioustimeconigurations.


Example1(variations):

<p>The volunteers arrive at <time>03:30</time>.</p>

<p>We began our hike through Zion National Park on <time

datetime=”2003-07-03T10:30:00”>July 3, 2003 at 10:30 am

➥ </time>.</p>

<p>They made their dinner reservation for <time datetime=

➥ ”2010-11-02T19:15:00”>tonight at 7:15</time>.</p>

<p>The record release party is on <time datetime=”2010-11-02”>

➥ </time>.</p>

You’llnoticethatthelastonedoesn’thaveanytextcontent.Insuchcases,useragentsaresupposedtorenderthedatetimevalueastextinahuman-friendlymanner,butasofthiswriting,noneyetdoso.You’llhavetowaituntilafewbrowserssupportthisrenderingfeatureoftimetoseetheexactresults.

Usethepubdateattributetoindicatethattimerepresentsapublishingdate(see“AttributesinDetail”formorespeciics.)

Example2(withpubdate):

<article>

<header>

<h1>Popularity of Mountain Hiking Sees Steady

Increase</h1>

<p><time datetime=”2006-06-15” pubdate>June 15, 2006

➥ </time></p>

</header>

. . . [article content] . . .

</article>


Ifthearticlehadreader-submittedcomments,thosecouldbetime-stampedwithtime,datetime,andpubdate,too.

AttributesinDetailn datetime:Thisprovidesthedateortimebeingspeciied.Ifyoudon’t

includeit,thedateortimeisrepresentedbythetimeelement’stextcontent.Itsmachine-readableformat(describedearlierinthisentry)allowsforsyncingdatesandtimesbetweenWebapplications.

n pubdate:ThisBooleanattributespeciiesthatthetimeelementrepresentsthepublicationdateandtimeofthenearestarticleelementthatcontainsthetimeelement.Ifthereisn’tanarticleancestor,thepublicationdateappliestothewholepage.Ifpubdateisincluded,eitherdatetimeorthetimeelement’stextcontentasavaliddatestring(suchas“June15,2006”inExample2)withanoptionaltimeisrequired.pubdatemaybespeciiedaseitherpubdateorpubdate=”pubdate”.ThelatterisrequiredforXHTML5.

note Donotusetimetomarkupimprecisedatesortimes,suchas“themid-1900s,”“justaftermidnight,”“thelatterpartoftheRenaissance,”

or“earlylastweek.”

note BecausedatesinthetimeelementarebasedontheGregoriancalen-dar,HTML5recommendsyoudon’tuseitforpre-Gregoriandates.

Therehasbeenalotofdiscussionaboutthislimitation,butit’sacomplicatedissue.Readhttp://www.quirksmode.org/blog/archives/2009/04/making_time_saf.htmlforanextensiveexplanationofsomeoftheissues.


wbrAlinebreakopportunity

Syntax <wbr>or<wbr/>


DescriptionBrowserswraptextcontentautomatically,butsometimesawordorcontinuousphraseistoolongtoitintheavailablespace.Insuchacase,usethewbrelementinbetweenwordsorletterstoindicatewherecontentmaywrapifnecessarytomaintainlegibility.Toclarify,wbrdoesnotforcealinebreaklikethebrelement;itinformsthebrowserofanopportunitytoinsertalinebreak.

Inthisexample,thewordsruntogetherwithoutspacestomimicbeingsaidveryquickly,andthewbrsspecifypointsforwrapping.

Example:

<p>They liked to say, "Friendly<wbr>Fleas<wbr>and<wbr>

Fire<wbr>Flies<wbr> Friendly<wbr>Fleas<wbr>and<wbr>Fire<wbr>

Flies<wbr>" as fast as they could over and over.</p>

OneofHTML5’sgoalsistoeliminatetheneedforbrowserplug-instoprovidemediacontentandrich,interactiveexperiences.Thethoughtisthatopenstandardsshouldprovideallyouneedsoyouaren’tboundtoproprietarytechnologiessuchasAdobeFlashandMicrosoftSilverlight.

Tothatend,mediamakesahugeleapinHTML5withbothnativeaudioandvideosupport.ThelatterisoneofHTML5’shot-ticketitems.It’salsohotlydebatedamongthebrowservendors,asyou’lllearninthischap-ter.Regardless,thelikesofYouTubeandVimeohavealreadyjumpedonboard,anditsmomentumpromisestokeepgrowingwiththereleaseoftheAppleiPadandotherdevicesthataresansplug-ins.

EmbeddedContent(Images,Media,andMore)

13

And,howaboutrich,interactiveexperiences?Thecanvaselementmakeshugewavesinthatdepartment.Thischapterdoesn’thaveroomforanin-depthexplorationofcanvas,butitdoesprovideanoverviewandseveralresourcessoyoucandigintoitfurtheronyourown.

audioEmbeddedaudiostream

Syntax <audio></audio>Attributes HTML5Only:Global,autoplay,controls,loop,preload,src

DescriptionUsetheaudioelementtoembedanaudiostream.

Example:

<audio src=”ocean.oga" controls=”controls”>



<p>Sorry, your browser doesn’t support HTML5 audio

with the Ogg Vorbis format. You may <a href=”ocean.oga”>

➥ download the file</a> instead.</p>

</audio>

Thetextinsidetheaudioelementisfallbackcontentthatdisplaysonlyifthebrowserdoesn’tsupportaudio.YoucanincludeamessagelikeinExample1,oryoucanincludecodethatembedsanothertypeofaudioplayer,suchasFlash.

note Thefallbackcontentareashouldn’tbeusedforaccessibility-focusedcontent,suchasanaudiotranscript.

Part3:HTML5ElementsandGuidance Chapter13:EmbeddedContent(Images,Media,andMore) 265

Asisthecasewiththevideoelement,themajorbrowsershavenotagreedonabaselineaudioformattosupportwiththeaudioelement,andHTML5doesnotdictateoneasaresult.Asofthetimeofthiswriting,thesupportwassplitamongafewformats:n AAC(M4A):Safari4+n MPEG(MP3):Chrome3+,Safari4+n MPEG-4(MP4):Chrome3+,Safari4+n OggVorbis:Chrome3+,Firefox3.5+,Opera10.5+n

WAV:Firefox3.5+,Safari4+,Opera10.5+

Additionally,MicrosofthassaidthatIE9willsupportHTML5audiowithMP3andAAC(M4A).Youmaytrackthelatestaudiosupportondesk-topandmobilebrowsersathttp://www.htmlfiver.com/html5-browser-support/.

Thismeansyou’llneedtoprovidemultiplesourceilestosupportallbrowsers.Thesourceelementallowsyoutodoexactlythat.Pleaseseeitsentryinthischapterforanexamplewithaudio.

note Eventhoughthesebrowserssupportaudio,youmayexperienceanoccasionalbug.It’saprettynewfeatureforallofthem,butitshould

improveovertime.

AttributesinDetailPleaseseethedescriptionsfortheautoplay,controls,loop,preload,andsrcattributesinthevideoentryinthischapter,sincetheybehavethesameforaudio.

canvasBitmapdrawingsurface

Syntax <canvas></canvas>Attributes HTML5Only:Global,height,width

DescriptionThecanvaselementisoneoftheheadline-grabbingfeaturesofHTML5.ThinkofitlikeanentirelyblankimgelementthatyoucandrawonwithJavaScript.Itis—truetoitsname—adigitalcanvas.Youcancreategames,graphs,animations,andotherdynamicbitmapimages.

Example:

<canvas id=”piechart” width=”400” height=”430”>



</canvas>

Youshouldalwaysprovidefallbackcontentinsidethatdisplaysifthebrowserdoesn’tsupportcanvasorJavaScriptisturnedoff.Thiscontentshouldbesimilarinspirittothebitmapcanvas.Forinstance,iftheexam-plecanvaswereapiechart,yourfallbackcontentcouldbethis:

<p>45% chose blue as their favorite color, 30% chose green,

and 25% chose red.</p>

note Oneshortcomingofcanvasisitisn’taccessible.Sure,thefallbackcontentis,butanythingyoudrawoncanvasisn’t.Someproposalsto

remedythisarebeingdiscussedatthetimeofthiswriting.


Atthetimeofthiswriting,canvasissupportedbyeverymajorbrowser—Chrome,Firefox,Opera,Safari—exceptInternetExplorer.However,therearerumors(thoughnotanannouncementfromMicrosoft)thatIE9mightincludeit.Inthemeantime,developersmustresorttousingExCanvas(http://code.google.com/p/explorercanvas/).

LearnMoreSo,howdoyoudrawoncanvas?Well,youaccessyourcanvaselementthroughitsidandusethebuilt-inJavaScriptAPIfordrawingonitssurface.Unfortunately,apropercanvasdrawingdiscussionisbeyondthescopeofthisbook,becauseitcouldillatleastachapterbyitself.But,thefollowingresourcesareallyou’llneedtogetbothasenseofwhatyoucandowithcanvasandhowtodoit:n Demos:CanvasDemos(http://www.canvasdemos.com/)provides

informationandlinkstoawidevarietyofcanvasapplications.Italsoincludesatutorialssection,plusalinktoacheatsheetifyousearchforthatterm.

n Tutorials:– FromMozilla:https://developer.mozilla.org/en/Canvas_tutorial– FromOpera:http://dev.opera.com/articles/view/html-5-canvas-the-

basics/– FromOpera(advanced):http://dev.opera.com/articles/view/

blob-sallad-canvas-tag-and-javascrip/

AttributesinDetailn heightandwidth=”numberofpixels”:Setthedimensionsofthe

canvasinpixels.Theydefaultto300(width)and150(height)ifundeined.


embed

Embedplug-incontent

Syntax <embed>or<embed />

Attributes HTML5Only:Global,height,src,type,width

DescriptionTheembedelementaddsexternalcontentthatrequiresaplug-in,suchasaFlashgameormovie.embedisn’tpartoftheX/HTMLspecs,butbrows-ershavesupporteditforyears,soHTML5hasmadeitoficial.

note PleaseseetheobjectelemententryinChapter6fordifferencesbetweenobjectandembed.

Example1:

<embed src=”game.swf” type=”application/x-shockwave-flash”

width=”500” height=”500” />

note

embedisanemptyelement,meaningit’sproperlywrittenas<embed>or<embed />insteadof<embed></embed>and,consequently,doesn’t

haveanyinnercontent.However,youmayneedtousetheinvalid,latterformforbackwardcompatibility.Also,youcan’tassociatefallbackcontentwithembedlikeyoucanfortheaudioandvideoelements,whicharenotemptyelements.

Eventhoughitdoesn’tvalidateinX/HTMLpages,embedisubiquitousnowadayssinceit’spartofthecodeYouTubeandothervideositesprovidetoembedavideoonasite.ForExample2,I’veslightlymodiiedYouTubecode(notincludingtheobjectportion)inordertomakeitvalidHTML5.Namely,Imadeembedanemptyelementandchangedallamper-sandsto&.


Example2:

<embed src="http://www.youtube.com/v/Z3ZAGBL6UBA&hl=en_

➥ US&fs=1&" type="application/x-shockwave-flash"

allowscriptaccess="always" allowfullscreen="true" width="480"

height="385" />

You’llnoticetwoattributes,allowscriptaccessandallowfullscreen,thataren’tamongthefourattributesnativetoembed.ThisisOK,becauseembedallowscustomattributesspeciictoplug-ins.Theseattributesarepassedintoplug-insasparameters.

AttributesinDetailn src=”url”:Thepathtotheresourcen type=”MIMEtype”:TheMIMEtypeoftheresource,suchas

application/x-shockwave-flash

n width=”numberofpixelsorpercentagevalue”andheight=”numberofpixelsorpercentagevalue”:Thewidthandheightinpixelsorpercent-agevalues.Thepercentagesarerelativetothesizeoftheembed’sparentelement.

sourceAmediasource

Syntax <source src=””>or<source src=”” />

Attributes HTML5Only:Global,media,src,type

DescriptionNotalluseragentssupportthesamemediaformatsfortheaudioandvideoelements,asdiscussedintheirentriesinthischapter.Thesource

elementallowsyoutospecifymultiplemediasourceURLsforaudioandvideo,soiftheuseragentdoesn’tsupporttheirstinthelist,itlookstothesecond,thenthethird,andsoon,untilitindsoneitdoessupport.

Example:

<audio controls="controls" autoplay=”autoplay”>



<source src="laughter.oga" type="audio/ogg;

➥ codecs=vorbis" />



<source src="laughter.spx" type="audio/ogg;

➥ codecs=speex" />

</audio>

Thisistherecommendedpracticesinceyou’llriskshuttingoutusersifyouprovideonlyonesource.Notethatyouarepermittedtousesourceonlyineitheranaudioorvideoelement.Pleaseseeanexampleofsourcewiththevideoelementinthevideoentryinthischapter.

AttributesinDetailn media=”mediaquerylist”:Ifdesired,specifythemediaplatform(s),

suchasscreenorprojection,tohelpthebrowserdeterminewhetherit’llbeusefultoloadtheresourcespeciiedbysrc.Ifyouomitthemediaattribute,whichiscommon,itdefaultstoall.SeethelinkelementinChapter3formoreinformation.

n src=”uri”:Required.Thisisthepathtothemediaresource.n type=”MIMEtype”:Thisspeciiesthetypeofthemediaresource(for

example,audio/mp3,video/ogg,orvideo/mp4)speciiedbysrctohelptheuseragentdeterminewhetheritsupportsit.Theoptionalcodecsparameterservesthesamepurposebutisspeciictothecodec(s)usedtoencodethemedia.Inbothcases,iftheuseragentknowsitdoesn’t

supportit,itlooksatthenextsource,ifany.typemustbeavalidMIMEtype.You’llindseveralexamplesoftypeandcodecsconigura-tionsforbothaudioandvideoathttp://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-source-element.

videoAnembeddedvideo

Syntax <video></video>Attributes HTML5Only:Global,autoplay,controls,height,loop,poster,preload,src,width

DescriptionNativevideoplaybackisoneofHTML5’shighest-proileadditions,andit’simplementedwiththevideoelement.

Example1(basicvideoembed):

<video src=”your-video.ogv” controls=”controls”>



</video>

Addingavideotoyourpageisthateasy—noplug-ins,complicatedembeddingmethods,orJavaScriptrequired.srcisthepathtoyourvideo,andcontrols=”controls”(orsimplycontrols,ifyoupreferthatformat)makesdefaultplay,pause,andotherbuttonsavailabletotheuser.(See“AttributesinDetail”regardingotherattributes.)OryoucancreateyourowncontrolsandaddbehaviorwithJavaScript(seehttps://developer.mozilla.org/En/Using_audio_and_video_in_Firefoxforataste).


TheHTMLinsidevideoisoptionalthoughhighlyencouraged.Itdisplaysonlyifthebrowserdoesn’tsupportthevideoelement.Typically,you’llwanttoincludeanembedmethodforanothervideoplayerformat,suchasFlash,orperhapsasimplemessagewithalinkdirectlytothevideoileforoflineviewing.PleaseseeExample2andrelatedcontentforthebestwaytoapproachfallbacksolutions.

note Donotusevideo’sinnercontentforaccessibilitymeans,suchastoincludeatranscriptofthevideo.Intheory,thevideoitselfshouldbe

encodedwithcaptionsorrelatedinformation.Atthetimeofthiswriting,therewasn’tastandardcaptioningformatforthevideoelement,butdiscussionswereunderway.

ThevideoFormatDebateAddingvideomaybesimple,butunfortunately,it’sbeendificulttogetthemajorbrowservendorstoagreeuponthebaselinestandardvideoformat.It’sbeenahotlydebatedissue,thedetailsofwhichIwon’tgetintohere,thoughyoucanreadasummaryathttp://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-June/020620.html.Asaresult,HTML5removedaninitialrequirementthatuseragentsmustsupportOggTheoraataminimumandnowdoesn’trequireaspeciicformat.

Currently,thefollowingformatsworkwiththevideoelementonthebrowserslisted:n OggTheora:Universalsupportforanopen,licensing-androyalty-free

formatsuchasOggTheoraistheHolyGrail,buttheissueisn’tquitethatsimple.ThesupportingbrowsersareChrome3.0+,Firefox3.5+,andOpera10.5+.

n H.264:Thepopularformatinwhichvastamounts(forexample,YouTubeetal.)ofvideocontentisalreadyencoded.Thesupport-ingbrowsersareChrome3.0+,Safari3.1+,andInternetExplorerwithGoogleChromeFrameinstalled.InternetExplorer9,stillin

developmentatthetimeofthiswriting,willsupportH.264(withouttheneedforGoogleChromeFrame).

tip Youmaytrackthelatestsupportfor videoondesktopandmobilebrowsersathttp://www.htmlfiver.com/html5-browser-support/.

Asyoucansee,neitherformatissupportedacrosstherangeofbrowsers.Therefore,unlessyouknowyouraudienceprimarilyusesoneofthesesetsofbrowsers—veryunlikely,exceptfornarrowerplatformsliketheiPhoneandiPad—you’llneedtoencodeyourvideoinatleasttwoformats.

That’snotparticularlyconvenient,butsupposeyoudogeneratetwoversions.Howdoyouservethemtousers?Thesourceelementhasyoucovered.

MultipleMediaSourceswiththesourceElementExample2showshowtousethesourceelementtospecifymultiplemediasources.

Example2(providemultiplevideosources):

<video controls="controls">



<source src="your-video.ogv" type='video/ogg;

➥ codecs="theora, vorbis"' />



<source src="your-video.mp4" type='video/mp4;

➥ codecs="avc1.42E01E, mp4a.40.2"' />



. . .

</video>


Notethatyouspecifythesrconeachsourceelementinsteadofonthevideostarttag.Theuseragentchecksthetypeandcodecsinformationoftheirstsourcetoseewhetheritsupportsit.Ifitknowsitdoesn’t,itmovestothenextone,andsoon.Pleaseseethesourceelementinthischapterformoredetails.

tip VideoforEverybody(http://camendesign.com/code/video_for_everybody)isablockofcode(noJavaScriptrequired)youmayuse

thatleveragesthevideoandsourceelementswithfallbacksforQuickTimeandFlashsoyourvideocanworkonallbrowsers,providedyourvideoisencodedinthevarietyofformats.

AttributesinDetailn autoplay:Ifpresent,thisBooleanattributeinstructstheuseragent

tostartplayingthemediawhenthepageloads,ratherthanwaitingfortheusertoinitiateplayback.Here’sanexampleofusingit:<videosrc=”skywriter.ogg”autoplay=”autoplay”></video>(orsimply,autoplay).

n controls:Ifpresent,thisBooleanattributeinstructstheuseragenttodisplaycontrolssotheusercancontrolplayback.Thesedefaultcontrolsincludeplay,pause,volume,seek,andinsomeinstancesmore(browsersaresupposedtoprovidemore,butnotalldo).Thelookandfeelofthedefaultcontrolsvariesbetweensupportedbrowsers.IfyoucreateyourowncontrolswithJavaScript,thedefaultcontrolsshowifscriptingisdisabled.

n loop:Ifpresent,thisBooleanattributeinstructstheuseragenttoplaythemediaagainwhenitreachestheend.

n poster=”url”:Ifpresent,thisisthepathtoanimagethatisintendedtoberepresentativeofthevideo,suchasoneoftheinitialframes.HTML5recommendsbrowsersshowtheposterframewhenthevideo


isn’tavailable(suchaswhenloading),thoughtheymaychoosetoshownothinginstead.Useragentshavefulldiscretionofwhattoshowwhenthevideoispausedontheirstframe.

n preload=”none|metadata|auto”:Preloadedvideoloadsinpartorfullbeforetheuserinitiatesplayback.Thepreloadattributeisyourmeanstosuggesttotheuseragentwhatyouthinkwillresultinthebestuserexperienceregardingpreloading.It’sjustahint;theuseragentmaychoosetoignoreyoursettingif,forexample,bandwidthisnotaconcern.preloadhasnoeffectifautoplayispresent.Theoptionsareasfollows:– preload=”none”:Thissuggeststhatitisn’tnecessarytopreloadthe

videooranymetadata.Usethisifit’slesslikelytheuserwillplaythevideoorifyouwanttominimizeservertrafic.

– preload=”metadata”:Thisisthesameasnoneexcepttohintthatfetchingvideometadataonly(notthevideoitself),suchasthedimensions,duration,andsoon,isOK.

– preload=”auto”:Thishintstotheuseragentthatservertraficisnotaconcernsoitmaypreloadsomeorallofthevideo.

n src=”url”:Thisisthepathtothevideo.n width=”numberofpixelsorpercentagevalue”andheight=”numberof

pixelsorpercentagevalue”:Thesedeinethewidthandheightofthevideo.Iftheydon’tequalthedimensionsofthevideo’sintrinsicsize,thevideowillshrinkorstretchaccordinglyandmaybeletterboxedorpillarboxed.Notethatthevideowillmaintainitsnativeaspectratioregardlessofwhetherwidthandheightrelectthataspectratio.Ifthewidthandheightareundeined,theplayertypicallyrendersattheintrinsicsizeofthevideo.YoumaydeinethesewithCSSinstead,suchaswithvideo{width:320px;height:240px;}.

FormsmakeabigleapinHTML5aspartofitsfocusonmakingWebapplicationsricherandtheirdevelopmenteasier.

Amongthemostcompellingadditionsaretheinputtypesforcoloranddatepickers,numbers,arangeslider,search,emailandtelephonenumberields,andmore.Plus,thereareattributesformarkingieldsasrequired,orspecifyingaregularexpressionthatperformspatternmatch-ingwithoutJavaScript.Pleaseseethe“HTML5andtheinputElement”boxinChapter7’sinputentryformoreinformation.

HTML5alsoincludesnewform-relatedelements,whichthischaptercovers.

(Note:PleasealsoseethemeterandprogresselementsinChapter12sinceyoumayindthemvaluabletousewithaform.)

Forms

14


datalistAlistofpredeinedoptions

Syntax <datalist> <option></option> ...</datalist>


DescriptionThedatalistelementspeciiesalistofpredeinedoptionelementsforaninputelement.Forinstance,youmayturnatextinputcontrolintoacombobox,meaningtheusermayeithertypeinavalueorchoosefromthedatalist’soptions.Settingtheinput’slistattributetothedatalist’sidhooksthemtogether.

Ifabrowsersupportsdatalist,itdoesn’tdisplayanyofitscontents,exceptthatitmakestheoptionsavailableoncetheuserinteractswiththeinput.Thisallowsyoutoaddfallbackcontentinthedatalistcontentforbrowsersthatdon’tsupportdatalist.(There’sonenotableexception:Asofthiswriting,Chromedoesn’tshowthefallbackcontenteventhoughitdoesn’tsupportdatalist.)

Inthisexample,Ipredeinesomedrinkoptions.UsersmaychoosefromthoseortypesomethinglikeTang,ifthat’stheirpreference.Forthepurposesofbeingreallyexplicittodemonstratetheconcept,Iincluded“fallback”intheattributevaluesofeachelementthatisignoredbyabrowserthatsupportsdatalist.(Note:Theexampleassumesthecodeisinaformelement.)

Part3:HTML5ElementsandGuidance Chapter14:Forms 279

Example:

<label for="drink">Enter your favorite drink:</label>

<input type="text" name="drink" id="drink" list="drinkslist">

<datalist id="drinkslist">

<label for="drinkfallback">Or, select a drink from this

list:</label>

<select name="drinkfallback" id="drinkfallback">



<option value="apple juice">apple juice</option>

<option value="frappe">frappe</option>

<option value="water">water</option>

</select>

</datalist>

Technically,youshouldn’thavetospecifythevalueattributesontheoptions,butOpera9+,theonlybrowsertoprovidereasonable(thoughincomplete)supportfordatalistatthetimeofthiswriting,doesn’tpresentanoption’sinnertext,onlythevalue(andthelabelattributevalueifvalueispresent).Youcan’tleaveouttheinnertext,though,becauseanemptyselectboxwoulddisplayasthefallbackcontent.

Here’showtheexamplelooksinabrowserthatdoesn’tsupportdatalist.(IaddedalittleCSStomakeitwrapandbreatheabit.)

UntilOperaoranotherbrowserhascompletesupportfordatalist,Section2.1ofhttp://docs.google.com/View?id=dch3zh37_0cf8kc8c4illus-trateshowaproperimplementationmightlookandbehave.


keygenAkeypairgeneratorcontrol

Syntax <keygenname="">or<keygenname=""/>

Attributes HTML5Only:Global,autofocus,challenge,disabled,form,keytype,name

DescriptionThekeygenelementisakeypairgeneratorcontrol.Whentheformissubmitted,“theprivatekeyisstoredinthelocalkeystore,andthepublickeyispackagedandsenttotheserver.”Manybrowsers(butnotInternetExplorer)havesupportedkeygenforalongtimeeventhoughitwasneveranoficialelementinanyHTMLspec.HTML5makesitoficial.

Example:

<form action="processkey.php" method="post"

enctype="multipart/form-data">

<div>

<label for=”key”>Choose a Key Grade:</label>

<keygen name="key" id="key">

<input type=”submit” value="Submit Key">

</div>

</form>

keygenrenderslikeaselectboxinsupportingbrowsers,thoughitsoptionsmaybedifferent.ThisshowshowkeygenrendersinChrome:


HTML5doesn’tdictatehowthegeneratedprivatekeyshouldbeused,thoughpresumably,itcouldresultinaclientcertiicatebeinggeneratedbytheserverandofferedtotheuserforthepurposesofSSLandcertii-cateauthenticationservices.

AttributesinDetailn autofocus:Whenpresent,thisBooleanattributetellsthebrowser

tosetfocusonthekeygencontrolassoonasthepageisloaded.Thisallowsuserstousethecontrolwithouthavingtotabtoitorclickitirst.

n challenge="challengestring":Whenpresent,thevalueispackagedwiththesubmittedkey.

n disabled:Whenpresent,thisBooleanattributedisablestheelementsotheusercan’tinteractwithit.Furthermore,adisabledcontroldoesn’treceivefocus,itisskippedintabbingnavigation,anditsvalueisnotsubmittedwiththeform.

n form="formid":Bydefault,eachformcontrolisassociatedwithitsnearestancestorformelement(thatis,theformthatcontainsit).Setthisattributetotheidofadifferentforminthepagetooverridethisbehavior.

n keytype="keyword":rsaisthedefaultkeywordthatsupportingbrowsersunderstand.Firefoxalsosupportsec,andbothFirefoxandSafarisupportdsa.Ifkeytype="rsa",thestateofthekeyisRSA.Useragentsarenotrequiredtosupportthisorothervalues,only“recognizevalueswhosecorrespondingalgorithmstheysupport.”

n name:Thisassignsanametothekeygenforprocessingtheform.


outputTheresultofacalculation

Syntax <output></output>Attributes HTML5Only:Global,for,form,name

DescriptionTheoutputelementrepresentstheresultsofacalculation.

Example:

<form action=”calculate-it.php” method=”post”>

<input name=”value1” id="value1" type=”number”> x

<input name=”value2” id="value2" type=”number”> =

<output name="total" for="value1 value2"></output>

<input name=”submit” type=”submit”>

</form>

Oneapplicationofoutputcouldbeashoppingcartthatupdatesthetotalpriceastheuserchangesthenumberofproductsortheshippingoption.AsanenhancementforuserswhosebrowserssupportJavaScript,youcouldalsoprocessoutputcalculationsontheclientsidebywiringaJavaScriptfunctiontoupdatetheoutputeverytimeachangeismadetothecart.That’snotareplacementforserver-sideprocessing,though,sinceyoudon’twanttoshutoutuserswithJavaScriptdisabled.

AttributesinDetailn for="controlid(s)":Thisexplicitlyassociatestheoutputwitheach

controlinvolvedinthecalculationwhenitissettoaspace-separatedlistofthecontrolids.Thecontrolsmayexistanywhereinthesamedocument.Pleaseseetheexample.


n form="formid":Bydefault,anoutputisassociatedwithitsnearestancestorformelement(thatis,theformthatcontainsit).Setthisattri-butetotheidofadifferentforminthepagetooverridethisbehavior.

n name="outputname":Thisassignsanametotheoutputforthepurposesofprocessingtheform.

HTML5includestwonewinteractiveelements,detailsandmenu,andtheirsupportingelements,summaryandcommand,respectively.TheysupportoneofHTML5’sgoalsofmakingWebapplicationdevelopmenteasier,richer,andmoreaccessiblebybuildingfeaturesintonativeHTMLelements.

Thischapterexplainshowtoleveragethemtocreateapplication-styletoolbarsandcontextualmenus(inthecaseofmenu),aswellasexpand-ableandcollapsibleinformationandformcontrolmodules(inthecaseofdetails).Pleasebeaware,though,thatmuchofthenativefunctionalitythattheseelementspromisedoesn’texistinanymajorbrowseratthetimeofthiswriting.ThatisexpectedtochangeasbrowserscontinuetoincorporatemoreandmoreofHTML5’sfeatures.LiketheotherHTML5

InteractiveElements

15


chapters,thisonedetailshowtheelementsandattributeshouldbehaveonceimplementedcorrectly.

note Thedeviceelementisnotincluded,sinceit’sconsideredanadditiontoHTMLbeyondHTML5anditsdetailswerestill

beingdefinedatthetimeofthiswriting.Youmaytrackitsprogressathttp://dev.w3.org/html5/html-device/.Inshort,device“representsadeviceselector,toallowtheusertogivethepageaccesstoadevice,forexampleavideocamera”forvideoconferencingfromHTMLapplications.

command

Amenucommand

Syntax <commandlabel="">or<commandlabel=""/>

Attributes HTML5Only:Global,checked,disabled,icon,label,radiogroup,type

DescriptionThecommandelementrepresentsachoicewithinamenuelement.Acommandmaybeoneofthreestates,asspeciiedbyitstypeattribute.Thedefaultisanormalcommand(type="command"ornotype)thatisassociatedwithanaction(seetheexampleinthemenuentryinthischapter).Anotherisatoggle(type="radio"),asshowninthefollow-ingexample.Thethirdstateisachoiceofoneitemfromalistofitems(type="checkbox").

SupposeyouwriteawordprocessingWebapplication,andyouwanttoprovideacontextmenusouserscaneasilytogglethetrackchangesoptionfromwheretheyaretyping,ratherthannavigatingthroughthetoolbaratthetop.

Part3:HTML5ElementsandGuidance Chapter15:InteractiveElements 287

Example(contextmenuwithradiocommands):

<menu type=”context” id="trackChanges">

<h1>Track Changes</h1>

<command type="radio" radiogroup="tracking" label="On" />

<command type="radio" radiogroup="tracking" label="Off" />

</menu>

<article contenteditable="true" contextmenu="trackChanges">

. . . [paragraphs and other content the user may edit] . . .

</article>

Theradiogroupspeciiesanameforthegroupofrelatedradiocommandsthattogglewhenthecommandistoggled(inotherwords,theselectedoneistoggledon,andallothersintheradiogrouparetoggledoff).Thecontextmenuattributeonthearticleelementissettothemenu’sidinordertospecifythemenuasthearticle’scontextmenu;usersmaynotaccessitoutsidethearticle.

Atype="checkbox"commandmaybestructuredsimilarlybutwouldnotincludetheradiogroupattribute.

note Youmayusemenuinotherwaysbesidesacontextmenu.Pleaseseethemenuentryinthischapterforanexplanationofmenutypes,aswell

asanotherexampleandfurtherdiscussionofcommand,includinghowtomakeacommandfunctional.

AttributesinDetailn checked:Ifpresent,thisBooleanattributeindicatesthecommandis

selected.It’spermittedonlyiftypeissettocheckboxorradio.n disabled:Ifpresent,thisBooleanattributemakesthecommand

unavailable,thoughitmaystilldisplay.


n icon="imageURL":Thisspeciiesthelocationofanimagethatrepre-sentsthecommandandisshowntotheuser.

n label="text":Required.Thisspeciiesthecommandnametextthatisshowntotheuser.

n radiogroup="name":Thisvalueisanameofyourchoosingandmaybeassignedonlyiftype="radio".Pleaseseethedescriptioninthisentry.

n type="checkbox|command|radio":Thisdeinesacommand’sstate.Thecommanddefaultstotype="command"iftypeisomitted.Pleaseseethedescriptioninthisentry.

detailsAnexpandablewidget

Syntax <details></details>Attributes HTML5Only:Global,open

DescriptionThedetailselementexpandsorcollapsestorevealorhideinformationorcontrols.JavaScriptisn’trequiredforthisbehavior,sinceit’sbuiltintotheelement.

Bydefault,adetailselementshouldrenderasclosed,soitscontentdoesn’tdisplayexceptforthesummaryelement(theopenattributesetsittoopeninstead).summaryisthecaptionforthecontentand,dependingontheuseragent,maybethemeansbywhichtheusercanopenorclosethedetails.Ifsummaryisabsent,theuseragentshoulddisplayatermofitschoosing,suchasDetails.

Thesefollowingexamplesshowacouplewaysyoumightusedetails.Theirstisafootball(American-style)gametracker.Thesummaryprovidesasnapshotoftheaction,andtheusercanlearnmorebyopeningthedetailselement.Itcouldevenhaveavideoelementinit.Thesecondexampleisalistofemoticonstheusercouldtoggleopeninachatappli-cationandthencloseafterselectingone.

Examples:

<details>

<summary>Good Guys 20, Bad Guys 17, fourth quarter

➥ </summary>



</details>

<details>

<summary>Emoticons</summary>

<ul>

<li><a href=”#”><img src=”icon/super_smiley.png”

width=”20” height=”20” alt=”Super smiley” /></a></li>

<li><a href=”#”><img src=”icon/guffaw.png” width=”20”

height=”20” alt=”Guffaw” /></a></li>

. . . [more emoticons] . . .

</ul>

</details>

Anotherapplicationofdetailscouldbuildonthedrawingtoolexamplefromthemenuentryinthischapter.AloatingpalettelikethoseinPhotoshopcouldincludeaseriesofstackeddetailselementsthatrevealforminputstotypeinshapedimensionsorpickacolor,andsoon.


note Trytocraftasummarythatreflectsthevaluesofthedetailswheneverpossible.Thefootballexampledemonstratesthis.

AttributesinDetailn open:Whenpresent,thisBooleanattributespeciiesthatthecontent

withindetailsshouldbeshowntotheuser.Useragentsshouldn’tshowitbydefaultexceptthesummary.

menu

Anapplicationmenu

Syntax <menu></menu>Attributes HTML5Only:Global,label,type

DescriptionThemenuelementhashadapreviouslifeinHTML,butit’sdeprecatedinX/HTML.HTML5bothresurrectsandreinesittoaddvalue.

Amenumaybeacontextmenuoratoolbar,asspeciiedbyitstypeattribute(it’sneitheriftypeisundeined,asshownintheexample).Acontextmenuislikethekindthatdisplaysinsoftwarewhenyouright-clickorOption-click(orAlt-clickinsomecases).Atoolbarislikethekindavailablealongthetopofmostsoftware(thoughatoolbarmenuwon’tnecessarilyappearatthetop).Ineachcase,amenuhasoneormorechoices.

note menuisappropriateforWebapplicationmenus,notnavigation.PleaseseethenavelementinChapter11regardingstructuringnavigation.


Thecommandelementisonewaytodeineyourmenu’soptions.(Pleaseseeitsentryinthischapterformoredetails.)

Example(toolbarmenuwithcommands):

<menu type="toolbar">

<li>

<menu label="File">

<command label="New" icon="icon/new.png"

title="Start a new drawing" />

<command label="Open" icon="icon/open.png"

title="Open a drawing" />

<command label="Save" icon="icon/save.png"

title="Save your drawing" disabled="disabled" />

. . . [more commands] . . .

</menu>

</li>

<li>

<menu label="Edit">

. . . [commands for Edit menu] . . .

</menu>

</li>

</menu>

Thisexampleshowsamenuoftype="toolbar"foranimaginarydraw-ingapp(usingthecanvaselement,forinstance).Itassumestheuser’sbrowserhasJavaScriptenabled,sinceyoucan’tapplybehaviortocommandelements(orcanvas,forthatmatter)withoutit.Notethatthetypeisspeciiedonlyontheparentmenusincethenestedmenusarepartofthetoolbar(amenudoesn’trequirenestedmenus,however).Intheexample,eachnestedmenuisrepresentedintheinterfacebyitslabelattribute(althoughasofthiswriting,nopopularuseragentrendersityet).


note Theuseofliwithoutanolorulelementparentisparticulartomenu.menuallowsnearlyallotherHTMLelements,too,thoughyoucan’t

structuresomeofitwithlielementsandtherestwithsomethingelse.

ThedisabledattributerenderstheSavecommandelementinactive.Presumably,youwouldremovedisabledprogrammaticallytoenablethecommandoncetheuserperformsachange,asiscommoninapplications.Thetitleattributetextmaydisplayasatooltipasthepointerhoversoverthecommand;itisoptional,liketheiconattribute.

Acommandelementdoesn’tperformanactionunlessyouspecifyitsbehaviorviaanonclickevent.Forinstance,selectingtheNewcommandcouldcallaJavaScriptfunctionthatstartsanewdrawing.Istronglyrecommendyouaddtheonclickeventsunobtrusivelyratherthanasinlineonclickattributes.(PleasesearchforunobtrusiveJavaScriptonlinefordetails.)

Previously,Inotedthatcommandisjustonewaytorepresentamenu’schoices.Youmayalsouseelementssuchasa,button,andselect.Ifyouweretousebutton,theexample’sstructurewouldbethesameexceptbuttonelementswouldreplacethecommands.Thisapproachcouldbefriendliertobrowsersthatdon’tsupportcommand,becausetheywouldstillbeabletodisplaythelistofbuttons.

ContextMenusAcontextmenuisstructuredthesameasatoolbarexceptithasatype="context"declaration.Youassociateacontextmenuwithanotherelementbysettingtheelement’scontextmenuattributevaluetothemenu’sid.Pleaseseetheexampleinthecommandentryinthischapter.

note Usethehrelementasaseparatorwithinamenuasneeded.


note HTML5suggestshowamenumayappearbutdoesn’tdefineitoutright,souseragentrenderingsmayvary.

AttributesinDetailn type="context|toolbar":Deinesamenuaseitheracontextmenuora

toolbar.Iftypeisunspeciied,themenuisalistofoptionsthat’sneithertype.Forinstance,thenestedmenuintheexampledoesn’thaveatypesinceit’sasubmenu.

n label="text":Themenu’slabelthatisshowntotheuser.

summaryDetailssummaryorcaption

Syntax <summary></summary>Attributes HTML5Only:Global

DescriptionThesummaryelementprovidesasummary,caption,orlegendfortheothercontentsofadetailselement.Pleaseseethedetailsentryinthischapterformoreinformation.

a,94abbr,102acronym*,104address,28area,142article(HTML5only),227aside(HTML5only),230audio(HTML5only),264b,105base,44bdo,106big*,107

blockquote,108body,30br,110button,158canvas(HTML5only),266caption,186cite,111code,113col,186colgroup,187command(HTML5only),286datalist(HTML5only),278

Appendix:AlphabeticalHTMLElementsPageListing

LEGEND:(HTML5only) HTML4andXHTML1includeallelementsexceptthosemarkedwith

(HTML5only),whichareuniquetoHTML5.* HTML5includesallelementsexceptthosemarkedwithanasterisk(*).

Appendix 295

dd,71del,114details(HTML5only),288dfn,117div,35dl,73dt,79em,119embed,268fieldset,160figcaption(HTML5only),246figure(HTML5only),246footer(HTML5only),232form,161frame*,214frameset*,214h1–h6,36head,47header(HTML5only),235hgroup(HTML5only),238hr,39html,40i,121iframe,216img,144input,168ins,123kbd,124keygen,280label,176legend,177li,81link,49map,146mark(HTML5only),249menu(HTML5only),290meta,57meter(HTML5only),251nav(HTML5only),239noframes*,219

noscript,206object,149ol,84optgroup,178option,179output(HTML5only),282p,125param,153pre,126progress(HTML5only),254q,129rp(HTML5only),256rt(HTML5only),256ruby(HTML5only),257samp,131script,207section(HTML5only),242select,180small,132source(HTML5only),269strong,134style,63sub,135summary(HTML5only),293sup,136table,190tbody,196td,197textarea,182tfoot,200th,201thead,201time(HTML5only),259title,67tr,202tt*,137ul,89var,138video(HTML5only),271wbr(HTML5only),262

Aaelement,94–101attributes,97–100,101examplesofusing,94–97HTML5and,101

abbrelement,102–103abbreviations,102–103aboutthisbook,vii–xabsolutepath,95,96accesskeyattribute,15,18acronymelement,103,104addresselement,28–29anchors,96–101applicationcachemanifest,41–42applicationmenus,290–293areaelement,142–143articleelement,29,227–229,242asideelement,230–232,248

Atomfeedlink,52attributeminimization,10attributesBoolean,10Core,15–16data,20–21deprecated,24Events,17–18Global,18–22howthey’renoted,14–15I18n,16–17newtoHTML5,5obsolete,24

audioelement,264–265audioformatsupport,265authorcontactinfo,28–29

Index

Index 297

Bbelement,105–106,122,123baseelement,44–46bdoelement,106–107bestpracticesHTML,7–8scripting,204–205

bidirectionaltextoverride,106–107bigelement,107–108blockingbehavior,204block-levelelements,13,116,117blockquoteelement,108–110bodyelement,30–34deprecatedattributes,31–32eventattributes,31,32–34HTML5and,32–34

boldtext,105–106,122,123Booleanattributes,10bordersframe,216table,198,200

brelement,110breadcrumbnavigation,86browsers,xscripthandlingby,204supportforHTML5,4,221

buttonelement,158–159

Ccalculationresults,282–283canvaselement,266–267captionelement,186Castro,Elizabeth,24CDATAvalues,22characterencoding,22characterentities,23–24charsetattribute,22citeelement,111–112classattribute,15–16,18codeconventionsusedfor,ix–xHTML5syntaxformat,5–6

codeelement,113–114,138–139colelement,186–187colgroupelement,187–190

attributes,189–190examplesofusing,188–189

commandelement,286–288,291comments,13contenttypes,22–23contenteditableattribute,18–19contextmenus,290,292–293contextmenuattribute,19Coreattributes,15–16Cutts,Matt,38

Ddataattributes,20–21datatypes,22–23datalistelement,278–279date/timeinfo,259–261ddelement,71–72deinitionlists,73–79denotingtermsin,79–80describingtermsin,71–72dialogueand,79examplesof,73–77whentouse,78

delelement,114–117attributes,115–116block-level,116,117

deletedcontent,114–117deprecatedelements/attributes,24detailselement,288–290determinateprogress,255deviceelement,286dfnelement,117–118dirattribute,16,19divelement,35–36,223,242dlelement,73–79deprecatedattribute,77dialoguemarkupand,79examplesofusing,73–77whentouse,78

DOCTYPEs,7,9,11–13documentheadelements,43–68draggableattribute,19drawingsurface,266–267dtelement,79–80

TheHTMLPocketGuide298

Eelementsattributesfor,14–22conventionsusedfor,ix–xdeprecatedorobsolete,24emptyorvoid,10inlinevs.block-level,13newtoHTML5,4–5summarylistof,295–296Seealsospeciicelements

emelement,119–120,122,123embedelement,151,268–269embeddedcontentoverviewofelementsfor,141–155uniqueHTML5elementsfor,

263–275emptyelements,10Eventsattributes,17–18,21–22expandablewidgets,288–290

Ffavicons,52fieldsetelement,160figcaptionelement,246figureelement,246–248footerelement,232–234formelement,157,161–167attributes,165–167examplesofusing,162–165HTML5and,167

form-relatedelementsoverviewof,157–184uniquetoHTML5,277–283

frameelement,214frames,213–219framesetelement,214–215

GGlobalattributes,18–22dataattributes,20–21Eventsattributes,21–22

GoogleClosureCompiler,205

Hh1-h6elements,36–38H.264videoformat,272–273headelement,43,47–49headerelement,235–238headings,36–38,238–239hgroupelement,238–239hiddenattribute,19highlightedtext,249–250horizontalrule,39–40hrelement,39–40,292HTMLattributes,14–22bestpractices,7–8characterentities,23–24comments,13datatypes,22–23deprecatedelements/attributes,24DOCTYPEs,11–13documentstructure,8–9inlinevs.block-levelelements,13obsoleteelements/attributes,24summarylistofelements,295–296versiondifferences,10–11

HTML4DOCTYPEs,11–12HTML5differences,11summarylistofelements,295–296XHTMLdifferences,10

HTML5dataattributes,20–21DOCTYPEs,12documentoutlines,224–227elementstyling,7embeddedcontent,263–275form-relatedelements,277–283Globalattributes,18–22HTML4differences,11interactiveelements,285–293overview,4–7,221structuralelements,223–243summarylistofelements,295–296syntaxformats,5–6textelements,245–262

HTML5Outlinertool,225,227

TheHTMLPocketGuide Index 299

htmlelement,9,40–42HTMLRubyFirefoxadd-on,258

II18nattributes,16–17ielement,121–123idattribute,16,19,22iframeelement,216–218attributes,216–217,218HTML5and,218

imagemaps,146–148images,embedded,144–146imgelement,144–146indeterminateprogress,255inlineelements,13,116inputelement,168–175attributes,170–175HTML5and,172–175typesofinputs,168–170

inselement,123insertedcontent,123interactiveelements,285–293italicizedtext,119,121,122,123itemidattribute,19itempropattribute,19itemrefattribute,19itemscopeattribute,19itemtypeattribute,19

JJavaScript,17,203,204–205,206–209

Kkbdelement,124keygenelement,280–281keywords,59

Llabelelement,176–177langattribute,16–17,19,23languagecodes,23legendelement,177–178lielement,81–83,292linebreaks,110,262

linkelement,49–56attributes,54–55,56casesforusing,49–50faviconsand,52HTML5and,56relateddocumentsand,52–53stylesheetsand,50–52

linktypes,23lists,69–91deinition,73–79itemsin,81–83nested,70–71ordered,84–88unordered,89–91

Mmapelement,146–148markelement,249–250measurements,251–253mediacontent,263–275menucommands,286–288menuelement,83,290–293metaelement,9,57–62attributes,60,61–62commonlyusedformsof,58–59contenttypedeclaration,57–58HTML5and,61–62

metatags,57metadata,57meterelement,251–253attributes,252–253examplesofusing,251–252

MIMEtypes,22–23monospacetext,137

Nnameattribute,22navelement,238,239–241navigationorderedlistsand,86sectionoflinksfor,239–241unorderedlistsand,90

nestingarticles,228,229asides,230–231,232

TheHTMLPocketGuide300

nesting(continued)lists,70–71objects,150quotations,130tables,196

noframeselement,219noscriptelement,206–207

Oobjectelement,149–153attributes,151–152examplesofusing,149–150

obsoleteelements/attributes,24OggTheoravideoformat,272olelement,84–88HTML5and,87–88recommendedusesof,86

onclickattribute,17ondblclickattribute,17onkeydownattribute,18onkeypressattribute,18onkeyupattribute,18onmousedownattribute,17onmousemoveattribute,17onmouseoutattribute,17onmouseoverattribute,17onmouseupattribute,17optgroupelement,178–179optionelement,179–180orderedlists,84–88recommendedusesof,86usingunorderedvs.,85,90

outlines,224–227outputelement,282–283

Ppelement,125–126paginationnavigation,86paragraphs,125–126paramelement,153–155preelement,126–128prefetching,53preformattedtext,126–128preloadedvideo,275progresselement,253,254–255progressiveenhancement,

206–207

Qqelement,129–131quotationslong,108–110nested,130short,129–131

Rrelativepath,95rpelement,256RSSreaderlink,52rtelement,256rubyannotations,257–258rubyelement,257–258

Ssampelement,131scriptelement,43,204,207–211attributes,210–211examplesofusing,208–209HTML5and,211

scripting,203–211bestpracticesfor,204–205elementsandattributes,206–211

searchengineoptimization(SEO),43,68

sectionelement,242–243sectioningcontentelements,224selectelement,180–181semantics,7–8smallelement,132–133Souders,Steve,205sourceelement,269–271,273–274spanelement,35spellcheckattribute,19strongelement,122,123,134–135structural/sectionalelementsgeneraloverviewof,27–42uniquetoHTML5,223–243

styleattribute,16,19styleelement,63–66attributes,64–66HTMLand,65–66

stylesheetsembedded,63–66linkingto,50–52

TheHTMLPocketGuide Index 301

subelement,135–136subscriptnotation,135–136summaryelement,293supelement,136–137superscriptnotation,136–137supportWebsite,ix

Ttabindexattribute,15,20tableelement,185,190–196attributes,194–195examplesofusing,191–194resourcesabout,194

tabulardata,185–202taskprogressindicator,254–255tbodyelement,193,196–197tdelement,197–200teletypetext,137terminologyoverview,xtextbolding,105–106,122,123emphasizing,119–120,122–123,

134–135highlighting,249–250italicizing,119,121,122,123resizing,107–108,132–133

textelementsoverviewof,93–139uniquetoHTML5,245–262

textareaelement,182–184attributes,182–184HTML5and,183–184

tfootelement,192–193,195,200thelement,201theadelement,192,195,201–202thematiccontent,242–243timeelement,259–261time/dateinfo,259–261titleattribute,16,20titleelement,67–68toolbar,290,291trelement,202ttelement,137

Uulelement,89–91unobtrusiveJavaScript,17,292unorderedlists,89–91recommendedusesof,90–91usingorderedvs.,85,90

useragents,x

Vvalidators,8,227varelement,138–139variables,138–139videoelement,271–275attributes,274–275examplesofusing,271–272,

273–274multiplemediasourcesand,

273–274videoformatsand,272–273

VideoforEverybodycode,274

Wwbrelement,262WebresourcesHTML5WorkingDraft,4HTMLPocketGuidesupport,ixscript-loadingmethods,205

Webstandards,7–8widgets,288–290

XXHTMLDOCTYPEs,12–13HTML4differences,10summarylistofelements,

295–296syntaxformat,6

XHTML5,6X/HTML,x,223,239

YYUICompressor,205

Mass media in Nigerian democracy

Documents

Transcript of Mass media in Nigerian democracy