mass media in nigerian democracy
TRANSCRIPT
![Page 1: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/1.jpg)
The HTML
PocketGuide
BruceHyslop
Ginormous knowledge, pocket-sized.
![Page 2: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/2.jpg)
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
![Page 3: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/3.jpg)
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
![Page 4: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/4.jpg)
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
![Page 5: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/5.jpg)
Part1
Thispartofthebookcontainsonechapter,“HTMLBasics,”whichprovidesanoverviewofHTML5,discussestheversionsofHTML,recommendssomebestpractices,listscommonattributes,andmore.
HTMLBasics
![Page 6: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/6.jpg)
Part1Contents
Chapter1: HTMLBasics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
![Page 7: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/7.jpg)
ThischapterprovidesfoundationalinformationforParts2and3ofthebook.(Ifyou’vebeenaroundHTMLforawhile,muchofitwillbeoldhat.)
Icoverafewstandards-basedbestpractices,basicHTMLdocumentstruc-tureforalllavorsofthelanguage(includingHTML5),differencesamongtheversions,DOCTYPEs,basicdatatypes,commonattributes,anoteaboutobsoleteanddeprecateditems,andmore.
note Iencourageallreaderstoreviewthe“HowAttributesAreNotedinThisBook”box.
Let’sbeginwithanoverviewofHTML5incasethisversionofHTMLisnewtoyou.
HTMLBasics
1
![Page 8: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/8.jpg)
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
![Page 9: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/9.jpg)
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.
![Page 10: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/10.jpg)
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,
![Page 11: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/11.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 7
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
![Page 12: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/12.jpg)
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] . . .
![Page 13: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/13.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 9
</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>
![Page 14: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/14.jpg)
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.
![Page 15: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/15.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 11
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.
![Page 16: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/16.jpg)
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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.
![Page 17: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/17.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 13
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.Theymuststartwith<!--andendwith -->andtheymaycoverseverallinesofcode.Irecommendcommentingatleastthebeginningandendofmajorsectionsofyourpagestomakeyourcodeeasiertoread.
![Page 18: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/18.jpg)
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)
![Page 19: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/19.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 15
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
![Page 20: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/20.jpg)
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
![Page 21: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/21.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 17
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.
![Page 22: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/22.jpg)
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
![Page 23: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/23.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 19
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.
![Page 24: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/24.jpg)
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
![Page 25: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/25.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 21
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.
![Page 26: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/26.jpg)
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
![Page 27: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/27.jpg)
Part1:HTMLBasics Chapter1:HTMLBasics 23
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
![Page 28: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/28.jpg)
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).
![Page 29: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/29.jpg)
Part2
ThispartofthebookcoversallnondeprecatedelementsthataresharedamongHTML4,XHTML1,andHTML5(thoughsomeareobsoleteinHTML5,asnoted).ElementsuniquetoHTML5arecoveredinPart3.
Insomecases,analreadyexistingelementisdifferentinHTML5,whetherit’stheelement’smeaning,theavailabilityofanattribute,ortheadditionofnewattributes.Inotethesedifferencesthroughout.Inparticular,keepaneyeonthe“AttributesinDetail”sectionsandtheHTML5boxesattheendofrelevantentries.Eachboxdetailsdifferentusesand/orattributesfortheelement,allowingyoutounderstandtheirapplicationinHTML5ataglance.
HTMLElementsandGuidance
![Page 30: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/30.jpg)
Chapter2: PrimaryStructureandSections . . . . . . . . . . . . . . . . . . . . 27Chapter3: DocumentHead . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Chapter4: Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Chapter5: Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Chapter6: EmbeddedContent(ImagesandObjects) . . . . . . . 141Chapter7: Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Chapter8: TabularData . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185Chapter9: Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Chapter10: Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Part2Contents
![Page 31: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/31.jpg)
TheelementsinthischapterrepresentanHTMLdocument’shigh-levelstructuralandoutlinecomponents.Someareessential(afterall,youcan’twriteanHTMLdocumentwithoutthehtmlelement),whileothersareeitherusedsparingly(thehrelement)orhaveseentheirusagedeclineinHTML5(thedivelement).
ThischapterisacounterparttoChapter11,whichdescribesrelatedelementsuniquetoHTML5.Ifyou’rewritingX/HTMLdocuments,thenyoudon’tneedtohoponoverthere.But,ifyou’rewritingHTML5,thenthischapterandChapter11combinetodetailalltheprimarystructuralandsectioningelementsatyourdisposal.
PrimaryStructureandSections
2
![Page 32: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/32.jpg)
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.
![Page 33: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/33.jpg)
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.
![Page 34: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/34.jpg)
Part2:HTMLElementsandGuidance30
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>
![Page 35: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/35.jpg)
Part2:HTMLElementsandGuidance Chapter2:PrimaryStructureandSections 31
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.
![Page 36: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/36.jpg)
Part2:HTMLElementsandGuidance32
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.
![Page 37: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/37.jpg)
Part2:HTMLElementsandGuidance Chapter2:PrimaryStructureandSections 33
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.
(continuesonnextpage)
![Page 38: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/38.jpg)
Part2:HTMLElementsandGuidance34
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.
![Page 39: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/39.jpg)
Part2:HTMLElementsandGuidance Chapter2:PrimaryStructureandSections 35
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.
![Page 40: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/40.jpg)
Part2:HTMLElementsandGuidance36
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
![Page 41: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/41.jpg)
Part2:HTMLElementsandGuidance Chapter2:PrimaryStructureandSections 37
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>
![Page 42: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/42.jpg)
Part2:HTMLElementsandGuidance38
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.
![Page 43: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/43.jpg)
Part2:HTMLElementsandGuidance Chapter2:PrimaryStructureandSections 39
hrAhorizontalrule
Syntax <hr>or<hr />
Attributes Core,I18n,Events,HTML5Only:Global
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
![Page 44: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/44.jpg)
Part2:HTMLElementsandGuidance40
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">
![Page 45: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/45.jpg)
Part2:HTMLElementsandGuidance Chapter2:PrimaryStructureandSections 41
<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
(continuesonnextpage)
![Page 46: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/46.jpg)
Part2:HTMLElementsandGuidance42
HTML5andthehtmlElement(continued)
(applicationcanmeanarobustapplicationorjustahandfulofHTMLpages;itdoesn’tmatter).Theapplicationcachemanifestliststheilesanapplicationneedstooperatewhendisconnectedfromthenetwork.Thebrowsersavesacopyoftheileswhenyouaccessthesiteonline.DetailsaboutofflineWebapplicationsarebeyondthescopeofthisbook,butyouspecifytheattributelikethis:<html manifest=”myapplication.manifest”>
Pleasenotethatabaseelementhasnoeffectonresolvingarela-tiveURLinthemanifestattributesincemanifestisprocessedbeforebaseappears.
![Page 47: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/47.jpg)
AnHTMLdocument’sheadelementcontainsimportantinformationaboutthepage,linkstoexternalresourcessuchasstylesheets,andembeddedstyles,whennecessary.Plus,whatyouincludeinyourpage’sheadimpactssearchengineoptimization(SEO).
Eachoftheelementsdescribedinthischaptermayappearonlyinthehead,exceptstyle,whichhasanexceptioninHTML5.
note Thescriptelementmayalsoappearinthehead;however,it’sbesttoincludeitattheendofyourpagejustbeforethe</body>endtag
wheneverpossible.
DocumentHead
3
![Page 48: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/48.jpg)
Part2:HTMLElementsandGuidance44
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,
![Page 49: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/49.jpg)
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.
![Page 50: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/50.jpg)
Part2:HTMLElementsandGuidance46
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).
![Page 51: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/51.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 47
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
(continuesonnextpage)
![Page 52: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/52.jpg)
Part2:HTMLElementsandGuidance48
<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).
![Page 53: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/53.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 49
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,
![Page 54: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/54.jpg)
Part2:HTMLElementsandGuidance50
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.
![Page 55: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/55.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 51
Nowlet’sloadtwostylesheets.
Example2(loadtwoormorestylesheets):
<link rel="stylesheet" href="/common/css/base.css"
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):
<link rel="stylesheet" href="/common/css/base.css"
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
![Page 56: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/56.jpg)
Part2:HTMLElementsandGuidance52
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.
![Page 57: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/57.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 53
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.
![Page 58: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/58.jpg)
Part2:HTMLElementsandGuidance54
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.
![Page 59: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/59.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 55
– 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.
![Page 60: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/60.jpg)
Part2:HTMLElementsandGuidance56
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">
![Page 61: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/61.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 57
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>
<meta http-equiv="Content-Type" content="text/html;
➥ charset=utf-8" />
. . .
</head>
Thenameinthename-valuepairinthisexampleisthehttp-equivattribute,whilecontent,asalways,isthevalue.Includethismeta
![Page 62: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/62.jpg)
Part2:HTMLElementsandGuidance58
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>
<meta http-equiv="Content-Type" content="text/html;
➥ 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)
![Page 63: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/63.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 59
<meta name="keywords" content="solar panels, active solar,
passive solar, renewable energy, green energy, solar
panel installation, solar panel consultation,
industrial, commercial, residential" />
<meta name="author" content="Tanya Brown" />
. . .
</head>
ThemostusefulofthethreehighlightedmetaelementsinExample2isname="description".Asearchenginemaydisplaythisvalueasasnip-petoftextinitssearchresults.So,Ihighlyrecommendyouincludeasuccinct,informativedescriptionineachpage.Searchenginesdon’talldisplaythesamenumberofcharacters,though,solimityoursto150–160.
Theimpactofname="keywords"metadata(seeExample2)onsearchenginerankinghasdiminisheddramaticallyovertheyears,tothepointthatGoogledeclaredthatitcompletelyignoresname="keywords"forWebsearch.Somesearchenginesstillusethem(thoughnotheavily),socontinuetoincludethem,aslongastheyarerelevanttoyourcontent.Theyfelloutoffavorbecausemanyunscrupuloussiteownerstriedtotricksearchenginesbyincludingpopularkeywordsthatwereunrelatedtotheirsite’scontent.Searchenginesgotwisetothisandputmoreemphasisonasite’sbodycontentandfarlessonmetakeywords.
Thename="author"metadataissimilarinthatasearchenginespiderorotheruseragentmaychoosetouseit.
tip Usethefollowingmetaelementtotellasearchenginetoneitherindexthepagecontentnorfollowanyofthelinksonit.Youmayalso
specifynoindexornofollowindividually.<meta name="robots" content="noindex, nofollow" />
![Page 64: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/64.jpg)
Part2:HTMLElementsandGuidance60
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.
![Page 65: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/65.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 61
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"/> <!-- use instead of Example
1 format -->
<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)
![Page 66: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/66.jpg)
Part2:HTMLElementsandGuidance62
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.)
![Page 67: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/67.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 63
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.
![Page 68: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/68.jpg)
Part2:HTMLElementsandGuidance64
Example:
<head>
. . .
<link rel="stylesheet" href="base.css" type="text/css"
media="screen" />
<!-- overwrites conflicting rules in base.css -->
<style type="text/css" media="screen">
p {
font-size: 1.2em;
}
. . .
</style>
<!-- overwrites conflicting rules in base.css and style
element -->
<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
![Page 69: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/69.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 65
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.
(continuesonnextpage)
![Page 70: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/70.jpg)
Part2:HTMLElementsandGuidance66
HTML5andthestyleElement(continued)
Example:<body>
. . .
<article><!-- this doesn’t receive padding -->
<h1>This is not affected</h1>
<p>This is not affected.</p>
</article>
<article><!-- this receives padding -->
<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.
![Page 71: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/71.jpg)
Part2:HTMLElementsandGuidance Chapter3:DocumentHead 67
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>
![Page 72: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/72.jpg)
Part2:HTMLElementsandGuidance68
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.
![Page 73: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/73.jpg)
HTMLaffordsyouthreelisttypes:deinitionlist(dl),orderedlist(ol),andunorderedlist(ul).Iexplaineachindepthintheirrespectiveentriesinthischapter.
ListsareoneofthemostcommonlyusedsemanticelementsacrosstheWeb.Thisisparticularlytrueofunorderedlists,whichareubiquitousasthechoiceformarkingupnavigationandmanyothergroupsoflinks.
BeforeIexplaineachlist-relatedelement,I’lldiscussacapabilitythatiscommontoalllists:nesting.
Lists
4
![Page 74: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/74.jpg)
Part2:HTMLElementsandGuidance70
NestedListsListscanbenestedwithinotherlists,asshowninthefollowingexamplethatdetailsasequencedplantorelocate.Inthiscase,it’sanorderedlistinsideanotherone,thoughyoucannestanytypeoflistwithinanyothertype(seethedlentryinthischapterforarelatednote).
<ol>
<li>Take an Italian Berlitz course.</li>
<li>Move to Italy.
<!-- Start nested list -->
<ol>
<li>Have a yard sale.</li>
<li>Pack what’s left.</li>
<li>Ship boxes.</li>
<li>Jump on plane.</li>
</ol>
<!-- end nested list -->
</li><!-- close list item containing nested list -->
<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.
![Page 75: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/75.jpg)
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.
![Page 76: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/76.jpg)
Part2:HTMLElementsandGuidance72
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)
![Page 77: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/77.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 73
dl
Adeinitionlist
Syntax <dl> <dt></dt>
<dd></dd>
. . .
</dl>
Attributes Core,I18n,Events,HTML5Only:Global
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.
![Page 78: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/78.jpg)
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.
![Page 79: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/79.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 75
Example2:
<h3>Credits for <cite>Amélie</cite></h3>
<dl>
<dt>Director</dt> <!-- Single dt with single dd -->
<dd>Jean-Pierre Jeunet</dd>
<dt>Writers</dt> <!-- Single dt with multiple dds -->
<dd>Guillaume Laurant (story, screenplay)</dd>
<dd>Jean-Pierre Jeunet (story)</dd>
<dt>Cast</dt>
<dd>
<!-- Start nested list -->
<dl>
<dt>Audrey Tautou</dt> <!-- Actor/Actress -->
<dd>Amélie Poulain</dd> <!-- Character -->
<dt>Mathieu Kassovitz</dt>
<dd>Nino Quincampoix</dd>
. . .
</dl>
<!-- end nested list -->
</dd>
. . .
</dl>
note Iincludedtheblanklinebetweeneachgroupof
dtandddelementssoyoucouldseethegroupingsmoreexplicitly.It’snotrequiredinadefi-
nitionlistanddoesn’timpactitsrenderinginauseragent,soit’sentirelyuptoyouasanHTMLauthorwhethertoincludeit.
![Page 80: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/80.jpg)
Part2:HTMLElementsandGuidance76
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> <!-- Multiple dts with
single dd -->
<dt><dfn>boogeyman</dfn>, n.</dt>
<dd>A mythical creature that lurks under the beds of small
children.</dd>
![Page 81: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/81.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 77
<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.
![Page 82: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/82.jpg)
Part2:HTMLElementsandGuidance78
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.
![Page 83: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/83.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 79
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.
![Page 84: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/84.jpg)
Part2:HTMLElementsandGuidance80
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.
![Page 85: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/85.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 81
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.
![Page 86: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/86.jpg)
Part2:HTMLElementsandGuidance82
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)
![Page 87: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/87.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 83
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.
![Page 88: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/88.jpg)
Part2:HTMLElementsandGuidance84
olAnorderedlist
Syntax <ol> <li></li>
. . .
</ol>
Attributes Core,I18n,Events,HTML5Only:Global
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>
![Page 89: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/89.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 85
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.
![Page 90: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/90.jpg)
Part2:HTMLElementsandGuidance86
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.
![Page 91: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/91.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 87
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>
(continuesonnextpage)
![Page 92: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/92.jpg)
Part2:HTMLElementsandGuidance88
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.
![Page 93: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/93.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 89
ulAnunorderedlist
Syntax <ul> <li></li>
. . .
</ul>
Attributes Core,I18n,Events,HTML5Only:Global
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:
![Page 94: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/94.jpg)
Part2:HTMLElementsandGuidance90
•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.
![Page 95: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/95.jpg)
Part2:HTMLElementsandGuidance Chapter4:Lists 91
Articleheadlinelists.Theseoftenappearonahomepagetosurfacelinkstorecentarticlesoronanarticlesubpageasrelatedlinks.Viewsourceonyourfavoritenewssites,andyou’relikelytoseegroupsoflinkstoarticlesformattedinaul.
Relatedvideolists.Thesetypicallyhaveathumbnailimageandatitleanddescription.
DeprecatedAttributesn compactandtype:ObsoleteinHTML5.Theseattributearepresenta-
tionalinnaturesoweredeprecatedinfavorofusingCSS.Pleaseseetheolentryinthischapterformoreinformation.
![Page 96: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/96.jpg)
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
![Page 97: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/97.jpg)
Part2:HTMLElementsandGuidance94
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):
<!-- link within the same folder -->
<p>Africa has numerous inspiring areas to <a href=”parks-and-
➥ reserves.html”>experience animals in the wild</a>.</p>
<!-- link to another site -->
<p>. . . <a href=”http://en.wikipedia.org/wiki/Norway”
title=”History, geography, culture and more”>Norway on
Wikipedia</a> . . .</p>
![Page 98: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/98.jpg)
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> . . .
<!-- Up two levels and down one -->
. . . <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.
![Page 99: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/99.jpg)
Part2:HTMLElementsandGuidance96
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):
<!-- links from here -->
<p>Visit Africa to <a href=”#cheetahs”>experience cheetahs in
the wild</a>.</p>
<!-- to here in the current document (Approach #1) -->
. . .
<h2><a href=”#cheetahs” id=”cheetahs”></a>Experience Cheetahs
➥ </h2>
. . .
![Page 100: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/100.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 97
Thisisanalternativeapproach:
<!-- to here in the current document (Approach #2) -->
. . .
<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.
![Page 101: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/101.jpg)
Part2:HTMLElementsandGuidance98
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:<!-- rel specifies that 04-giraffes.html is a chapter of
the book of which the current document is a part -->
<p>Learn that and more in <a href="04-giraffes.html"
rel="chapter">Giraffes</a>.</p>
<!-- rev specifies that the current page is an appendix,
NOT that chapter-14.html is -->
![Page 102: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/102.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 99
<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,
![Page 103: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/103.jpg)
Part2:HTMLElementsandGuidance100
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.
(continuesonnextpage)
![Page 104: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/104.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 101
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).
![Page 105: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/105.jpg)
Part2:HTMLElementsandGuidance102
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>
![Page 106: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/106.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 103
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.
![Page 107: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/107.jpg)
Part2:HTMLElementsandGuidance104
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.
![Page 108: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/108.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 105
bBoldtext
Syntax <b></b>Attributes Core,I18n,Events,HTML5Only:Global
DescriptionInX/HTML,thebelementispurelypresentational;itrenderstextasboldbutprovidesnomeaning.Youcanthinkofitasaspanelementthatisboldbydefault.Becauseit’ssolelypresentational,bfelloutoffavorseveralyearsagoliketheielementandisallbutdeprecatedintheeyesofmany.Developersareadvisedtousethestrongelementinsteadwheneverappropriate,sinceithassemanticvalueanddoesn’tspeaktohowtheenclosedtextshouldlook.
Example:
<!-- Uses strong instead of b -->
<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.
![Page 109: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/109.jpg)
Part2:HTMLElementsandGuidance106
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.
![Page 110: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/110.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 107
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.
![Page 111: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/111.jpg)
Part2:HTMLElementsandGuidance108
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/”>
![Page 112: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/112.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 109
<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.
![Page 113: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/113.jpg)
Part2:HTMLElementsandGuidance110
HTML5andtheblockquoteElementHTML5saystheblockquoteandciteelementsareinvalidforrepre-sentingaconversation.
brAlinebreak
Syntax <br>or<br />
Attributes Core,I18n,Events,HTML5Only:Global
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.
![Page 114: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/114.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 111
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):
![Page 115: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/115.jpg)
Part2:HTMLElementsandGuidance112
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).
![Page 116: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/116.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 113
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.
![Page 117: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/117.jpg)
Part2:HTMLElementsandGuidance114
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.
![Page 118: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/118.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 115
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
![Page 119: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/119.jpg)
Part2:HTMLElementsandGuidance116
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>
![Page 120: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/120.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 117
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:
![Page 121: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/121.jpg)
Part2:HTMLElementsandGuidance118
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.
![Page 122: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/122.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 119
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.
![Page 123: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/123.jpg)
Part2:HTMLElementsandGuidance120
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>
![Page 124: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/124.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 121
iItalicizedtext
Syntax <i></i>Attributes Core,I18n,Events,HTML5Only:Global
DescriptionInX/HTML,theielementispurelypresentational;itrenderstextinital-icsbutprovidesnomeaning.Youcanthinkofitasaspanelementthatisitalicizedbydefault.Becauseit’ssolelypresentational,ifelloutoffavorseveralyearsagolikethebelement.Usetheemelementinsteadtoemphasizetext,sinceithassemanticvalueanddoesn’tspeaktohowtheenclosedtextshouldlook.
Example:
<!-- Uses em instead of i -->
<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.
![Page 125: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/125.jpg)
Part2:HTMLElementsandGuidance122
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.
(continuesonnextpage)
![Page 126: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/126.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 123
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.
![Page 127: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/127.jpg)
Part2:HTMLElementsandGuidance124
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.
![Page 128: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/128.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 125
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 . . .
![Page 129: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/129.jpg)
Part2:HTMLElementsandGuidance126
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>
![Page 130: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/130.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 127
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,
![Page 131: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/131.jpg)
Part2:HTMLElementsandGuidance128
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.
![Page 132: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/132.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 129
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
![Page 133: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/133.jpg)
Part2:HTMLElementsandGuidance130
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.
![Page 134: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/134.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 131
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.
![Page 135: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/135.jpg)
Part2:HTMLElementsandGuidance132
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.
![Page 136: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/136.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 133
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.
![Page 137: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/137.jpg)
Part2:HTMLElementsandGuidance134
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.
![Page 138: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/138.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 135
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>
![Page 139: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/139.jpg)
Part2:HTMLElementsandGuidance136
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>
![Page 140: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/140.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 137
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.
![Page 141: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/141.jpg)
Part2:HTMLElementsandGuidance138
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
![Page 142: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/142.jpg)
Part2:HTMLElementsandGuidance Chapter5:Text 139
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.
![Page 143: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/143.jpg)
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
![Page 144: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/144.jpg)
Part2:HTMLElementsandGuidance142
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.)
![Page 145: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/145.jpg)
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.
![Page 146: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/146.jpg)
Part2:HTMLElementsandGuidance144
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
![Page 147: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/147.jpg)
Part2:HTMLElementsandGuidance Chapter6:EmbeddedContent(ImagesandObjects) 145
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
![Page 148: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/148.jpg)
Part2:HTMLElementsandGuidance146
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?).
![Page 149: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/149.jpg)
Part2:HTMLElementsandGuidance Chapter6:EmbeddedContent(ImagesandObjects) 147
Example:
<div><!-- it can be inside other elements, such as a p -->
<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).
![Page 150: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/150.jpg)
Part2:HTMLElementsandGuidance148
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.
![Page 151: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/151.jpg)
Part2:HTMLElementsandGuidance Chapter6:EmbeddedContent(ImagesandObjects) 149
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">
(continuesonnextpage)
![Page 152: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/152.jpg)
Part2:HTMLElementsandGuidance150
<param name="movie" value="how_to_change_tire.swf" /> <!--
➥ for IE -->
<!-- Alternative content -->
<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><!-- Can I load this? Yes, then load it and stop. -->
<object><!-- No, then try this (and so on for other
objects). -->
<p>Alternative content</p><!-- Show only if no object
loaded -->
</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.
![Page 153: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/153.jpg)
Part2:HTMLElementsandGuidance Chapter6:EmbeddedContent(ImagesandObjects) 151
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”.
![Page 154: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/154.jpg)
Part2:HTMLElementsandGuidance152
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
![Page 155: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/155.jpg)
Part2:HTMLElementsandGuidance Chapter6:EmbeddedContent(ImagesandObjects) 153
(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
![Page 156: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/156.jpg)
Part2:HTMLElementsandGuidance154
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.
![Page 157: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/157.jpg)
Part2:HTMLElementsandGuidance Chapter6:EmbeddedContent(ImagesandObjects) 155
– 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.
![Page 158: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/158.jpg)
Formsdrivedatagatheringandsearching,whetherit’sforWebapplica-tions,solicitinguser-generatedcontent,sellingproducts,orconductingpolls.
Thischaptercoverstheform-relatedelementscommontoalllavorsofHTML,plusincludestheirnewattributesinHTML5,whichhelpmaketheWebaricherapplicationmedium.
Ifyou’relookingforanoverviewofforms,theformentryprovidesanexampleofacompleteformalongwithitsbehaviorandadescriptionofitscomponents.
Forms
7
![Page 159: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/159.jpg)
Part2:HTMLElementsandGuidance158
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.)
![Page 160: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/160.jpg)
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.
![Page 161: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/161.jpg)
Part2:HTMLElementsandGuidance160
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.
![Page 162: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/162.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 161
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:
![Page 163: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/163.jpg)
Part2:HTMLElementsandGuidance162
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> <!-- text input -->
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname"
maxlength="100" />
</div>
<fieldset> <!-- radio buttons -->
<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.
![Page 164: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/164.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 163
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 165: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/165.jpg)
Part2:HTMLElementsandGuidance164
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> <!-- select box -->
<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> <!-- textarea -->
<label for="comments">Comments:</label>
<textarea id="comments" name=”comments” rows="3"
cols="40"></textarea>
</div>
<div> <!-- checkbox -->
<input type="checkbox" id="subscribed"
name="subscribed" checked="checked" /> <label
for="subscribed">Yes, I'm a current subscriber</label>
</div>
<div> <!-- submit -->
<input type="submit" value="Submit My Information" />
</div>
</form>
![Page 166: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/166.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 165
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.
![Page 167: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/167.jpg)
Part2:HTMLElementsandGuidance166
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
![Page 168: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/168.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 167
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.
![Page 169: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/169.jpg)
Part2:HTMLElementsandGuidance168
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” />
![Page 170: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/170.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 169
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.
![Page 171: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/171.jpg)
Part2:HTMLElementsandGuidance170
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”.
![Page 172: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/172.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 171
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.
![Page 173: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/173.jpg)
Part2:HTMLElementsandGuidance172
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
![Page 174: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/174.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 173
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)
![Page 175: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/175.jpg)
Part2:HTMLElementsandGuidance174
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.
HTML5andtheinputElement(continued)
![Page 176: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/176.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 175
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" />
HTML5andtheinputElement(continued)
![Page 177: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/177.jpg)
Part2:HTMLElementsandGuidance176
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.
![Page 178: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/178.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 177
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.
![Page 179: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/179.jpg)
Part2:HTMLElementsandGuidance178
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">
![Page 180: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/180.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 179
. . . [Laptop options] . . .
</optgroup>
</select>
. . .
Typically,optgrouprendersbydefaultlikethis:
AttributesinDetailn disabled:Pleasesee“AttributesinDetail”fortheinputelementin
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.
![Page 181: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/181.jpg)
Part2:HTMLElementsandGuidance180
AttributesinDetailn disabled:Pleasesee“AttributesinDetail”fortheinputelementin
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
![Page 182: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/182.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 181
DescriptionUsetheselectelementtoprovideoneormorechoicesinasingle“menu.”Eachchoiceisrepresentedbyanoptionelement,whichmayeitherexistonitsownorexistaspartofanoptgroup.Pleaseseetheexamplesintheformandoptgroupelemententriesinthischapter.
AttributesinDetailn disabled:Pleasesee“AttributesinDetail”fortheinputelementin
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.
![Page 183: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/183.jpg)
Part2:HTMLElementsandGuidance182
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.
![Page 184: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/184.jpg)
Part2:HTMLElementsandGuidance Chapter7:Forms 183
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)
![Page 185: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/185.jpg)
Part2:HTMLElementsandGuidance184
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).
![Page 186: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/186.jpg)
Tabulardatacantakemanyformssuchasinancialorsurveydata,acalendarofevents,abusschedule,oratelevisionprogrammingschedule.Whateverthecasemaybe,thiskindofinformationisusuallypresentedwithoneormorecolumnorrowheadingsalongwiththedata.
Thetableelementisyourelementofchoiceintheseinstances.It—alongwithitschildelements—aredescribedinthischapter.Ifyou’relookingforacodeexampleandsummaryofthemajorityofatable’selementsandfeatures,pleaseheadtothetableentry.
Notethattablesarenotintendedtocontrolpagelayout,sincethat’sthedomainofCSS(butyoualreadyknewthat,right?).
TabularData
8
![Page 187: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/187.jpg)
Part2:HTMLElementsandGuidance186
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
![Page 188: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/188.jpg)
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.
![Page 189: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/189.jpg)
Part2:HTMLElementsandGuidance188
Example1(colgroupswithcols):
<table summary=" . . . ">
<caption> . . . </caption>
<colgroup class="quarter">
<col />
</colgroup>
<colgroup class="years">
<col span="3" />
</colgroup>
<!-- thead is here -->
<!-- the rest of the table code -->
</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] . . .
![Page 190: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/190.jpg)
Part2:HTMLElementsandGuidance Chapter8:TabularData 189
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,
![Page 191: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/191.jpg)
Part2:HTMLElementsandGuidance190
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
![Page 192: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/192.jpg)
Part2:HTMLElementsandGuidance Chapter8:TabularData 191
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> <!-- table head -->
<tr>
<th scope=”col”>Quarter</th>
<th scope=”col”>1962</th>
<th scope=”col”>1963</th>
<th scope=”col”>1964</th>
</tr>
</thead> (continuesonnextpage)
![Page 193: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/193.jpg)
Part2:HTMLElementsandGuidance192
<tfoot> <!-- table foot -->
<tr>
<th scope=”row”>TOTAL</th>
<td>$595</td>
<td>$648</td>
<td>$664</td>
</tr>
</tfoot>
<!-- Example 1 (part 2) code picks up from here -->
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
![Page 194: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/194.jpg)
Part2:HTMLElementsandGuidance Chapter8:TabularData 193
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] . . .
<!-- Example 1 (part 1) code precedes this -->
<tbody> <!-- table body -->
<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
![Page 195: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/195.jpg)
Part2:HTMLElementsandGuidance194
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.
![Page 196: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/196.jpg)
Part2:HTMLElementsandGuidance Chapter8:TabularData 195
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.
![Page 197: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/197.jpg)
Part2:HTMLElementsandGuidance196
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
![Page 198: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/198.jpg)
Part2:HTMLElementsandGuidance Chapter8:TabularData 197
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.
![Page 199: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/199.jpg)
Part2:HTMLElementsandGuidance198
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:
![Page 200: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/200.jpg)
Part2:HTMLElementsandGuidance Chapter8:TabularData 199
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
![Page 201: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/201.jpg)
Part2:HTMLElementsandGuidance200
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.
![Page 202: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/202.jpg)
Part2:HTMLElementsandGuidance Chapter8:TabularData 201
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
![Page 203: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/203.jpg)
Part2:HTMLElementsandGuidance202
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.
![Page 204: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/204.jpg)
Ontoday’sWeb,client-sidescripting—namely,JavaScript—makestheworldgo’round.Orfadeinandout.Orcompleteyoursearchtermasyou’retypingit.Ordriveaninteractivenewsmodule.Orcontrolavideoplayer.Or...yougettheidea.
Alas,showingyouhowtowriteJavaScriptoranyotherscriptinglanguageisbeyondthescopeofthisbook,butIwillshowyoutheeasypart,whichisgettingyourscriptsintoapage.
Pleasealsosee“Attributes”inChapter1foralistoftheeventsyoucanapplyandcapturewithJavaScript.
Scripting
9
![Page 205: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/205.jpg)
Part2:HTMLElementsandGuidance204
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)
![Page 206: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/206.jpg)
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.
![Page 207: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/207.jpg)
Part2:HTMLElementsandGuidance206
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
![Page 208: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/208.jpg)
Part2:HTMLElementsandGuidance Chapter9:Scripting 207
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.
![Page 209: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/209.jpg)
Part2:HTMLElementsandGuidance208
note YoucannotplaceHTMLelementswithina
scriptblock(youcancreateHTMLwithJavaScript,however).
YoucanaddJavaScripttoyourpageinthreeways:byputtingitinanexternalile,byembeddingthecodeasthecontentsofthescriptelement,orbyapplyingitinlinewithaneventattribute.I’llcovertheirsttwoways(thethirdisn’tadvised).
Inmostcases,you’llwanttohouseadistinctpieceofJavaScriptinanexternalilebothsomultiplepagescanloaditandbecauseit’seasiertomaintainyourcodeinoneileratherthaninthescriptblocksofseveralHTMLiles.Additionally,auseragentwillcachetheileafterit’sloadedtheirsttime,speedingupthepageloadofsubsequentpagesonthesamesitethatusethescript.
Example1(importexternalfile):
. . .
<body>
. . .
<!-- Load JavaScript for product carousel -->
<script src=”js/carousel.js” type=”text/javascript”>
➥ </script>
</body>
</html>
Alternatively,youcanembedtheJavaScriptinyourpage;however,asnoted,theirstapproachisusuallypreferred.
Example2(embeddedcode):
. . .
<body>
. . .
![Page 210: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/210.jpg)
Part2:HTMLElementsandGuidance Chapter9:Scripting 209
<script type=”text/javascript”>
var Foo = window.Foo || {};
Foo.bar = {
. . . // rest of code
};
</script>
</body>
</html>
Thetypeattributeisrequiredinbothcases,butsrcappliesonlytotheirst.
AsImentioned,youcanhaveseveralscriptelementsinapage,andtheycanappearinboththeheadandthebody.
Variablesandfunctionsbothembeddedinadocumentanddeinedinanexternalilecanbeavailabletoeachother.Inotherwords,eachscriptelementisnotmutuallyexclusive.Forexample,it’scommontoseeaJavaScriptlibraryloadedbyonescriptelement,followedbyanotherscriptelementthatimportsorembedscodeleveragingthatlibrary.
However,youmaynotcombineanexternalscriptcallandanembeddedscriptinthesamescriptelement.Theembeddedportionisignored.Forinstance,onlycarousel.jsexecutesinthisexample:
<script src=”js/carousel.js” type=”text/javascript”>
var Foo = window.Foo || {};
Foo.bar = {
. . . // rest of code
};
</script>
![Page 211: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/211.jpg)
Part2:HTMLElementsandGuidance210
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.
![Page 212: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/212.jpg)
Part2:HTMLElementsandGuidance Chapter9:Scripting 211
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.
![Page 213: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/213.jpg)
FrameswerefarmoreprevalentintheearlydaysoftheWeb,inpartbecausebandwidthwassopoorthatdeveloperssawabeneitinsplit-tingthescreenupintopiecesthatloadedindependentlyofoneanother.Butwithframescameusability,accessibility,andSEOshortcomings.
Nowadays,framesareconsideredarelicoftheearlydaysoftheWeb—somuchsothatHTML5doesnotincludethematall.Becauseofthis,cover-agehereofframe,frameset,andnoframesisverylight.
Themainfocusofthischapteristheiframeelement,whichisverymuchpartofHTML5,completewithsomenewattributes.
Frames
10
![Page 214: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/214.jpg)
Part2:HTMLElementsandGuidance214
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.
![Page 215: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/215.jpg)
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.
![Page 216: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/216.jpg)
Part2:HTMLElementsandGuidance216
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.
![Page 217: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/217.jpg)
Part2:HTMLElementsandGuidance Chapter10:Frames 217
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.
![Page 218: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/218.jpg)
Part2:HTMLElementsandGuidance218
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.
![Page 219: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/219.jpg)
Part2:HTMLElementsandGuidance Chapter10:Frames 219
noframesFramesfallbackcontent
Syntax <noframes></noframes>Attributes Core,I18n,Events
Description
note ThenoframeselementisobsoleteinHTML5.
Thenoframeselementprovidesfallbackcontentforauseragentthatdoesn’tsupportframes.Pleaseseehttp://www.w3.org/TR/html4/present/frames.htmlforexamples.
![Page 220: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/220.jpg)
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
![Page 221: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/221.jpg)
Chapter11: PrimaryStructureandSections. . . . . . . . . . . . . . . . . 223Chapter12: Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Chapter13: EmbeddedContent
(Images,Media,andMore) . . . . . . . . . . . . . . . . . . . . . . 263Chapter14: Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Chapter15: InteractiveElements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Part3Contents
![Page 222: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/222.jpg)
ThischapterisacounterparttoChapter2becauseitdescribesrelatedelementsuniquetoHTML5.Ifyou’rewritingX/HTMLdocuments,thenthischapterisn’trelevant.But,ifyou’rewritingHTML5,thenitcombineswithChapter2todetailalltheprimarystructuralandsectionalelementsatyourdisposal.
InX/HTML,thedivelementisyourmaindevicetocontainchunksofcontent.Asyouknow,div,althoughgreatasacontainer,hasabsolutelynosemanticmeaning.Thesevenelementsinthischapterarecontainersthatdohavemeaning.divdoesn’tgoawayinHTML5;youjustwon’tuseitasoften.
PrimaryStructureandSections
11
![Page 223: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/223.jpg)
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>
![Page 224: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/224.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 225
<h3>Video Playback</h3>
<h2>Advanced Features</h2>
</body>
Now,thesecondversion,whichusesbothheadingandsectionelements,includingonenestedsection.(Note:Thecodeindentationisunimportantanddoesn’taffecttheoutline.)
Version2:
<body>
<h1>Product User Guide</h1>
<section>
<h1>Setting it up</h1>
</section>
<section>
<h1>Basic Features</h1>
<section>
<h1>Video Playback</h1>
</section>
</section>
<section>
<h1>Advanced Features</h1>
</section>
</body>
TheHTML5Outliner(http://gsnedders.html5.org/outliner/)isafantastictoolthatpresentsavisualrepresentationofyourdocument’soutline.UsingittogenerateoutlinesforVersions1and2showsthateventhoughtheirh1–h6headinglevelsaredifferent,bothresultinthisoutline:
![Page 225: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/225.jpg)
Part3:HTML5ElementsandGuidance226
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>
<h1>Product User Guide</h1>
<section>
<h1>Setting it up</h1>
</section>
. . . [other sections] . . .
</article>
</body>
![Page 226: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/226.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 227
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.
![Page 227: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/227.jpg)
Part3:HTML5ElementsandGuidance228
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> <!-- the article’s footer, not the page’s -->
<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.
![Page 228: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/228.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 229
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.
![Page 229: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/229.jpg)
Part3:HTML5ElementsandGuidance230
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>
![Page 230: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/230.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 231
. . . [more article content] . . .
</article>
Thatsamearticlemightincludea“RelatedStories”asidecontainingalistoflinkstootheressaysaboutthecountryorsurroundingregion(Indonesia,Australia,andsoon).Alternatively,thatasidecouldbeinadifferentpagecolumninsteadofnestedinthearticle.
Now,let’sconsideranexampleofadesignportfolioorcasestudies,inwhicheachpagefocusesonasingleprojectandyouprovidelinkstotheotheronesinanadjacentcolumn(ascontrolledbyCSS,notsimplybyvirtueofarrangingthecodeasshowninExample2).
Example2(notnestedinmaincontent):
<article> <!-- main content on the page -->
<h1>. . . [name of project] . . .</h1>
<figure>. . . [project photo] . . .</figure>
<p>. . . [project write-up] . . .</p>
</article>
<!-- this aside is not nested in the 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>
![Page 231: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/231.jpg)
Part3:HTML5ElementsandGuidance232
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.
![Page 232: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/232.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 233
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] . . .
<!-- this is a page footer because body is its nearest
ancestor -->
<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>
![Page 233: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/233.jpg)
Part3:HTML5ElementsandGuidance234
Pleaseseethenavelemententryinthischapterforanexplanationofwhythelinksulisn’twrappedinanav.
ThefollowingborrowsfromExample1inthearticleelemententryinthischapter.Itdemonstratesafooterinthecontextofapagesection.Pleaseseethatentryforanexplanationoftheaddresselement’sscopehere.
Example2(asapagesectionfooter):
<body>
. . .
<article>
<h1>. . . [article header] . . .</h1>
<p>. . . [article content] . . .</p>
<footer> <!-- the article 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”> <!-- the page footer -->
. . . [copyright, terms of use, privacy policy] . . .
</footer>
</body>
Theid=”footer”(callitanythingyoulike)onthepagefooterisoptionalandisjusttodifferentiateitfromtheotherfooterforstylingcontrol.
![Page 234: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/234.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 235
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>
![Page 235: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/235.jpg)
Part3:HTML5ElementsandGuidance236
HTML5’sheaderelementistherightchoiceforreplacingthatdiv,butaheadermayalsoappearelsewhereinyourpages,asshowninExample2.But,irst,let’sreplacethatpageheaderdiv.
Example1(aspageheader):
<body>
<header><!-- add an id like “header” or “masthead” if
desired -->
<!-- site logo could go here -->
<!-- a search box form could go here -->
<!-- site’s global navigation -->
<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
![Page 236: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/236.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 237
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>
<!-- the header links point to these -->
<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)
![Page 237: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/237.jpg)
Part3:HTML5ElementsandGuidance238
. . .
</article> <!-- end parent 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>
![Page 238: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/238.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 239
</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
![Page 239: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/239.jpg)
Part3:HTML5ElementsandGuidance240
includesotherimportantlinkslike“StoreLocator.”Inmostcases,Irecom-mendputtingthosetypesoffooterlinksinanav.
Thefollowingsamplenewspageincludesfourlistsoflinks,onlytwoofwhichareconsideredmajorenoughtowarrantbeingwrappedinanav:
Example:
<body>
<header>
<!-- site logo could go here -->
<!-- site global navigation -->
<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>
<!-- not wrapped in nav -->
<ul> . . . [story links] . . . </ul>
</aside>
</article>
</div>
<aside id=”sidebar”>
<nav><!-- secondary navigation -->
![Page 240: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/240.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 241
<ul>
<li><a href=”/arts/movies/”>Movies</a></li>
<li><a href=”/arts/music/”>Music</a></li>
. . .
</ul>
</nav>
</aside>
<footer>
<!-- Ancillary links not wrapped in nav. See
Example 1 of footer entry in this chapter. -->
<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).
![Page 241: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/241.jpg)
Part3:HTML5ElementsandGuidance242
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>
<h1>Product User Guide</h1>
. . . [introductory content] . . .
<section>
<h1>Setting it up</h1>
![Page 242: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/242.jpg)
Part3:HTML5ElementsandGuidance Chapter11:PrimaryStructureandSections 243
. . . [instructions] . . .
</section>
<section> <!-- this contains two subsections -->
<h1>Basic Features</h1>
<section> <!-- nested, so it’s a subsection -->
<h1>Video Playback</h1>
. . . [instructions] . . .
</section>
<section> <!-- another subsection -->
<h1>Jumping to Chapters</h1>
. . . [instructions] . . .
</section>
</section>
. . .
</article>
Notethatyoushouldn’tnestasectionwithinanaddresselement.
![Page 243: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/243.jpg)
Thischapterfeaturestext-levelsemanticsthatareuniquetoHTML5.
Ofthese,youwillprobablyindyourselfusingthenewfigureandfigcaptionthemost,sincetheyaddressacommoncontentconvention(aigurewithacaption,surprise!)forwhichX/HTMLlacksdedicatedelements.
Thischapter’scounterpartisChapter5;togethertheydetailallthetext-levelelementsavailabletoyouwhendevelopingHTML5documentsandapplications.
Text
12
![Page 244: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/244.jpg)
Part3:HTML5ElementsandGuidance246
figcaptionCaptionforaigure
Syntax <figure> <figcaption></figcaption></figure>
Attributes HTML5Only:Global
DescriptionThefigcaptionelementrepresentsthecaptionorlegendforafigureelement’scontents.Itmightbeabriefphotodescriptionorreferencesthatbeginwith“ExhibitD”andthelike.Youcannotusefigcaptionunlessit’sinafigureelementandfigurehasothercontent.Andalthoughfigcaptionisoptional,afiguremayincludeonlyone,anditmustbeeithertheirstorlastchildelementofthefigure.
Pleaseseethefigureelementinthischapterformoredetailsandcodeexamples.
figureAigure
Syntax <figure></figure>Attributes HTML5Only:Global
DescriptionUsethefigureelementtomarkupaself-containedpieceofcontent(withanoptionalcaption)thatisreferredtobythemaincontentofyour
![Page 245: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/245.jpg)
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>
![Page 246: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/246.jpg)
Part3:HTML5ElementsandGuidance248
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.
![Page 247: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/247.jpg)
Part3:HTML5ElementsandGuidance Chapter12:Text 249
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).
![Page 248: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/248.jpg)
Part3:HTML5ElementsandGuidance250
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>
![Page 249: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/249.jpg)
Part3:HTML5ElementsandGuidance Chapter12:Text 251
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:
![Page 250: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/250.jpg)
Part3:HTML5ElementsandGuidance252
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.
![Page 251: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/251.jpg)
Part3:HTML5ElementsandGuidance Chapter12:Text 253
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.
![Page 252: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/252.jpg)
Part3:HTML5ElementsandGuidance254
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.
![Page 253: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/253.jpg)
Part3:HTML5ElementsandGuidance Chapter12:Text 255
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.
![Page 254: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/254.jpg)
Part3:HTML5ElementsandGuidance256
rpForrubyfallbackparentheses
Syntax <rp>(</rp>and<rp>)</rp>
Attributes HTML5Only:Global
DescriptionUsetherpelementtodisplayparenthesesaroundrubytext(thertelement)inuseragentsthatdon’tsupportrubyannotations.Useragentsthatdosupportrubyignoretherp,sotheydon’tdisplaytheparentheses.
Pleaseseetherubyelementinthischapterforanexample.
rtRubytextcomponent
Syntax <ruby> <rt></rt></ruby>
Attributes HTML5Only:Global
DescriptionThertelementcontainstherubytextusedinarubyannotation.Thecontentofanrtrepresentstheannotationoftherubyelementcontentthatimmediatelyprecedesit(notincludinganrpelement).
Pleaseseetherubyelementinthischapterforanexample.
![Page 255: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/255.jpg)
Part3:HTML5ElementsandGuidance Chapter12:Text 257
rubyArubyannotation
Syntax <ruby> <rp>(</rp><rt></rt><rp>)</rp></ruby>
Attributes HTML5Only:Global
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>
![Page 256: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/256.jpg)
Part3:HTML5ElementsandGuidance258
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.
![Page 257: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/257.jpg)
Part3:HTML5ElementsandGuidance Chapter12:Text 259
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.
![Page 258: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/258.jpg)
Part3:HTML5ElementsandGuidance260
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>
![Page 259: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/259.jpg)
Part3:HTML5ElementsandGuidance Chapter12:Text 261
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.
![Page 260: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/260.jpg)
Part3:HTML5ElementsandGuidance262
wbrAlinebreakopportunity
Syntax <wbr>or<wbr/>
Attributes HTML5Only:Global
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>
![Page 261: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/261.jpg)
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
![Page 262: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/262.jpg)
Part3:HTML5ElementsandGuidance264
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”>
<!-- The HTML in here is for non-supporting user agents -->
<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.
![Page 263: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/263.jpg)
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.
![Page 264: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/264.jpg)
Part3:HTML5ElementsandGuidance266
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”>
<!-- fallback content for browsers that don’t support
canvas -->
</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.
![Page 265: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/265.jpg)
Part3:HTML5ElementsandGuidance Chapter13:EmbeddedContent(Images,Media,andMore) 267
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.
![Page 266: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/266.jpg)
Part3:HTML5ElementsandGuidance268
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&.
![Page 267: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/267.jpg)
Part3:HTML5ElementsandGuidance Chapter13:EmbeddedContent(Images,Media,andMore) 269
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
![Page 268: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/268.jpg)
Part3:HTML5ElementsandGuidance270
elementallowsyoutospecifymultiplemediasourceURLsforaudioandvideo,soiftheuseragentdoesn’tsupporttheirstinthelist,itlookstothesecond,thenthethird,andsoon,untilitindsoneitdoessupport.
Example:
<audio controls="controls" autoplay=”autoplay”>
<!-- UA looks at this first -->
<source src="laughter.oga" type="audio/ogg;
➥ codecs=vorbis" />
<!-- then this, etc. -->
<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
![Page 269: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/269.jpg)
Part3:HTML5ElementsandGuidance Chapter13:EmbeddedContent(Images,Media,andMore) 271
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”>
<!-- The HTML in here is for non-supporting user
agents -->
</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).
![Page 270: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/270.jpg)
Part3:HTML5ElementsandGuidance272
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
![Page 271: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/271.jpg)
Part3:HTML5ElementsandGuidance Chapter13:EmbeddedContent(Images,Media,andMore) 273
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">
<!-- option 1: OGG Theora video and Vorbis audio -->
<source src="your-video.ogv" type='video/ogg;
➥ codecs="theora, vorbis"' />
<!-- option 2: H.264 -->
<source src="your-video.mp4" type='video/mp4;
➥ codecs="avc1.42E01E, mp4a.40.2"' />
<!-- The HTML below here is for non-supporting user
agents, for example, you could embed a Flash video
player. -->
. . .
</video>
![Page 272: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/272.jpg)
Part3:HTML5ElementsandGuidance274
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
![Page 273: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/273.jpg)
Part3:HTML5ElementsandGuidance Chapter13:EmbeddedContent(Images,Media,andMore) 275
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;}.
![Page 274: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/274.jpg)
FormsmakeabigleapinHTML5aspartofitsfocusonmakingWebapplicationsricherandtheirdevelopmenteasier.
Amongthemostcompellingadditionsaretheinputtypesforcoloranddatepickers,numbers,arangeslider,search,emailandtelephonenumberields,andmore.Plus,thereareattributesformarkingieldsasrequired,orspecifyingaregularexpressionthatperformspatternmatch-ingwithoutJavaScript.Pleaseseethe“HTML5andtheinputElement”boxinChapter7’sinputentryformoreinformation.
HTML5alsoincludesnewform-relatedelements,whichthischaptercovers.
(Note:PleasealsoseethemeterandprogresselementsinChapter12sinceyoumayindthemvaluabletousewithaform.)
Forms
14
![Page 275: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/275.jpg)
Part3:HTML5ElementsandGuidance278
datalistAlistofpredeinedoptions
Syntax <datalist> <option></option> ...</datalist>
Attributes HTML5Only:Global
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.)
![Page 276: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/276.jpg)
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">
<!-- the options are not ignored, just the select -->
<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.
![Page 277: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/277.jpg)
Part3:HTML5ElementsandGuidance280
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:
![Page 278: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/278.jpg)
Part3:HTML5ElementsandGuidance Chapter14:Forms 281
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.
![Page 279: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/279.jpg)
Part3:HTML5ElementsandGuidance282
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.
![Page 280: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/280.jpg)
Part3:HTML5ElementsandGuidance Chapter14:Forms 283
n form="formid":Bydefault,anoutputisassociatedwithitsnearestancestorformelement(thatis,theformthatcontainsit).Setthisattri-butetotheidofadifferentforminthepagetooverridethisbehavior.
n name="outputname":Thisassignsanametotheoutputforthepurposesofprocessingtheform.
![Page 281: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/281.jpg)
HTML5includestwonewinteractiveelements,detailsandmenu,andtheirsupportingelements,summaryandcommand,respectively.TheysupportoneofHTML5’sgoalsofmakingWebapplicationdevelopmenteasier,richer,andmoreaccessiblebybuildingfeaturesintonativeHTMLelements.
Thischapterexplainshowtoleveragethemtocreateapplication-styletoolbarsandcontextualmenus(inthecaseofmenu),aswellasexpand-ableandcollapsibleinformationandformcontrolmodules(inthecaseofdetails).Pleasebeaware,though,thatmuchofthenativefunctionalitythattheseelementspromisedoesn’texistinanymajorbrowseratthetimeofthiswriting.ThatisexpectedtochangeasbrowserscontinuetoincorporatemoreandmoreofHTML5’sfeatures.LiketheotherHTML5
InteractiveElements
15
![Page 282: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/282.jpg)
Part3:HTML5ElementsandGuidance286
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.
![Page 283: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/283.jpg)
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.
![Page 284: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/284.jpg)
Part3:HTML5ElementsandGuidance288
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.
![Page 285: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/285.jpg)
Part3:HTML5ElementsandGuidance Chapter15:InteractiveElements 289
Thesefollowingexamplesshowacouplewaysyoumightusedetails.Theirstisafootball(American-style)gametracker.Thesummaryprovidesasnapshotoftheaction,andtheusercanlearnmorebyopeningthedetailselement.Itcouldevenhaveavideoelementinit.Thesecondexampleisalistofemoticonstheusercouldtoggleopeninachatappli-cationandthencloseafterselectingone.
Examples:
<details>
<summary>Good Guys 20, Bad Guys 17, fourth quarter
➥ </summary>
<!-- Code showing score by quarter and
other statistics would go here. -->
</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.
![Page 286: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/286.jpg)
Part3:HTML5ElementsandGuidance290
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.
![Page 287: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/287.jpg)
Part3:HTML5ElementsandGuidance Chapter15:InteractiveElements 291
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).
![Page 288: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/288.jpg)
Part3:HTML5ElementsandGuidance292
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.
![Page 289: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/289.jpg)
Part3:HTML5ElementsandGuidance Chapter15:InteractiveElements 293
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.
![Page 290: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/290.jpg)
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(*).
![Page 291: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/291.jpg)
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
![Page 292: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/292.jpg)
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
![Page 293: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/293.jpg)
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
![Page 294: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/294.jpg)
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
![Page 295: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/295.jpg)
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
![Page 296: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/296.jpg)
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
![Page 297: Mass media in Nigerian democracy](https://reader036.vdocuments.mx/reader036/viewer/2022081602/613c5f98f237e1331c51310b/html5/thumbnails/297.jpg)
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