Post on 24-Aug-2020
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
HTML5
Thereare3mainfeatures:
• ProblemswithXHTML(browserrendering),XHTMLnevergoestolight.• Errorhandling.Forthefirsttime,aspecificationalsodefineswhat
browsersshoulddowhentheyaredealingwithbadlyformeddocuments.• Whereaspreviousmarkupspecificationswerewrittenforauthors,
HTML5iswrittenforauthorsandimplementers
Here,wearegoingtomakeareviewovertheHTML5keyconcepts:
DocTYpeHTML4.0
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
XHTML 1.0
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
HTML5
<!DOCTYPE HTML>
Content‐typeheader
HTML4.01
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
HTML5
<meta charset=”UTF-8”>
Typeattributeintagsas<script><link>
HTML4.01
<script type=”text/javascript” src=”file.js”></script>
<link rel=”stylesheet” type=”text/css” href=”file.css”>
HTML5
<script src=”file.js”></script>
<link rel=”stylesheet” href=”file.css”>
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
Syntax:Markingitupyourway
WithHTML5,anythinggoes.Uppercase,lowercase,quoted,unquoted,self‐closingornot;it’sentirelyuptoyou.
Wedon’tusethatkindoflanguage
TherearenodeprecatedelementsorattributesinHTML5.Butthereareplentyofobsoleteelementsandattributes.(exframe, frameset, noframes, acronym, font, big, center, strike, bicolor ,cellspacing,cellpadding, valign).Usefont‐sizeandtext‐aligninCSS.
Turnandfacethestrange(ch‐ch‐changes)
Bigelementisobsolete,smallelementisn’t.
b=renderthisinbold,nowis‘tobestylisticallyOffsetfromthenormalprosewithoutconveyinganyextraimportant.”
i=’italice’,nowis‘thetextisinanalternatevoiceormood’
Foremphasis,usetheemelement.
Outofcite
Theciteelementhasbeenredefined.Itpreviouslymeant‘areferencetoothersources’,nowis‘thetitleofawork’
Theaelement
InHTML5,youcanwrapmultipleelementsinasingleelement:
<a href=”/about”>
<h2> About me </h2>
<p>Find out what makes me tick.</p>
</a>
Theonlycaveatisthatyoucan’tnestanaelementwithinanotheraelement
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
Shinynewtoys:JavaScriptAPIs
Undo‐managerthatallowsthebrowsertokeeptrackofchangestoadocument.There’sasectiononcreatingOfflineWebApplicationsusingacachemanifest.Draganddropisdescribedinretail.
Canvas(createdbyAppleforSafari)
TheRichmediaelementsinHTML5arenativetothebrowser.Thiselementisanenvironmentforcreatingdynamicimages
<canvas id=”my-first-canvas” width=”360” height=”240”></canvas>
Fornow,theonlycontextistwo‐dimensional:
Var canvas=document.getElementById(‘my-first-canvas’);
Var context=canvas.getContext(‘2d’);
API:http://bkaprt.com/html5/1
Stokecolorisred:context.strokeStyle=’#990000’;
Redoutline:strokeRect(Leith,top,width,height)
Drawarectangle:context.strokeRect(20,30,100,50)
Therealpowerofcanvasisthatitscontentscanbeupdatedatanymoment,drawingnewcontentbasedduetotheactionsoftheuser.Thisabilitytorespondtouser‐triggeredeventsmakesitpossibletocreateToolsandgamesthatwouldhavepreviouslyrequiredaplug‐intechnologysuchasFlash.
https://bespin.mozilla.com
Acodeeditorthathandlestextwithinthecanvaselement.However,itisn’treallytextanymore;it’saseriesofshapesthatlookliketext.
EverydocumentinthewebcanbedescribedwithaDocumentObjectModel.ThecanvaselementhasnoDOM.Thecontentdrawnwithincanvascannotberepresentedasatreeofnodes.
Noaccessibility,someSolutionshttp://bkaprt.com/html5/2
Insteadofusingcanvastocreatecontent,useittorecycleexistingcontent.
http://bkaprt.com/html5/3
(jQueryplug‐in)
SVGisanXMLformatthatcandescribethesamekindofshapesascanvas.
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
http://bkapart.com/html5/4
(supporttoInternetExplorer)
Audio
EmbeddinganaudiofileinanHTML5documentissimple:
Automatic
<audio src=”witchitalineman.mp3” autoplay loop></audio>
or
Browser’snativecontrols
<audio src=”witchitalineman.mp3” controls></audio>
orAudioAPI
<audio id=”player” src=”wichitalineman.mp3”>
</audio>
<div>
<button onclick=”document.getElementById(‘player’).play()”> Play </button>
<button onclick=”document.getElementById(‘player’).pause()”> Pause </button>
<button onclick=”document.getElementById(‘player’).volume+=0.1”> Volume Up</button>
<button onclick=”document.getElementById(‘player’).volume-=0.1”> Volume Down</button>
</div>
Buffering
AutobufferPreload(none,auto,metadata)
<audio src=”wichitalineman.mp3” controls preload=”none”></audio>
Fallingback<audio controls>
<source src=”witchitalineman.ogg” type=”audio/ogg”>
<source src=”witchitalineman.mp3” type=”audio/mpeg”>
<object type=”application/x-shockwave-flash” data=”player.swf?soundFile=witchitalineman.mp3”>
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
<param name=”movie” value=”player.swf?soundFile=witchitalineman.mp3”>
<a href=”witchitalineman.mp3”>Download the song</a>
</object>
</audio>
Commentsareoutofaudiotag
Video
Thevideoelementworksjustliketheaudioelement.Ithastheoptionalautoplay,loop,andpreloadattributes.Youcanspecifythelocationofthevideofilebyeitherusingthesrcattributeonthevideoelementorbyusingsourceelementsnestedwithintheopeningandclosing<video> tags.Youcanletthebrowsertakecareofprovidingauserinterfacewiththecontrolsattributeoryoucanscriptyourowncontrols
Themaindifferencebetweenaudioandvideocontentisthatmovies,bytheirnature,willtakeupmoreroomonthescreen,soyou’llprobablywanttoprovidedimensions
<video src=”movie.mp4” controls width=”360” height=”240”></video>
Itispossibletochoosearepresentativeimageforthevideoandtellthebrowsertodisplayitusingtheposterattribute
<video src=”movie.mp4” controls width=”360” height=”240” poster=”placeholder.jp”></video>
<video controls width=”360” height=”240” poster=”placeholder.jp”>>
<source src=”movie.ogv” type=”video/ogv”>
<source src=”movie.mp4” type=”audio/mp4”>
<object type=”application/x-shockwave-flash” width=”360” height=”240 data=”player.swf?file=movie.mp4”>
<param name=”movie” value=”player.swf?file=movie.mp4”>
<a href=”movie.mp4”>Download the movie</a>
</object>
</video>
Example:http://youtube.com/HTML5
Thevideoelementisnotonlyscriptable,itisalsostyleable
Webforms2.0
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
Placeholder
1. Whenaformfieldhasnovalue,insertsomeplaceholdertextintoit2. Whentheuserfocusesonthatfield,removetheplaceholdertext3. Iftheuserleavesthefieldanditstillhasnovalue,reinstatethe
placeholdertext.
ItisdoneusingCSSandJavascriptandthetextofplaceholderisusuallydisplayedinalightershadethananactualformfieldvalue
HTML5
<label for=”hobbies”> Your hobbies </label>
<input id=”hobbies” name=”hobbies” type=”text” placeholder=”Owl stretching”>
Autofocus
Whenthedocumentloads,automaticallyfocusoneparticularformfield.
HTML5
<label for=”status”>What’s happening?</label>
<input id=”status” name=”status” type=”text” autofocus>
Currently,theonlywaytodisablescriptedauto‐focusingistodisableJavaScriptcompletely.Theautofocusattributedoesn’tonlyworkontheinputelement;itcanbeusedonanykindofformfiled,suchastextareaorselect,butitcanonlybeusedonceperdocument.
Aswiththeplaceholderattribute,youcantestforautofocussupportandfallbacktoascriptedsolution:
if (!elementSupportsAttribute(‘input’,’autofocus’)){document.getElementById(‘status’).focus();
}
Required
OneofthemostcommonusesofJavaScriptisclient‐sideformvalidation.Onceagain,HTML5ismovingthissolutionformscriptingtomarkup.JustaddtheBooleanattributerequired.
HTML5
<label for=”pass”> Your password </label>
<input id=”pass” name=”pass” type=”password” required>
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
Theoretically,thisallowsbrowserstopreventformsubmissionsifrequiredfieldshaven’tbeenfilledout.Eventhoughbrowsersaren’tJointthatyet,youcanstillmakeuseofthisattributeinyourJavaScriptformvalidation.Insteadofkeepingalistofalltherequiredfieldsinyourscriptoraddingclass=”required”toyourmarkup,youcannowcheckfortheexistenceoftherequiredattribute.
Autocomplete
Idon’tmindifmybrowserremembersmycontactdetails,butIprobablydon’twantittorememberthelog‐informybankaccount,justincasemycomputerisstolen.
HTML5allowsyoutodisableauto‐completiononaper‐formorper‐fieldbasis.Thisattributeisn’tBoolean,yetitcanonlytaketwopossiblevalues:”on”or“off”:
<form action=”/selfdestruct” autocomplete=”off”>
Bydefault,browserswillassumeanautocompletevalueof“on”allowingthemtopre‐filltheform
Youcanhaveyourauto‐completioncakeandeatit.Ifyouwanttoallowpre‐fillingforaformbutdisablepre‐fillingforjustoneortwofieldsinthatform,youcandoso:
<input type=”text” name=”onetimetoken” autocomplete=”off”>
Thereisn’tanyJavaScriptfallbackforbrowsersthatdon’tsupportthisattribute.Inthiscase,thenewHTML5attributeisaugmentinganexistingbrowserbehaviorratherthanreplacingascriptedsolution
Theabilitytodisableauto‐completioninbrowsersmightseemlikeastrangeadditiontotheHTML5specification.
Datalist
Thenewdatalistelementallowsyoutocrossbreedaregularinputelementwithaselectelement.Usingthelistattribute,youcanassociatealistofoptionswithaninputfield
<label for=”homeworld”> Your home planet </label>
<input type=”text” name=”homeworld” id=”homeworld” list=”planets”>
<datalist id=”planets”>
<option value=”Mercury”>
<option value=”Venus”>
<option value=”Earth”>
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
<option value=”Mars”>
<option value=”Jupiter”>
<option value=”Saturn”>
<option value=”Uranus”>
<option value=”Neptune”>
</datalist>
Thisallowsuserstoselectanoptionfromthelistprovidedortotypeinavaluethatisn’tinthelistatall.Thisisveryhandyforsituationsthatwouldnormallyrequireanextraformfieldlabelled,“If‘other’,pleasespecify…”
Ifabrowserdoesn’tsupportdatalist,thentheformfieldbehavesasanormalinput
INPUTTYPES
SearchingTheonlydifferencebetween‘text’and‘search’isthatabrowsermightdisplayasearchinputdifferentlytobemoreconsistentwiththestylingofsearchfieldsintheoperatingsystem.
ContactdetailsTherearethreenewtypevaluesforspecifickindsofcontactdetails:emailaddresses,websites,andtelephonenumbers.MobileSafarishowsadifferenton‐screenkeyboarddependingonthevalueofthetypeattribute.
SlidersManyJavaScriptlibrariesofferpre‐builtwidgetsthatyoucanuseinyourwebapplications.Theyworkfine‐aslongasJavaScriptisenable
InHTML5thankstotype=”range”,browserscannowofferanativecontrol.
<label for=”amount”> How much? </label>
<input id=”amount” name=”amount” type=”range”>
TestingTestingfornativesupportofinputtypesrequiresasimilartricktothetestforattributesupport.Onceagain,youwillneedtocreatea“phantom”inputelementinmemory.Then,setthetypeattributetothevalueyouwanttotest.Whenyouquerythevalueofthetypeproperty,ifyougetbackavalueof“text”,thenyou’llknowthatthebrowserdoesn’tsupportthevaluethatyouset.
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
AnativeinputcontrolwillcertainlyloadfasterthanascriptedsolutionthatneedstowaituntiltheDOMhasfinishedloading.Anativecontrolwillalsousuallybemoreaccessiblethanascriptedcontrol,althoughSafari’srangecontrolcurrentlyisn’tkeyboard‐accessible.
function inputSupportsType(test){
var input=document.createElement(‘input’);
input.setAttribute(‘type’,test);
if(input.type==’text’){
return false;
} else {
return true;
}
}
YoucanthenusethisfunctiontoensurethataJavaScriptwidgetisonlyprovidedtobrowsersthatdon’tnativelysupportaparticularinputtype:
if(!inputSupportsType(‘range’)){
// JavaScript fallback goes here
}
SpinnersAbrowser‐nativerangecontroldoesn’texposetheunderlyingvaluetotheuser.Instead,theLumberistranslatedintothegraphicalrepresentationofasliderwidget.That’sfineforcertainkidsofdata.Otherkindsofdataworkbestwhentheusercanseeandchoosethenumericalvalue.That’swheretype=”number”comesin:
<label for=”amount”> How much? </label>
<input type=”amount” name=”amount” type=”number” min=”5” max=”20”>
Thenumberinputtypeisahybridoftextandrange.Itallowsuserstoentervaluesdirectly,likeatextfield,butitalsoallowsbrowserstoensurethatonlynumericalvaluesareentered,likearangecontrol.
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
DatesandtimesOneofthemostpopularJavaScriptwidgetsisthecalendarpicker.Youknowthedrill:you’rebookingaflightorcreatinganeventandyouneedtochooseadate.Uppopsalittlecalendarforyoutochooseadateform.
Thesecalendarwidgetsalldothesamething,butyou’llfindthatthey’reimplementedslightlydifferentlyoneachsite.Anativecalendarwidgetwouldsmoothawaytheinconsistenciesandreducecognitiveloadduringthedate‐pickingprocess.
HTML5introducesaraftofinputtypesspecificallyfordatesandtimes:
Dateisforayear,month,andaday
Datetimeisforayear,month,andadayincombinationwithhours,minutes,andsecondsandtimezoneinformation
Datetime‐localisthesamebutwithoutthetimezoneinformation
Timeisforhours,minutes,andseconds
Monthisforayearandamonthbutwithoutaday
AlloftheseinputtypeswillrecordtimestampswithsomesubsetofthestandardizedformatYYYY‐MM‐DDThh:mm:ss.Z(Yisyear,Mismonth,Disday,hishour,misminute,sissecond,andZistimezone)
Thereisnoyearinputtype,althoughthereisaweekinputtypethattakesanumberbetween1and53incombinationwithayear.
Makesuretocheckfornativesupportfirst:
if(!inputSupportsType(‘date’)){
// JavaScript fallback goes here }
ColorpickersPerhapsthemostambitiouswidgetreplacementinHTML5isthecolorinputtype.Thisacceptsvaluesinthefamiliarhexadecimalformat:#000000forblack,#FFFFFFforwhite.
<label for=”bgcolor”> Background color </label>
<input type=”bgcolor” name=”bgcolor” type=”color”>
Theplanisforbrowserstoimplementnativecolorpickersliketheonesinjustabouteveryotherapplicationonyourcomputer.Sofar,nobrowsershavedonethisbutwhentheydo,itwillbe,like,totallyawesome.
RollingyourownThegoodnewsisthatyoucanusethepatternattributetospecifyexactlywhatkindofvalueisexpected.Thebadnewsisthatyouhavetousearegularexpression:
<label for=”zip”> US Zip code </label>
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
<input id=”zip” name=”zip” pattern=[\d]{5}(-[\d]{4}}”>
Mostofthetime,you’llneverneedtousethepatternattribute.
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
HTML5Semantics
ExtensibilityHTMLprovidesahandyescapeclausethatallowswebdesignerstoaddmoresemanticvaluetoelements:theclassattribute.Thisattributeallowsustolabelspecificinstancesofanelementasbeingaspecialclassortypeofthatelement.Thefactthatbrowsersdon’tunderstandthevocabularyweuseinourclassattributesdoesn’taffecttherenderingofourdocuments.
If,atthispoint,you’rethinking:”Waitaminute,aren’tclassesforCSS?”thenyou’rehalfright.TheCSSclassselectorisoneexampleofatechnologythatmakesuseoftheclassattributebutitisn’ttheonlyreasonforusingclasses.ClassescanalsobeusedinDOMScripting.Theycanevenbeusedbybrowsersiftheclassnamesfollowanagreedconvention,asisthecasewithmicroformats.
MicroformatsMicroformatsareasetofconventionsthatareagreeduponbyacommunity.TheseformatsusetheclassattributetoplugsomeofthemoreglaringholesinHTML:hCardforcontactdetails,hCalendarforevents,hAtomfornewsstories.Becausethereisacommunityconsensusonwhatclassnamestouse,therearenowparsersandbrowserextensionsthatworkwiththosespecificpatterns.
RDFaallowsauthorstoembedcustomvocabularieswithinHTMLdocuments.ButunlikemicroformatsRDFausesnamespacestoallowaninfinitevarietyofformats.Sowhereamicroformatmightusemarkupsuchas<h1 class=”summary”>, RDFawoulduse<h1 property=”myformat:summary>
ThereisnodoubtthatRDFaispotentiallyverypowerful,butitsexpressivenesscomesataprice.Namespacesintroduceanextralayerofcomplexitythatdoesn’tsitwellwiththerelativelysimplenatureofHTML.
Ratherthaninfiniteextensibility,that’sapowerfulargumentforalimitedvocabularybasedoncommunityconsensus.
NEWELEMENTSHTML5introducesahandfulonnewinlineelements:
markWhenbrowsingalistofsearchresults,you’lloftenseethesearchtermhighlightedwithineachresult.Youcouldmarkupeachinstanceofthesearchtermwithaspanelement,butspanisasemanticallymeaninglesscrutch,goodforlittlemorethanhangingclassesoffforstyling.
Youcoulduseemorstrongbutthatwouldn’tbesemanticallyaccurate;youdon’twanttoplaceanyimportanceonthesearchterm,yousimplywantittobehighlightedsomehow.
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
Enterthemarkelement:
<h1> Search results for ‘unicorn’ </h1>
<ol>
<li><a href=http://clearleft.com/>
Riding the UX <mark>unicorni</mark> across the rainbow of the web.
</a></li>
</ol>
Themarkelementdoesn’tattachanyimportantetothecontentwithinit,otherthattoshowthatit’scurrentlyofinterest.Asthespecificationsays,markdenotes“arunoftextinonedocumentmarkedorhighlihtedforreferentepurposes,duetoitsrelevanteinanothercontext.”
timehCalendarisoneofthemostpopularmicroformatsaswehaveseeninpreviouslines.Itdescribesdatesandtimesinamachine‐readableway.Humansliketodescribedatesas“May25th”or“nextWednesday”butparsersexpectanicelyformattedISOdate:YYYY‐MM‐DDThh:mm:ss
Themicroformatscommunitycameupwithsomecleversolutionstothisproblem,suchasusingtheabbrelement:
<abbr class=”dstart” title=”1992-01-12”>
January 12th, 1992
</abbr>
However,thereareotheroptions:
<time class=”dstart” datetime=”1992-01-12”>
January 12th, 1992
</time>
Thetimeelementcanbeusedfordates,times,orcombinationsofboth:
<time datetime=”17:00”>5pm</time>
<time datetime=”2010-04-07”>April 7th</time>
<time datetime=”2010-04-07T17:00”>5pm on April 7th</time>
Youdon’thavetoputthedatetimevalueinsidethedatetimeattribute–butifyoudon’t,thenyoumustexposethevaluetotheenduser.
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
meter
Themeterelementcanbeusedtomarkupmeasurements,providedthatthosemeasurementsarepartofascalewithminimumandmaximumvalues
<meter> 9 out of 10 cats </meter>
Youdon’thavetoexposethemaximumvalueifyoudon’twantto.Youcanusethemaxattributeinstead:
<meter max=”10”> 9 out of 10 cats </meter>
Thereisacorrespondingminattribute.Youalsogethigh,lowandoptimumattributestoplaywith.Ifyouwant,youcanevenhidethemeasurementitselfinsideavalueattribute.
<meter low=”-273” high=”100” min=”12” max=”30” optimum=”21” value=”25”> It’s quite warm for this time of year </meter>
progress
Itallowsyoutomarkupavaluethatisintheprocessofchanging:
Your profile is <progress> 60% </progress> complete
Itallowsmin,max,andvalueattributes,itismostusefulwhenitusedincombinationwithDOMScripting.YoucanuseJavaScripttodynamicallyupdatethevalue,allowingthebrowsertocomunícatethatchangetotheuser‐veryhandyforAjaxfileuploads
STRUCTURE
Backin2005,Googledidsomeresearchtofindoutwhatkindofstructurethewebwas(seehttp://code.google.com/intl/es‐ES/webstats/).
Aparserlookedatoverabillionwebpagesandtabulatedthemostcommonclassnames.Theresultswereunsurprising.Classnamessuchas“header”,“footer”,and“nav”wereprevalent.TheseemergentsemanticsmapnicelytosomeofthenewstructuralelementsintroducedinHTML5.
section
Thesectionelementisusedforgroupingtogetherthematically‐relatedcontent.Thatsoundsalotlikethedivelement,whichisoftenusedasagenericcontentcontainer.Thedifferenceisthatdivhasnosemanticmeaning;itdoesn’ttellyouanythingaboutthecontentwithin.Thesectionelement,ontheotherhand,isusedexplicitlyforgroupingrelatedcontent.Youmightbeabletoreplacesomeofyourdivelementswithsectionelements,butremembertoalwaysaskyourself,“Isallofthecontentrelated?”
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
<section>
<h1>DOM Scripting</h1>
<p>The book is aimed at designers rather than programmers </p>
<p>By Jeremy Keith>/p>
</section>
header
HTML5specdescribesitasacontainerfor“agroupofintroductoryornavigationalaids”.InHTML5,youcanusethiselementwithinasectionelement.Infact,thespecificationdescribessectionelementas“athematicgroupingofcontent,typicallywithaheading”
<section>
<header>
<h1>DOM Scripting</h1>
</header>
<p>The book is aimed at designers rather than programmers </p>
<p>By Jeremy Keith>/p>
</section>
footer
Whereasweareusedtohavingonefooterforanentiredocument,HTML5allowsustoalsohavefooterswithinsections.
<section>
<header>
<h1>DOM Scripting</h1>
</header>
<p>The book is aimed at designers rather than programmers </p>
<footer>
<p>By Jeremy Keith>/p>
</footer>
</section>
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
aside
Thiselementmatchestheconceptofmasthead,theasideelementmatchestheconceptofasidebar.Asintheheaderelement,it’sthecontentthatmatters,nottheposition.
Theasideelementshouldbeusedfortangentiallyrelatedcontent.Ifyouhaveachunkofcontentthatyouconsidertobeseparatefromthemaincontent,thentheasideelementisprobablytherightcontainerforit.
Pullquotesareagoodexampleoftangentiallyrelatedcontent;they’renicetohave,butyoucanremovethemwithoutaffectingthecomprehensionofthemaincontent.
Remember,justbecauseyourvisualdesigncallsforsomecontenttoappearinasidebardoesn’tnecessarilymeanthatasideisthecorrectcontainingelement.It’squitecommonforexample,toplaceanauthorbioinasidebar.Thatkindofdataisbestsuitedtothefooterelement
nav
Thenavelementdoesexactlywhatyouthinkitdoes.Itcontainsnavigationinformation,usuallyalistoflinks.Itisintendedformajornavigationinformation.Justbecauseagroupoflinksaregroupedtogetherinalistisn’tenoughreasontousethiselement.
article
It’sanotherspecializedkindofsection.Useitforself‐containedrelatedcontent.Nowthetrickypartisdecidingwhatconstitutes“self‐contained”.Itisspecificallydesignedforsyndication.
Ifyouuseatimeelementwithinanarticle,youcanaddanoptionalpubdateBooleanattributetoindicatethatitcontainsthedateofpublication:
<article>
<section>
<header>
<h1>DOM Scripting</h1>
</header>
<p>The book is aimed at designers rather than programmers </p>
<footer>
<p>By Jeremy Keith>/p>
</footer>
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
</section>
</article>
Itisusefulforblogposts,newsstories,comments,reviews,andforumposts.ItcoversexactlythesameusecasesasthehAtommicroformat.Infact,itshouldbeusedforself‐containedwidgets:stocktickers,calculators,clocks,weatherwidgets…
CONTENTMODELS
Previousflavorsofmarkupdividedelementsintotwocategories:inlineandblock.InlineelementsinHTML5haveacontentmodelof“text‐levelsemantics”.Manyblocklevelelementsnowfallunderthebannerof“groupingcontent”:paragraphs,listitems,divs,andsoon.Formshavetheirownseparatecontentmodel.Images,audio,video,andcanvasareall“embeddedcontent”.Thenewstructuralelementsintroduceacompletelynewcontentmodelcalled“sectioningcontent”.
Sectioningcontent
It’spossibletocreateanoutlineofanHTMLdocumentusingtheheadingelements,h1toh6.Takealookatthismarkup,forexample:
<h1>An Event Apart</h1>
<h2>Cities</h2>
<p>Join us in these cities</p>
<h3>Seattle</h3>
<p>Follow the yellow brick road to the emerald city</p>
<h3>Boston</h3>
<p>Beautiful view</p>
<h3>Minneapolis</h3>
<p>It’s so <em>nice</em>.</p>
<small>Accommodation not provided</small>
Thatgivesustheoutline:
• AnEventAparto Cities
Seattle Boston Minneapolis
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
Lookatthefinalsmallelement.Thatshouldbeassociatedwiththeentiredocument.Butabrowserhasnowayofknowingthat.There’snowayofknowingthatthesmallelementshouldn’tfallundertheheading“Minneapolis”
ThenewsectioningcontentinHTML5allowsyoutoexplicitlydemarcatethestartandtheendofrelatedcontent:
<h1>An Event Apart</h1>
<section>
<h2>Cities</h2>
<p>Join us in these cities</p>
<h3>Seattle</h3>
<p>Follow the yellow brick road to the emerald city</p>
<h3>Boston</h3>
<p>Beautiful view</p>
<h3>Minneapolis</h3>
<p>It’s so <em>nice</em>.</p>
</section>
<small>Accommodation not provided</small>
Nowit’sclearthatthesmallelementfallsundertheheading“AnEvenApart”ratherthan“Minneapolis”.Infact,youcandefineaheaderh1ineachsection(outlinealgorithm)
Whenyouuseaheadingelementbutyoudon’twantitscontentstoappearinthedocumentoutline,youwillusehgroupelement,thefirstheadingdoesn’tnecessarilyhavetobeanh1:
<hgroup>
<h3>DOM Scripting</h3>
<h4>Wed design with JavaScript and DOM</h4>
</hgroup>
Sectioningroots
Someelementsareinvisibletogenerateoutline.Inotherwords,itdoesn’tmatterhowmanyheadingsyouusewithintheseelements,theywon’tappearinthedocument’soutline.
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
Theblockquote,fieldset,andtdelementsareallimmunetotheoutlinealgorithm.Theseelementsarecalled“sectioningroots”‐nottobeconfusedwithsectioningcontent.
Portability
Becauseeachpieceofsectioningcontentgeneratesitsownoutline,youcannowgetfarmoreheadinglevelsthansimplyh1toh6.Thereisnolimittohowdeepyourheadinglevelscango.Moreimportantly,youcanstarttothinkaboutyourcontentinatrulymodularway.
SupposeIhaveablogpostentitled“Cheesesandwich”.BeforeHTML5,Iwouldneedtoknowthecontextoftheblogpostinordertodecidewhichheadingleveltouseforthetitleofthepost.Ifthepostisonthefrontpage,thenitappearsafteranh1elementcontainingthetitleofmyblog:
<h1>My awesome blog</h1>
<h2><a href=”cheese.html”>Cheese sandwich</a></h2>
<p>My cat ate a cheese sandwich</p>
ButifI’mpublishingtheblogpostonitsownpage,thenIwantthetitleoftheblogposttobealeveloneheading:
<h1>Cheese sandwich</h1>
<p>My cat ate a cheese sandwich</p>
InHTML5,Idon’thavetoworryaboutwhichheadingleveltouse.Ijustneedtousesectioningcontent‐anarticleelementinthiscase:
<article>
<h1>Cheese sandwich</h1>
<p>My cat ate a cheese sandwich</p>
</article>
Nowthecontentistrulyportable.Itdoesn’tmatterwhetherit’sappearingonitsownpageoronthehomepage:
<h1>My awesome blog</h1>
<article>
<h1>Cheese sandwich</h1>
<p>My cat ate a cheese sandwich</p>
</article>
Sectioningroots
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
ThefactthateachpieceofsectioningcontenthasitsownoutlinemakesittheperfectmatchforAjax.Yetagain,HTML5displaysitsprovenanceasaspecificationforwebapplications.
Tryingtoportapieceofcontentfromonedocumentintoanotherintroducessomeproblems.TheCSSrulesbeingappliedtotheparentdocumentwillalsoapplytotheinsertedcontent.That’scurrentlyoneofthechallengesindistributingwidgetsontheweb.
HTML5offersasolutiontothisproblemaintheshapeofthescopedattribute,whichcanbeappliedtoastyleelement.Anystylesdeclaredwithinthatstyleelementwillonlybeappliedtothecontainingsectioningcontent:
<h1>My awesome blog</h1>
<article>
<style scoped>
h1{font-size:75%}
</style>
<h1>Cheese sandwich</h1>
<p>My cat ate a cheese sandwich</p>
</article>
Inthatexample,onlythesecondh1elementwillhaveafontsizevalueof75%.That’sthetheoryanyway.Nobrowserssupportthescopedattributeyet.
HTML5stateoftheart<!- - [if IE]>
<script src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
</script>
<![endif]- - >
GeoffreySneddonhaswrittenahandyonlinetoolthatwillgenerateanoutlineasspecifiedinHTML5(http://bkapart.com/html5/9)
ARIA(AccessibleRichInternetApplications)
ThemostbasicARIAunitistheroleattribute.Youcanaddrole=”search”toyoursearchform,role=”banner”toyourmasthead,androle=”contentinfo”toyourpage
IniciaciónalDiseñodeSistemasWebVersiónmodificadade‘HTML5forwebdesigners’.JeremyKeith.AbookApart
HTMLResources(November2010)
PocketHTMLReference.ApplicationforiPhone,iPodTouchandiPad.
http://itunes.apple.com/us/app/html5‐reference/id377374375?mt=8
IntroducingHTML5
http://introducinghtml5.com/
HTML5Twitterfeed
http://twitter.com/html5
HTML5Showcase
http://www.apple.com/html5/showcase/typography/
HTML5sitesshowcase
http://html5gallery.com/