HTML 5 - ocw.udl.catocw.udl.cat/.../contenidos/HTML5_theory.pdf · With HTML 5, anything goes....

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”>


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


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.


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”>


<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


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>


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”>


<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.


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.


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>


<input id=”zip” name=”zip” pattern=[\d]{5}(-[\d]{4}}”>

Mostofthetime,you’llneverneedtousethepatternattribute.


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.


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.


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?”


<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>


</header>



</section>

footer

Whereasweareusedtohavingonefooterforanentiredocument,HTML5allowsustoalsohavefooterswithinsections.

<section>

<header>


</header>


<footer>


</footer>

</section>


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>


</header>


<footer>


</footer>


</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


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>


<h4>Wed design with JavaScript and DOM</h4>

</hgroup>

Sectioningroots

Someelementsareinvisibletogenerateoutline.Inotherwords,itdoesn’tmatterhowmanyheadingsyouusewithintheseelements,theywon’tappearinthedocument’soutline.


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>


InHTML5,Idon’thavetoworryaboutwhichheadingleveltouse.Ijustneedtousesectioningcontent‐anarticleelementinthiscase:

<article>



</article>

Nowthecontentistrulyportable.Itdoesn’tmatterwhetherit’sappearingonitsownpageoronthehomepage:


<article>



</article>

Sectioningroots


ThefactthateachpieceofsectioningcontenthasitsownoutlinemakesittheperfectmatchforAjax.Yetagain,HTML5displaysitsprovenanceasaspecificationforwebapplications.

Tryingtoportapieceofcontentfromonedocumentintoanotherintroducessomeproblems.TheCSSrulesbeingappliedtotheparentdocumentwillalsoapplytotheinsertedcontent.That’scurrentlyoneofthechallengesindistributingwidgetsontheweb.

HTML5offersasolutiontothisproblemaintheshapeofthescopedattribute,whichcanbeappliedtoastyleelement.Anystylesdeclaredwithinthatstyleelementwillonlybeappliedtothecontainingsectioningcontent:


<article>

<style scoped>

h1{font-size:75%}

</style>



</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


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/

HTML 5 - ocw.udl.catocw.udl.cat/.../contenidos/HTML5_theory.pdf · With HTML 5, anything goes....

Documents

Transcript of HTML 5 - ocw.udl.catocw.udl.cat/.../contenidos/HTML5_theory.pdf · With HTML 5, anything goes....