Maurcio Samy Silva

Novatec

Copyright 2011 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. proi ida a reprod!"#o desta o ra$ %es%o parcial$ por &!al&!er processo$ se% pr'via a!tori(a"#o$ por escrito$ do a!tor e da Editora. Editor) *! e+s ,rates Capa) Caroli+a -!.a ata *evis#o gra%atical) /' ora 0aci+ Editora"#o eletr1+ica) Ca%ila -!.a ata e Caroli+a -!.a ata 234N) 95868765722626168 9ist:rico de i%press;es) <!lho/2011 ,ri%eira edi"#o

Novatec Editora Ltda. *!a L!=s >+t1+io dos 3a+tos 110 028606000 ? 3#o ,a!lo$ 3, ? 4rasil Tel.) @77 11 297966729 0aA) @77 11 297068869 E6%ail) +ovatecB+ovatec.co%. r 3ite) ....+ovatec.co%. r T.itter) t.itter.co%/+ovateceditora 0ace ooC) Dace ooC.co%/+ovatec Li+Ced2+) li+Cedi+.co%/i+/+ovatec

Dados

Internacionais de Catalogao na Publicao (Cmara Brasileira do Livro, SP, Brasil)

Silva, Maurcio Samy HTML 5 / Maurcio Samy Silva. -- So Paulo !ova"#c $%i"ora, 2011. &i'lio(ra)ia. *S&! +,---5-,522-261-. 1. HTML /Li0(ua(#m %# 1ro(rama2o 1ara *0"#r0#"3 2. *0"#r0#" /4#%# %# com1u"a%or#53 6. 7#'5i"#5 - 8#5#0volvim#0"o *. T"ulo.

(CIP)

11-065.1

988-005.166 :0%ic#5 1ara ca";lo(o 5i5"#m;"ico

1. HTML Li0(ua(#m %# 1ro(rama2o 1ara *0"#r0#" 8#5#0volvim#0"o %# 5i"#5 %a com1u"a2o 005.166

OGF20110616

9i<0cia

captulo

Apresentao da HTML5

Neste cap=t!lo$ serE aprese+tada a li+g!age% de %arca"#o 9TFL7$ relata+do6se s!as orige+s$ Di+alidades e desti+a"#o. 3erE Deito !% reve relato hist:rico de s!a evol!"#o$ eAa%i+a+do as %otiva";es &!e res!ltara% +a s!a cria"#o$ a DilosoDia &!e +orteia o dese+volvi%e+to das especiDica";es para a li+g!age% e as pri+cipais di6 Dere+"as co+ceit!ais para as vers;es a+teriores da li+g!age% 9TFL.

1.1 ntroduo
9TFL ' a sigla e% i+glGs para HyperText Markup Language$ &!e$ e% port!g!Gs$ sig6 +iDica li+g!age% para %arca"#o de hiperteAto. H co+ceito de hiperteAto ad%ite !% se%6+I%ero de co+sidera";es e disc!s6 s;es &!e Doge% ao escopo deste livro. ,ara o o% e+te+di%e+to das deDi+i";es$ pode%os res!%ir hiperteAto co%o todo o co+teIdo i+serido e% !% doc!%e+to para a .e e &!e te% co%o pri+cipal caracter=stica a possi ilidade de se i+terligar a o!tros doc!%e+tos da .e . H &!e tor+a poss=vel a co+str!"#o de hiperteAtos s#o os li+Cs$ prese+tes +as pEgi+as dos sites &!e esta%os acost!%ados a visitar &!a+do e+tra%os +a i+ter+et. /esde a i+ve+"#o da .e por Ti% 4er+ers6Lee$ a 9TFL evol!i! por sete vers;es &!e s#o)

9TFL 9TFL @ 9TFL 2.0

20

!aptulo 1 J Apresentao da HTML5

21

9TFL K.0 9TFL K.2 9TFL 8.0 9TFL 8.01 Lvers#o at!alM 9TFL7 Lvers#o e% Dase de dese+volvi%e+toM
Tec+ica%e+te$ o NKC co+sidera oDicial%e+te so%e+te as vers;es 9TFL 2.0$ 9TFL K.2$ 9TFL 8.0$ 9TFL 8.01 e 9TFL7. >s vers;es 9TFL e 9TFL@ s#o a+teriores O cria"#o do NKC e a vers#o 9TFL K.0 +#o chego! a ser la+"ada oDicial%e+te$ tra+sDor%a+do6se +a vers#o 9TFL K.2.

> .e Doi i+ve+tada e% 1992 por 3ir Ti% 4er+ers6Lee. >t!al%e+te Ti% ' diretor do Norld Nide Ne Co+sorti!% LNKCM$ pes&!isador sG+ior do La orat:rio da CiG+cia da Co%p!ta"#o e 2+teligG+cia >rtiDicial LC3>2LM do 2+stit!to de Tec+ologia de Fassach!setts LF2TM e proDessor de CiG+cia da Co%p!ta"#o +a P+iversidade de 3o!tha%pto+$ +a 2+glaterra. Ti% 4er+ers6Lee tra alhava +a 3e"#o de Co%p!ta"#o da Hrga+i(a"#o E!ropeia de ,es&!isa N!clear LCE*NM$ co% sede e% Qe+e ra$ +a 3!="a$ &!a+do i+icio! pes&!isas visa+do a desco rir !% %'todo &!e possi ilitasse aos cie+tistas do %!+do i+teiro co%partilhar eletro+ica%e+te se!s teAtos e pes&!isas e &!e tivesse a D!+cio+alidade de i+terligar os doc!%e+tos. Estava% criadas as +o";es web e de links co%o s#o co+hecidas at!al%e+te. E% 1990$ Ti% crio! o prot:tipo de !% +avegador para rodar e% co%p!tadores da NeRT$ !%a co%pa+hia D!+dada e% 1987 por 3teve <o s$ at!al CEH da >pple. 2+icial%e+te$ o +avegador Doi cha%ado de NorldNideNe e$ posterior%e+te$ re+o6 %eado para NeA!s$ a Di% de evitar co+D!s#o co% a Norld Nide Ne .
H ter%o i+glGs browser ' !sado +o Sarg#o da i+ter+et para desig+ar !% progra%a capa( de ler e aprese+tar ao !s!Erio os co+teIdos de !% doc!%e+to .e escrito e% li+g!age% de %arca"#o. 4ro.ser ve% do ver o to browse$ &!e sig+iDica Dolhear cas!al%e+te as pEgi+as de !% livro e Doi trad!(ido para o port!g!Gs co%o +avegador$ gera+do a t#o e% co+hecida eApress#o T+avegar +a i+ter+etU. 3#o eAe%plos de +avegadores o 2+ter+et EAplorer$ o 0ireDoA$ o Hpera$ o Chro%e e o 3aDari$ e+tre o!tros. Neste livro$ adotare%os o ter%o e% s!a Dor%a trad!(ida) +avegador.

Ti% 4er+ers6Lee acreditava &!e seria poss=vel i+terligar hiperteAtos e% co%6 p!tadores diDere+tes co% !so de li+Cs glo ais$ ta% '% cha%ados de hiperli+Cs. Ele dese+volve! !% soDt.are pr:prio e !% protocolo para rec!perar hiperteAtos$

22

HTML 5

de+o%i+ado 9TT,. H Dor%ato de teAto &!e crio! para o 9TT, Doi cha%ado de 9TFL. Ti% to%o! co%o ase para cria"#o da 9TFL a especiDica"#o 3QFL$ &!e ' !% %'todo i+ter+acio+al%e+te reco+hecido e aceito$ co+te+do +or%as gerais para a cria"#o de li+g!age+s de %arca"#o. > %arca"#o para hiperli+Cs co+d!(i+do a do6 c!%e+tos &!e +#o estivesse% e% !% %es%o co%p!tador o via%e+te +#o co+stava das +or%as para 3QFL e Doi i+ve+tada por Ti%$ de%o+strada pela pri%eira ve( e% 1990$ e% !%a esta"#o de tra alho NeRT$ +os la orat:rios da CE*N. Estava criado o e% ri#o da Norld Nide Ne $ e% co%o a pri%eira vers#o da li+g!age% 9TFL para a %arca"#o de hiperteAtos. > partir da=$ a evol!"#o cro+ol:gica da 9TFL de!6 se co+Dor%e relatado s!%aria%e+te a seg!ir.

1.2 Hist"rico
E% sete% ro de 1991$ Doi criada a lista de disc!ss#o eletr1+ica de+o%i+ada WWWtalk$ co% o prop:sito de trocar ideias e eAperiG+cias so re a 9TFL dese+volvida por Ti% 4er+ers6Lee. P% dos Dre&!e+tadores da lista era /ave *aggett$ dos la o6 rat:rios da 9e.lett6,acCard$ e% 4ristol$ 2+glaterra. /ave$ e%polgado co% a +ova ideia$ dese+volve! s!as pes&!isas e aca o! por escrever a 9TFL@$ !%a vers#o ela orada e e+ri&!ecida da 9TFL origi+al dese+volvida por Ti%. E% o!t! ro de 199K$ /ave *aggett de! por e+cerrada as disc!ss;es e$ +o %Gs seg!i+te$ p! lico! a vers#o Di+al da 9TFL@. > 9TFL@ co%e"a co% a seg!i+te aDir%a"#o)
/oc!%e+tos %arcados co% 9TFL@ s#o co+stit!=dos de t=t!los$ parEgraDos$ listas$ ta elas e Dig!ras.

E co+ti+!a esta elece+do)

>o co+trErio da %aioria das tec+ologias desti+adas O cria"#o de doc!%e+tos$ a 9TFL@ +#o se desti+a a deter%i+ar a aparG+ciaV assi%$ +o%es e ta%a+hos de Do+tes$ %arge+s$ ta !la";es$ espa"a%e+tos e+tre os ele%e+tos +#o s#o D!+";es da li+g!age%. 0ica a cargo dos soDt.ares respo+sEveis pela re+deri(a"#o dos doc!%e+tos %arcados co% 9TFL@ a %a+eira co%o os doc!%e+tos deva% ser aprese+tados Ltalve( co% ase e% co+Dig!ra";es de preDerG+cia do !s!ErioM.

Co+v'% salie+tar co% %!ita G+Dase &!e$ desde s!a cria"#o$ os ideali(adores da 9TFL tivera% a preoc!pa"#o de retirar da li+g!age% de %arca"#o &!al&!er atri !i"#o o! D!+"#o de aprese+ta"#o$ o! seSa$ 9TFL desti+a6se eAcl!siva%e+te a estr!t!rar doc!%e+tos. +essa desti+a"#o &!e se D!+da%e+ta% os pri+c=pios Esicos do dese+volvi%e+to seg!i+do os ,adr;es Ne .

!aptulo 1 J Apresentao da HTML5

2#

H a+o de 1992 %arco! o i+teresse do Ce+tro Nacio+al de >plica";es para 3!per6 co%p!tadores LNC3>M da P+iversidade de 2lli+ois ? e+t#o represe+tado por <oseph 9ardi+ e /ave Tho%pso+$ os &!ais aca ara% por dese+volver !% +avegador &!e Doi de+o%i+ado Fosaic. /a NC3> participara% ai+da dois eApoe+tes da .e ) Farc >+dreesse+$ &!e aprese+to! a ideia de !% ele%e+to para %arca"#o de i%age+s +os hiperteAtos ? e depois Dico! %ilio+Erio ve+de+do prod!tos para a .e ?$ e Eric 4i+a$ !% rilha+te progra%ador co+siderado !% gG+io da .e . E% 199K$ Lo! Fo+t!lli crio! o +avegador de teAto de+o%i+ado Ly+A vers#o 2.0a e /ave *aggett co%e"o! a tra alhar +o dese+volvi%e+to do +avegador >re+a$ &!e se desti+ava a de%o+strar$ +a prEtica$ a i%ple%e+ta"#o de todas as D!+cio+alidades i+ve+tadas e disc!tidas at' e+t#o. >i+da +esse a+o a 3!+ Ficrosyste%s la+"o! a vers#o 1 do +avegador Fosaic. >s gra+des co%pa+hias +#o se i+teressara% pela +ova i+ve+"#o$ alega+do +#o acreditar &!e p!desse% tirar proveito alg!% da .e e &!e se tratava de !% %eio de co%!+ica"#o restrito e de e%prego eAcl!sivo +a Erea acadG%ica. Tal pe+sa%e+to desesti%!lo! as pes&!isas &!e vi+ha% se+do dese+volvidas$ pois estas depe+dia% de patroc=+io. >s e&!ipes$ &!e at' e+t#o dese+volvia% se!s proSetos e% horas vagas$ reDreara% o =%peto i+icial por Dalta de te%po e ver a. H tra alho co+ti+!o!$ %as e% !% rit%o a&!'% do esperado pelos e+volvidos +o proSeto. No %Gs de %aio de 1998$ a 3pyglass co%pro! a lice+"a de co%erciali(a"#o da vers#o aperDei"oada do +avegador Fosaic. >i+da +esse %Gs de %aio$ a CE*N orga+i(o!$ e% Qe+e ra$ a pri%eira co+DerG+cia para a Norld Nide Ne co% a aprese+ta"#o da 9TFL@$ criada por /ave *aggett. > co+DerG+cia co+to! co% a participa"#o de aproAi%ada%e+te K80 pessoas$ a %aioria e+volvida co% atividades e i+stit!i";es acadG%icas.
No %Gs de o!t! ro de 1998$ Ti% 4er+ers6Lee e% parceria co% a CE*N$ o+de a .e Doi por ele i+ve+tada$ criara% o Norld Nide Ne Co+sorti!% LNKCM$ co% sede +o La orat:rio da CiG+cia da Co%p!ta"#o do Fassach!setts 2+stit!te oD Tech+ology LF2TM.

Co% a cria"#o de +ovos +avegadores$ a 9TFL tor+o!6se !% caos$ co% cada Da rica+te i+ve+ta+do +ovas Dor%as de %arca"#o 9TFL eAcl!sivas para se!s +ave6 gadores. E% !%a te+tativa de orga+i(ar a sit!a"#o$ /a+ Co++olly e cola oradores Di(era% !% leva+ta%e+to %i+!cioso de t!do o &!e eAistia +a 9TFL e prop!sera%$ e% S!lho de 1998$ a especiDica"#o 9TFL 2.0$ !%a te+tativa de co+solidar e !+iDicar as diDere+tes Dor%as 9TFL de %arca"#o &!e vi+ha% se+do criadas. >dicio+al%e+te$ /a+ e s!a e&!ipe escrevera% a pri%eira /eDi+i"#o do Tipo de /oc!%e+to L/T/M para a 9TFL 2.0$ !%a esp'cie de descri"#o %ate%Etica da li+g!age%.

2$

HTML 5

E% sete% ro$ Doi criado pela 0or"a6TareDa para E+ge+haria de 2+ter+et L2ET0M o pri%eiro gr!po de tra alho para a 9TFL. > 2ET0 ' !%a orga+i(a"#o i+ter+acio+al &!e co+grega i+teressados +os vErios aspectos da i+ter+et$ co% a Di+alidade de dese+6 volver +or%as e tec+ologias perti+e+tes O opera"#o e O evol!"#o da ar&!itet!ra da i+ter+et. > cria"#o desse gr!po de tra alho %arco! a a ert!ra do dese+volvi%e+to da 9TFL para &!al&!er pessoa i+teressada$ i+depe+de+te%e+te de perte+cer o! +#o a !%a orga+i(a"#o o! :rg#o partic!lar$ isto '$ a disc!ss#o tor+o!6se a erta ao pI lico e% geral. Farc >+dreesse+ e <i% ClarC havia% D!+dado a Fosaic Co%%!+icatio+s &!e$ e% +ove% ro desse a+o$ tra+sDor%o!6se +a Netscape Co%%!+icatio+s Corporatio+. Nascia a Co%pa+hia &!e se tor+aria$ e% po!co te%po$ a se+hora a sol!ta da .e $ i%p!lsio+ada co% a aceita"#o !+W+i%e da +ova vers#o do +avegador Fosaic. H s!cesso da Netscape deve!6se$ e+tre o!tros Datores$ pri%ordial%e+te$ ao i+vesti%e+6 to %aci"o +as D!+cio+alidades de proporcio+ar acesso O i+ter+et$ %es%o para os !s!Erios co% dispositivos %ais precErios. > Netscape tor+o!6se a se+sa"#o e %!itos ai+da acredita% erro+ea%e+te &!e a .e Doi criada pela Netscape. ,or o!tro lado$ a co%pa+hia isolo!6se e% s!as pes&!isas e dese+volvi%e+tos$ adota+do a pol=tica de i+ve+tar 9TFL pr:pria$ se% participa"#o da co%!+idade i+teressada e passa+do ao largo de co+DerG+cias e e+co+tros pI licos relacio+ados. No %Gs de o!t! ro de 1998$ Doi criado o Norld Nide Ne Co+sorti!% LNKCM$ !% co+s:rcio i+ter+acio+al Dor%ado por e%presas$ i+stit!i";es$ pes&!isadores$ dese+volvedores e pI lico e% geral$ co% a Di+alidade de dese+volver a .e a se! pote+cial %EAi%o$ cria+do +or%as e especiDica";es aplicEveis aos diversos seg%e+6 tos e setores da .e $ desde tec+ologias e soDt.ares at' Da rica+tes e Dor+ecedores. H NKC te% s!a sede pri+cipal distri !=da e% trGs l!gares disti+tos) +os La ora6 t:rios de CiG+cia da Co%p!ta"#o do F2T$ e% Fassach!setts$ +os Estados P+idos$ +o 2+stit!to Nacio+al de ,es&!isas de 2+Dor%Etica e >!to%a"#o$ +a 0ra+"a$ e +a P+iversidade de -eiCo$ +o <ap#o$ al'% de escrit:rios espalhados e% vErias cidades do %!+do. >s %ais proe%i+e+tes e rilha+tes ca e"as e+volvidas co% o dese+vol6 vi%e+to para a .e Dora% co+vidadas a Dor%ar o +Icleo Esico do NKC. No%es de proSe"#o i+ter+acio+al +o e+volvi%e+to co% a .e Dora% co+vidados a participar$ destaca+do6se 9e+ricC 0rystyC Neilse+$ >+sel% 4aird63%ith$ <ay 3eCora$ *ohit -hare$ /a+ Co++olly$ <i% Qettys$ Ti% 4er+ers6Lee$ 3!sa+ 9ardy$ <i% Filler$ /ave *aggett$ To% Qree+e$ >rth!r 3ecret$ -are+ Fac>rth!r$ >r+a!d le 9ors$ 9XCo+ Lie$ 4ert 4os e Chris Lilley$ e+tre o!tros.

!aptulo 1 J Apresentao da HTML5

25

H a+o de 1997 assi+alo! o i+=cio de !% dese+volvi%e+to Dre+'tico de +ovas %arca";es para a 9TFL$ co% prioridade para a cria"#o de ele%e+tos e atri !tos de aprese+ta"#o e% total desacordo co% o prop:sito i+icial da li+g!age%$ &!al seSa) o de ser !%a li+g!age% eAcl!siva%e+te de %arca"#o e estr!t!ra"#o de teAtos. >tri !tos e ele%e+tos para deDi+ir ta%a+hos$ tipos e cores de letras dos teAtos$ cores de D!+do$ teAt!ras e toda !%a paraDer+Elia relacio+ada$ co%pleta%e+te Dora do escopo i+icial da 9TFL. > vers#o Di+al da 9TFL 2.0 Doi p! licada e% 22 de sete% ro de 1997. E% %ar"o de 1997$ /ave *aggett la+"o! s!a proposta para a 9TFL K.0$ &!e ve% co% a pri%eira s!gest#o de !%a %arca"#o espec=Dica para estili(a"#o e aprese+ta"#o$ ao %es%o te%po &!e ta% '% prop;e a cria"#o do atri !to class. 3!rgi!$ ai+da$ a %arca"#o para ta elas$ para +otas de rodap' e Dor%!lErios. > %arca"#o para ta elas gero! gra+de disc!ss#o +a 'poca$ te+do sido eDetivada so%e+te +a vers#o seg!i+te da 9TFL. E% sete% ro$ a Netscape prop1s o co+ceito de frames e% doc!%e+tos 9TFL e i%ple%e+to! essa D!+cio+alidade e% se! +avegador$ se% co+s!ltas O co%!+idade$ co%o era prEtica co%!%. E% +ove% ro$ a FicrosoDt la+"o! a vers#o 2.0 do 2+ter+et EAplorer. 4ert 4os$ 9XCo+ Lie$ /ave *aggett$ Chris Lilley e cola oradores i+iciara%$ +esse %es%o %Gs$ a ideali(a"#o das Dolhas de estilo e% cascata LC33M. E% de(e% ro$ dissolve!6se o gr!po de tra alho para a 9TFL. E% Devereiro de 1996$ o NKC crio! o 9TFL E*4$ !% gr!po Dor%ado por repre6 se+ta+tes da 24F$ FicrosoDt$ Netscape$ Novell$ 3oDt&!ad e do NKC Co+sorti!%$ e+carregado de rever e padro+i(ar a 9TFL co% a Di+alidade de aca ar co% as i%ple%e+ta";es proprietErias. E% de(e% ro$ o 9TFL E*4 tra+sDor%o!6se +o Qr!po de Tra alho da 9TFL$ &!e eAiste at' hoSe. Esse %Gs assi+alo! o i+=cio dos est!dos para a i%ple%e+ta6 "#o de !%a %arca"#o provisoria%e+te de+o%i+ada Cougar$ a &!al$ %ais tarde$ tra+sDor%ar6se6ia +o 9TFL8. E% Sa+eiro de 1995$ o NKC e+dosso! a 9TFL K.2 co%o !%a *eco%e+da"#o oDicial. Co% essa vers#o$ a 9TFL i+corporo! os ele%e+tos table e applet$ e% co%o ele%e+tos para %arcar s! scritos$ so rescritos e teAto ao redor de i%age+s.

2%

HTML 5

E% S!lho de 1995$ Doi la+"ada a vers#o rasc!+ho para a Co!gar$ depois de+o6 %i+ada 9TFL8. E% de(e% ro desse a+o$ o NKC e+dosso! a 9TFL8 co%o !%a *eco%e+da"#o oDicial. E% de(e% ro de 1999$ o NKC p! lico! as *eco%e+da";es para o 9TFL 8.01. Essa ' a vers#o at!al da 9TFL.

1.# !riao da HTML5

E% %aio de 2005$ o NKC reco+sidero! s!a decis#o de e+cerrar o dese+volvi%e+to da 9TFL e% Davor da R9TFL e tor+o! pI lica s!a decis#o de reto%ar os est!dos para o dese+volvi%e+to da 9TFL7$ to%a+do co%o ase o tra alho &!e SE vi+ha se+do dese+volvido pelo N9>TNQ. N9>TNQ ' a sigla e% i+glGs para Web Hypertext Application Technology Working Group$ &!e$ e% port!g!Gs$ sig+iDica Qr!po de Tra alho para Tec+ologias de 9iper6 teAto e% >plica";es para Ne . H N9>TNQ Doi criado e% 2008 por dese+volvedores da >pple$ da 0!+da"#o Fo(illa e do +avegador Hpera$ &!e$ desco+te+tes co% os r!%os adotados pelo NKC$ prop!sera%6se a dese+volver as especiDica";es para 9TFL7$ Ne 0or%s 2.0 e Ne Co+trols 1.0. >t!al%e+te$ o Doco I+ico do Qr!po de Tra alho ' a 9TFL7$ !%a ve( &!e a Ne 0or%s 2.0 ta% '% Doi assi%ilada pelo NKC e os est!dos para Ne Co+trols 1.0 Dora% i+terro%pidos. H N9>TNQ dese+volve a 9TFL7 e% co+S!+to co% o NKC e a% os %a+tG% e% se!s sites !%a vers#o das especiDica";es &!e diDere% ligeira%e+te e% pe&!e+os detalhes. > vers#o do N9>TNQ ' %e+os restritiva do &!e a vers#o do NKC. ,or eAe%plo) e% vErios ite+s da especiDica"#o$ aprese+ta eAe%plos il!strativos e i+Dor6 %a";es so re s!porte da D!+cio+alidade descrita$ +os +avegadores %oder+os. Essas i+Dor%a";es adicio+ais +#o co+sta% da vers#o do NKC. No dia 19 de Sa+eiro de 2011$ 2a+ 9icCso+$ editor da 9TFL7$ p! lico! +o log da N9>TNQ !%a %at'ria i+Dor%a+do &!e a especiDica"#o para a 9TFL7 co+ti6 +!aria a ser dese+volvida eAcl!siva%e+te pelo NKC$ Dica+do so respo+sa ilidade do N9>TNQ a co+ti+!idade do dese+volvi%e+to de !%a especiDica"#o para a 9TFL geral$ isto '$ se% s!DiAo desig+ativo da vers#o.

!aptulo 1 J Apresentao da HTML5

2&

1.$ 'strutura da especi(icao para a HTML5

> especiDica"#o para a 9TFL7 estE estr!t!rada e% 10 se";es$ a sa er) 1. n(raestrutura comum) deDi+e ter%i+ologia$ classes$ algorit%os$ si+taAes e partes co%!+s das especiDica";es. 2. Sem)ntica* estrutura e A+ s para documentos HTML) deDi+e% as D!+cio+alidades do /HF 9TFL e dos ele%e+tos 9TFL e% geral. #. 'lementos HTML) eAplica% o sig+iDicado de cada !% dos ele%e+tos 9TFL. 3#o esta elecidas regras de !so dos ele%e+tos +a %arca"#o$ e% co%o diretri(es de %a+ip!la"#o deles pelos age+tes de !s!Erio. $. Micro(ormatos) a especiDica"#o para a 9TFL7 prevG !% %eca+is%o para %arcar i+Dor%a";es so re o doc!%e+to$ +o Dor%ato +o%e/valor$ para sere% lidas por %E&!i+as. Essa se"#o descreve esse %eca+is%o e os algorit%os capa(es de co+verter doc!%e+tos 9TFL e% o!tros Dor%atos. >dicio+al%e+te$ +essa se"#o deDi+e%6se alg!+s voca !lErios para FicroDor%atos) i+Dor%a";es de co+tato$ cale+dErio de eve+tos e lice+"as. 5. !arre,amento de p-,inas .e/) doc!%e+tos 9TFL +#o aparece% do +ada ? essa se"#o deDi+e as %!itas D!+cio+alidades relacio+adas ao trata%e+to de pEgi+as .e pelos diDere+tes dispositivos. %. A+ s para aplica0es .e/) descreve% as D!+cio+alidades Esicas para dese+volvi6 %e+to de scripts e% aplica";es 9TFL. &. nterao com o usu-rio) descreve os diDere+tes %eca+is%os de i+tera"#o do !s!Erio co% !% doc!%e+to 9TFL. 1. A+ s para comunicao) trata% dos %eca+is%os de co%!+ica"#o e+tre aplica";es 9TFL roda+do e% do%=+ios diDere+tes e +o %es%o clie+te. 2. Sinta3e HTML) descreve a si+taAe 9TFL. 10. Sinta3e 4HTML) descreve a si+taAe R9TFL. > especiDica"#o co+t'% ai+da apG+dices +os &!ais s#o esta elecidas regras de re+deri(a"#o para os +avegadores$ listadas as D!+cio+alidades o soletas e co+6 sidera";es da 2+ter+et >ssig+ed N!% ers >!thority L2>N>M$ :rg#o respo+sEvel pela coorde+a"#o geral de protocolos para a 2+ter+et$ +o%es de do%=+io L/N3M e e+dere"o 2,.

21

HTML 5

1.5 +rincpios de desenvolvimento da HTML5

E% 26 de +ove% ro de 2005$ o Qr!po de Tra alho da 9TFL perte+ce+te ao NKC p! lico! !%a +ota co+te+do !% co+S!+to de diretri(es a ser seg!ido pelo Qr!po de Tra alho e &!e descreve os pri+c=pios de dese+volvi%e+to da 9TFL7. Tal +ota estE hospedada +o site do NKC) http://www.w3.org/TR/html-design-principles/. Hs pri+c=pios descritos visa% a orie+tar o Qr!po de Tra alho &!e dese+volve a 9TFL7 +as seg!i+tes Ereas)

Co%pati ilidade Ptilidade 2+teropera ilidade >cesso !+iversal

YeSa%os a seg!ir cada !%a dessas Ereas e se!s pri+c=pios de dese+volvi%e+to para a 9TFL7.

1.5.1 !ompati/ilidade
Co%pati ilidade ' !% ter%o &!e pode ser i+terpretado de vErias %a+eiras. Dre6 &!e+te o !so dos ter%os Tretroco%pati ilidadeU e Tco%pati ilidade D!t!raU$ co+t!do$ depe+de+do do co+teAto$ +e% se%pre Dica claro o &!e eles sig+iDica%. Hs pri+c=pios de co%pati ilidade previstos +a Nota do NKC esclarece% o ter%o co%pati ilidade e% diDere+tes co+teAtos$ co+Dor%e descritos a seg!ir.

1.5.1.1 Suporte para conte5dos e3istentes

EAiste% %ilhares de pEgi+as .e codiDicadas e% desacordo co% as diretri(es da 9TFL e &!e s#o re+deri(adas a co+te+to e D!+cio+a% perDeita%e+te$ pois o trata6 %e+to dado pelos +avegadores aos erros de %arca"#o ' %!ito co%place+te. 9istorica%e+te os Da rica+tes de +avegadores cada ve( %ais i%ple%e+tara% %eca+is%os de trata%e+to de erros de %arca"#o capa(es de si%ples%e+te ig+orE6 los. H +=vel de soDistica"#o dos %eca+is%os chego! a tal po+to &!e os +avegadores pratica%e+te Tadivi+ha%U o &!e o dese+volvedor deveria ter Deito &!a+do co%ete! !% erro de %arca"#o e$ +a %aioria dos casos$ re+deri(a% o co+teIdo co%o se erros +#o eAistisse%.

!aptulo 1 J Apresentao da HTML5

22

H serve a %arca"#o de !%a lista +#o orde+ada co% !% +=vel de a+i+ha%e+to)

<ul> <li>item 1</li> <ul> <li>item 1.1 <li>item 1.2</li> </ul> <li>item 2 <ul> <li>item 2.1 <li>item 2.2</li>

> %arca"#o e% &!est#o co+t'% vErios erros$ %as$ se co+star de !% doc!%e+to .e servido co% o tipo de F2FE text/html$ e &!al&!er /HCTZ,E o! %es%o se% ele$ serE re+deri(ada +or%al%e+te co%o !%a lista de dois ite+s$ cada !% deles co% dois s! ite+s e respectivos %arcadores6padr#o. E% %arca"#o R9TFL servida co% o tipo de F2FE application/xhtml xml o +ave6 gador ac!sarE !% erro Datal e o !s!Erio serE ri+dado co% !%a %e+sage% de erro. Co%o sa e%os$ a te+tativa de evol!ir a 9TFL para R9TFL Dracasso! e Doi a a+do+ada pelo NKC e% Davor da 9TFL7 e esta ao co+trErio da R9TFL$ seg!+do o pri+c=pio da co%pati ilidade$ deverE ser dese+volvida de %odo a +#o T&!e rarU %arca"#o errada. F!itos sites !sa% o ele%e+to u para %arcar teAtos s! li+hados. Esse ele%e+to Doi colocado e% des!so pela 9TFL8V co+t!do$ a 9TFL7 deve prever s!porte para ele. Esses dois si%ples eAe%plos e% il!stra% o pri+c=pio da co%pati ilidade$ po6 r'% +#o ' s: %arca"#o errada e ele%e+to e% des!so &!e ele co+te%pla. >,2s de especiDica";es 9TFL a+tigas$ D!+cio+alidades e co%porta%e+tos +#o previstos e% especiDica";es e at' %es%o D!+cio+alidades proprietErias deve% ser co+sideradas +o dese+volvi%e+to da 9TFL7. Co+v'% ai+da ressaltar &!e re+deri(ar correta%e+te %arca"#o errada +#o i%6 plica doc!%e+to vElido. 3eg!+do esse pri+c=pio$ a 9TFL7 estE se+do dese+volvida de %odo &!e a %ar6 ca"#o %ostrada a+terior%e+te re+deri(a +or%al%e+te e% 9TFL7$ %as os a!tores deve% evitE6la ao criar doc!%e+tos +ovos. Elas ser#o s!portadas e% doc!%e+tos a+tigos &!a+do %igrados para 9TFL7.

#0

HTML 5

>s perg!+tas &!e deve% ser Deitas para se chegar O co+cl!s#o so re o s!porte o! +#o a !%a D!+cio+alidade o! co%porta%e+to s#o)

> &!a+tidade de co+teIdos depe+de+te da D!+cio+alidade o! co%porta%e+to ' co+siderEvel[ > D!+cio+alidade o! co%porta%e+to ocorre e% sites pop!lares e de gra+de a!diG+cia[ > D!+cio+alidade o! co%porta%e+to ' para co+s!%o glo al o! locali(ado[ > D!+cio+alidade o! co%porta%e+to ' para a .e pI lica o! restrito a dis6 positivos partic!lares[ > D!+cio+alidade o! co%porta%e+to D!+cio+a e% vErios dispositivos o! estE restrito a deter%i+ado dispositivo[

1.5.1.2 6e,radao ,raciosa

/egrada"#o graciosa ' a trad!"#o literal para TgraceD!l degradatio+U c!So sig+iDicado ' o seg!i+te)
> cria"#o de !% co+teIdo deve ser proSetada de %odo &!e !s!Erios e age+tes de !s!Erios te+ha% acesso a ele i+depe+de+te%e+te do dispositivo e co+di";es &!e esteSa% !sa+do$ ai+da &!e os %ais precErios poss=veis.

H co+teIdo ' criado i%ple%e+ta+do6se as %ais %oder+as e ava+"adas tec+o6 logias co% o o Setivo de estili(ar$ i+cre%e+tar aprese+ta"#o e !sa ilidade e t!do %ais &!e achar co+ve+ie+te. Nessas co+di";es$ o pri+c=pio da degrada"#o graciosa esta elece &!e dispositi6 vos e !s!Erios se% s!porte para as tec+ologias ava+"adas +#o Dicar#o privados da i+Dor%a"#o tra+s%itida pelo co+teIdo. ,or eAe%plo) proSetar !% oA co% ordas arredo+dadas e so% ras proporcio+a degrada"#o graciosa para !s!Erios co% +a6 vegador se% s!porte para C33K &!e ver#o o oA co% ordas +#o arredo+dadas e se% so% ras$ por'% ter#o acesso ao co+teIdo +ele i+serido. >o proSetar !% %e+! dropdo.+ co% <ava3cript$ ' preciso gara+tir &!e o %e+! serE acess=vel e D!+cio+al para !s!Erios se% s!porte o! co% <ava3cript desa ilitado. Esses dois si%ples eAe%plos e% il!stra% o pri+c=pio da degrada"#o graciosa &!e$ e% Ilti%a a+Elise$ sig+iDica o seg!i+te)
>o acresce+tar D!+cio+alidades c!So s!porte ' previsto +os %ais %oder+os +avegadores$ ' preciso &!e os dese+volvedores gara+ta% %eca+is%os capa(es

!aptulo 1 J Apresentao da HTML5 de re+deri(ar o co+teIdo de Dor%a a +#o perder a i+Dor%a"#o tra+s%itida$ &!a+do o co+teIdo ' re+deri(ado e% age+tes de !s!Erio a+tigos +e% para !s!Erios &!e +avega% co% alg!%as D!+cio+alidades desa ilitadas.

#1

3eg!+do esse pri+c=pio$ a 9TFL7 estE se+do dese+volvida de %odo a Dor+ecer %eca+is%os capa(es de proporcio+ar !%a sol!"#o alter+ativa para a degrada"#o graciosa. E% se trata+do de +ovas D!+cio+alidades$ +a %aioria dos casos$ as seg!i+tes co+sidera";es s#o levadas e% co+ta)

Novos ele%e+tos o! atri !tos$ &!a+do +#o e+te+didos pelo age+te de !s!Erio$ deve% prever !% %eca+is%o adicio+al de tra+s%iss#o de se%W+tica$ se% perder s!a D!+cio+alidade. Novos %'todos o! atri !tos deve% ser capa(es de ser testados via ECF>3cript a+tes de sere% !sados. Novos ele%e+tos o! atri !tos deve% ser se%W+ticos e capa(es de rece ere% estili(a"#o %=+i%a. Novos ele%e+tos capa(es de co%portare% !% %eca+is%o de re+deri(a"#o soDisticado deve% prever !%a alter+ativa de tra+s%iss#o do se! co+teIdo para age+tes &!e +#o os s!porte%.

Co+t!do$ esse pri+c=pio +#o ' a sol!to +o dese+volvi%e+to da 9TFL7. E% al6 g!+s casos$ a +ova D!+cio+alidade si%ples%e+te +#o irE D!+cio+ar e% deter%i+ada classe de age+tes de !s!Erio o! ai+da ' i%poss=vel de se prover degrada"#o graciosa. ,or eAe%plo) as +ovas >,2s &!e depe+de% de li+g!age% de script para D!+cio+ar +#o D!+cio+ar#o e% age+tes de !s!Erio se% s!porte para o script. Hs eAe%plos a seg!ir il!stra% o pri+c=pio da degrada"#o graciosa aplicado ao dese+volvi%e+to da 9TFL7)

Hs +ovos ele%e+tos can!as e audio desti+ados a i%ple%e+tar %!lti%=dia e% !% doc!%e+to prevee% !% %eca+is%o de aprese+ta"#o de co+teIdo alter6 +ativo para +avegadores &!e +#o s!porta% esses ele%e+tos$ co%o %ostrado +a %arca"#o a seg!ir)
<can!as>"nsira a#ui o conte$do alternati!o</can!as> <audio>"nsira a#ui o conte$do alternati!o</audio>

H +ovo %'todo get%lements&'(lass)ame*+ ' %!ito %ais rEpido do &!e se! e&!iva6 le+te tradicio+al dese+volvido co% ECF>3cript. 3eg!+do o pri+c=pio da degra6 da"#o graciosa$ %eca+is%os de veriDica"#o de s!porte para esse %'todo pode% ser !sados para servir o %'todo e&!ivale+te para age+tes &!e +#o o s!porta%.

#2

HTML 5

1.5.1.# 7o reinventar a roda

3eg!+do esse pri+c=pio$ se !%a tec+ologia SE estE i%ple%e+tada e ' larga%e+te !sada para ate+der a deter%i+ados casos$ +#o hE +ecessidade de se criar !%a +ova D!+cio+alidade para ate+der O&!eles casos. Fes%o por&!e ' %ais DEcil a%pliar D!+cio+alidades SE eAiste+tes e testadas do &!e partir do (ero cria+do +ova D!+cio6 +alidade co% o %es%o prop:sito. H eAe%plo clEssico da aplica"#o desse pri+c=pio ' a ado"#o dos ele%e+tos mar#uee e do atri !to contenteditable &!e SE eAiste%$ +#o co+sta% das especiDica";es para a 9TFL$ %as agora passa% a Da(er parte da 9TFL7.

1.5.1.$ +avimentar os camin8os e3istentes

3eg!+do esse pri+c=pio$ se !%a prEtica ' a%pla%e+te !sada pelos dese+volvedores$ ' preDer=vel adotE6la a proi i6la o! i+ve+tar algo +ovo para s! stit!=6la. co%!% a prEtica de os a!tores !sare%$ e% doc!%e+tos 9TFL$ a %arca"#o <br/> e% detri%e+to de <br>. N#o hE +e+h!% da+o e% se per%itir a co+ti+!idade dessa prEtica.

1.5.1.5 'voluo em lu,ar de revoluo

*evol!";es$ por ve(es$ %!da% o %!+do para %elhor. Co+t!do$ +a %aioria dos casos$ ' %elhor aperDei"oar prEticas eAiste+tes do &!e si%ples%e+te descartE6las. 3eg!+do esse pri+c=pio$ se !%a t'c+ica ' !sada pelos dese+volvedores$ ' preDer=vel aperDei"oE6 la e adotE6la e% ve( de o rigar os a!tores a est!dar e apre+der +ovas t'c+icas.

1.5.2 9tilidade
Ptilidade visa a gara+tir &!e a %arca"#o 9TFL possa ser !sada de %odo eDetivo para todos os Di+s a &!e ela se desti+a.

1.5.2.1 Solucionar pro/lemas reais

>ltera";es +as especiDica";es deve% ser Deitas para sol!cio+ar pro le%as at!ais reais. > stra";es e ila";es te:ricas so re pro le%as eAiste+tes deve% ser descartadas e% Davor de !%a sol!"#o prag%Etica e eDetiva. Todos os pro le%as at!ais deve% ser est!dados e resolvidos$ se poss=vel.

!aptulo 1 J Apresentao da HTML5

##

1.5.2.2 +rioridades
,rioridades ' !% pri+c=pio &!e co+sidera !%a cadeia de i+teressados &!a+do hE co+Dlitos e% rela"#o O i%ple%e+ta"#o de !%a D!+cio+alidade +a 9TFL7. Nesses casos$ ao se criar !%a D!+cio+alidade$ os !s!Erios ser#o co+siderados e% pri%eiro l!gar. 3eg!e%6se a estes os i%ple%e+tadores das D!+cio+alidades &!e s#o seg!idos pelos &!e cria% especiDica";esV e% Ilti%o l!gar$ co+sidera6se a p!re(a te:rica da &!est#o.

1.5.2.# Se,urana
3eg!ra+"a ' !% pri+c=pio &!e visa a asseg!rar &!e as D!+cio+alidades da 9TFL7 +#o oDere"a% rechas &!e possi ilita% violar as +or%as de seg!ra+"a do %odelo .e . ,reDere+cial%e+te as co+sidera";es so re seg!ra+"a deve% ser tratadas dire6 ta%e+te +as especiDica";es. ,or eAe%plo) a co%!+ica"#o e+tre doc!%e+tos de diDere+tes sites ' %!ito ItilV co+t!do$ i%ple%e+tar tal D!+cio+alidade se% restri";es pode colocar e% risco a seg!ra+"a dos dados tra+s%itidos. > D!+cio+alidade para co%!+ica"#o e+tre do6 c!%e+tos estE proSetada +a 9TFL7 paralela%e+te a %eca+is%os &!e i%pede% a viola"#o das regras de seg!ra+"a.

1.5.2.$ Separao de camadas

> 9TFL Doi proSetada para separar a %arca"#o estr!t!ral da aprese+ta"#o. Nesse co+teAto$ %arca"#o &!e eApresse estr!t!ra ' preDerida so re %arca"#o para apre6 se+ta"#o. Co+t!do$ %arca"#o estr!t!rada ' !% %eio para se alca+"ar !% Di% tal co%o ocorre &!a+do co+sidera%os o D!+cio+a%e+to da D!+cio+alidade i+depe+6 de+te%e+te do tipo de %=dia do !s!Erio. Esse pri+c=pio esta elece &!e +#o s#o +ecessErias co+sidera";es proD!+das e detalha%e+to reDi+ado so re &!est;es relacio+adas O se%W+tica se o Di% pode ser alca+"ado por !%a via %ais si%ples. /eDi+ir !% padr#o ra(oEvel de se%W+tica para diDere+tes tipos de %=dia ' s!Dicie+te. /eve ser Deito !% ala+"o po+derado e+tre se%W+tica reDi+ada e !so prEtico a+tes de se chegar a !%a co+cl!s#o. No%es de ele%e+tos e atri !tos da %arca"#o deve% ser prEticos e prag%Eticos e% l!gar de ver osos e %!ito detalhados.

#$

HTML 5

,or eAe%plo) o ele%e+to article deDi+e !% artigo i+divid!al se% detalhar a %a6 +eira co%o ele deve ser re+deri(ado. E% deter%i+ado co+teAto$ !% artigo pode ser I+ico +a pEgi+a e disposto e% %Iltiplas col!+as ao passo &!e e% o!tro co+teAto possa coeAistir co% vErios o!tros artigos %!lticol!+ares e% !%a %es%a pEgi+a. Hs ele%e+tos b e i s#o larga%e+te !sados. %!ito %elhor esta elecer +ovas regras de re+deri(a"#o para eles$ +os diDere+tes tipos de %=dia$ do &!e si%ples%e+te a+i6los das especiDica";es.

1.5.2.5 !onsist:ncia do 6;M

H pri+c=pio da co+sistG+cia do /HF$ co%o o pr:prio +o%e s!gere$ visa a criar D!+cio+alidades +a 9TFL7 &!e per%ita% a prod!"#o de !%a Ervore do doc!%e+6 to co+siste+te e Dacil%e+te acess=vel Os li+g!age+s de script e progra%as e% geral. /iscrepW+cias s#o ad%itidas desde &!e +ecessErias a co+te%plar dispositivos do passado$ %as$ +esses casos$ as diDere+"as deve% ser %i+i%i(adas.

1.5.# nteropera/ilidade
2+teropera ilidade visa a a!%e+tar as cha+ces de !%a i%ple%e+ta"#o 9TFL D!+cio+ar +os %ais variados dispositivos e siste%as.

1.5.#.1 !omportamentos de(inidos

Esse pri+c=pio visa a &!e as D!+cio+alidades$ &!a+do Dor o caso$ co%porte%6se de %a+eira e% deDi+ida e% l!gar de deiAar livre%e+te por co+ta dos age+tes de !s!6 Erio a tareDa de esta elecer co%o serE o co%porta%e+to. Co+t!do$ deve6se per%itir &!e as i%ple%e+ta";es te+ha% certa li erdade para i+cre%e+tar alg!% co%por6 ta%e+to e% Ereas co%o de i+terDace do !s!Erio e da &!alidade de re+deri(a"#o.

1.5.#.2 'vitar solu0es comple3as

Esse pri+c=pio dE preDerG+cia ao !so de sol!";es si%ples. 0!+cio+alidades si%ples s#o %ais DEceis de sere% i%ple%e+tadas pelos age+tes de !s!Erio$ al'% de Dacilitare% a i+teropera ilidade e o e+te+di%e+to pelos a!tores. No e+ta+to$ si%plicidade +#o deve ser desc!lpa para se Derir o!tros pri+c=pios de dese+volvi%e+to da 9TFL7.

!aptulo 1 J Apresentao da HTML5

#5

1.5.#.# Tratamento de erros

Esse pri+c=pio esta elece &!e os erros de %arca"#o deve% ser tratados de %odo a +#o Dr!strar o !s!Erio aprese+ta+do6lhe !%a %e+sage% de erro. Nos casos de erro ' preDer=vel !% %eca+is%o de degrada"#o graciosa a !%a %e+sage% de erro Datal.

1.5.$ Acesso universal

>cesso !+iversal visa a gara+tir o acesso Os D!+cio+alidades da 9TFL7 pelo %aior +I%ero poss=vel de dispositivos e siste%a seg!+do os pri+c=pios a seg!ir)

1.5.$.1 ndepend:ncia de mdia

>s D!+cio+alidades da 9TFL7 deve%$ se%pre &!e poss=vel$ D!+cio+ar +os %ais variados tipos de plataDor%as$ dispositivos e %=dias. 2sso +#o sig+iDica &!e deter%i6 +ada D!+cio+alidade deva ser descartada por&!e +#o ' s!portada por essa o! a&!ela plataDor%a. ,or eAe%plo) D!+cio+alidades de i+tera"#o +#o deve% ser descartadas pelo Dato de +#o sere% s!portadas e% %=dia i%pressa$ co%o ocorre co% o ele%e+to a &!e si%ples%e+te +#o D!+cio+a &!a+do i%presso.

1.5.$.2 Suporte multiln,ua

Essa D!+cio+alidade visa a Dacilitar a prod!"#o de doc!%e+tos +os diDere+tes idio6 %as eAiste+tes +o %!+do.

1.5.$.# Acessi/ilidade
Essa D!+cio+alidade visa a Dacilitar o acesso ao co+teIdo i+depe+de+te%e+te do dispositivo o! das +ecessidades especiais do !s!Erio. 2sso +#o sig+iDica &!e !%a D!+cio+alidade deva ser descartada se !% gr!po de !s!Erios +#o tiver acesso a ela$ %as se deve% prever %eios alter+ativos de acesso. o caso do ele%e+to img &!e +#o deve ser a+ido por&!e !s!Erios cegos +#o co+seg!e% ver i%age+s. Psa6se o atri !to alt para Dor+ecer !% %eio alter+ativo de acesso O i%age% para a&!eles !s!Erios.

#%

HTML 5

1.% 6i(erenas entre HTML5 e HTML$

>s pri+cipais diDere+"as e+tre a 9TFL7 e a 9TFL8 tG% s!as orige+s +o Dato de a 9TFL7 estar se+do dese+volvida co% o prop:sito de s! stit!ir ta+to a 9TFL criada +os a+os 90 &!a+to a R9TFL &!e Doi !%a te+tativa Dr!strada de reDor%!lar a 9TFL8 co%o !%a aplica"#o RFL.

1.%.1 ntroduo
> especiDica"#o para a 9TFL7 i+iciada +o a+o de 2008 e i+corporada pelo NKC +o a+o de 2005 te% co%o o Setivo geral est!dar e resolver pro le%as relacio+ados O i%ple%e+ta"#o de !% 9TFL co+te%porW+eo e ao %es%o te%po co%pat=vel co% co+teIdos eAiste+tes. ,ara c!%prir esse o Setivo$ co+sidera os seg!i+tes po+tos)

/eDi+i"#o de !%a li+g!age% I+ica de+o%i+ada 9TFL7 &!e pode ser escrita ta+to co% a si+taAe 9TFL &!a+to co% a si+taAe RFL. /eDi+i"#o de %odelos de processa%e+to detalhados co% vista a pro%over a i+teropera ilidade da li+g!age%. >perDei"oa%e+to da %arca"#o dos doc!%e+tos. Cria"#o de %arca"#o e >,2s para +ovas tec+ologias$ tais co%o as aplica";es Ne .

Nesse co+teAto$ pode%os agr!par as diDere+"as e+tre as d!as li+g!age+s +as seg!i+tes Ereas)

1.%.1.1 <etrocompati/ilidade
> 9TFL7 estE se+do dese+volvida e% dois +=veis de re&!isitos de co+Dor%idades. *e&!isitos para a!tores e re&!isitos para age+tes de !s!Erio. Co+sidere$ para il!strar a diDere+"a +essa Erea$ os ele%e+tos isindex e plaintext. /e acordo co% a 9TFL8$ esses ele%e+tos est#o e% des!so LdeprecatedM e seria% a+idos das pr:Ai%as es6 peciDica";es para a 9TFL. 3eg!+do os pri+c=pios de dese+volvi%e+to da 9TFL7$ esses ele%e+tos perde% s!a co+di"#o de Te% des!soU e passa% a ser co+siderados ele%e+tos o soletos Lo soletesM. > diDere+"a ' &!e eles +#o ser#o a+idos da espe6 ciDica"#o. Co+ti+!ar#o co+sta+do co%o re&!isitos para age+tes de !s!Erio e se! !so pelos a!tores ' desaco+selhado.

!aptulo 1 J Apresentao da HTML5

#&

Na prEtica isso sig+iDica &!e os Da rica+tes de age+tes de !s!Erio deve% i%ple6 %e+tar D!+cio+alidades &!e per%ita% reco+hecer e re+deri(ar apropriada%e+te a&!eles ele%e+tos +os dispositivos D!t!ros$ %!ito e% ora o !so deles$ pelos a!tores$ seSa desaco+selhado. Na 9TFL7 +#o eAiste% ele%e+tos e% des!so LdeprecatedM co% o se+tido &!e a palavra te% +a 9TFL8. H %es%o aco+tece co% o!tros ele%e+tos e% des!so seg!+do a 9TFL8$ co%o os ele%e+tos ,ont$ u$ s etc.

1.%.1.2 Modelo de desenvolvimento

Nessa Erea a diDere+"a ' &!e a 9TFL7 +#o serE co+siderada co+cl!=da at' &!e haSa pelo %e+os d!as i%ple%e+ta";es co%pletas das D!+cio+alidades da especiDica"#o. 3erE criada !%a s!=te de testes para veriDicar o D!+cio+a%e+to de todas as D!+cio6 +alidades +as d!as i%ple%e+ta";es. H o Setivo a&!i ' asseg!rar &!e a especiDica"#o pode ser i%ple%e+tada e !sada pelos a!tores t#o logo esteSa Di+ali(ada. ,ara as vers;es a+teriores da li+g!age% 9TFL$ a especiDica"#o Di+al era aprovada por !% co%itG do NKC a+tes %es%o de ser total%e+te i%ple%e+tada.

1.%.2 Sinta3e
> especiDica"#o para a 9TFL7 deDi+e !%a si+taAe &!e ' co%pat=vel ta+to co% a 9TFL &!a+to co% a R9TFL. Hs doc!%e+tos !sa+do a si+taAe 9TFL co% o tipo de F2FE text/html s#o parseados seg!+do regras co%pat=veis co% as at!ais i%ple%e+ta";es pop!lares. H serve a seg!ir !% eAe%plo de %arca"#o 9TFL)
<-./(T01% 2T34 15&4"( 6-//73(//.T. 2T34 8.91 Transitional//%)6 6http://www.w3.org/TR/html8/loose.dtd6> <html lang:6pt-br6> <head> <meta http-e#ui!:6(ontent-T'pe6 content:6text/html; charset:ut,-<6> <title>T=tulo da p>gina</title> <lin? rel:6st'lesheet6 t'pe:6text/css6 hre,:6/estilos/main.css6> </head> <bod'> <h1>3inha p>gina 2T348</h1> </bod'> </html>

#1

HTML 5

> seg!ir$ a %arca"#o 9TFL7 co%pat=vel co% a si+taAe 9TFL)

<-./(T01% html> <html lang:6pt-br6> <head> <meta charset:6ut,-<6> <title> T=tulo da p>gina </title> <lin? rel:6st'lesheet6 hre,:6/estilos/main.css6> </head> <bod'> <h1>3inha p>gina 2T34@</h1> </bod'> </html

1.%.2.1 6;!T=+'
> declara"#o ./(T01% Ltipo de doc!%e+toM deve ser Deita +a pri%eira li+ha da %arca"#o 9TFL para gara+tir re+deri(a"#o +o %odo sta+dard. ,ara %aiores i+Dor%a";es$ ver) http://mauAor.com/w3ctuto/#atips/doct'pe.html. Nada deverE eAistir aci%a da declara"#o de /HCTZ,E +e% %es%o !%a li+ha e% ra+co. EAiste% do(e diDere+tes /HCTZ,E3 para !so e% doc!%e+tos 9TFL e R9TFL e todos eles s#o ver osos e diD=ceis de se g!ardar +a %e%:ria. Todos eles Da(e% reDe6 rG+cia e co+tG% !% li+C apo+ta+do para !% doc!%e+to co% as regras de si+taAe para a vers#o 9TFL o! R9TFL +a &!al o doc!%e+to Doi escrito. E% 9TFL7 o ./(T01% Doi si%pliDicado$ +#o have+do %ais +ecessidade do li+C$ e o ./(T01% eAiste co% a I+ica D!+"#o de ha ilitar a re+deri(a"#o e% %odo sta+dard para doc!%e+tos escritos co% a si+taAe 9TFL. Hs +avegadores SE e+te+de% a declara"#o ./(T01% seg!+do a si+taAe 9TFL7.

1.%.2.2 !odi(icao de caracteres

> codiDica"#o de caracteres e% !% doc!%e+to .e pode ser Deita de trGs %a+eiras disti+tas)

Co% !so do parW%etro charset +o ca e"alho 9TT, (ontent-T'pe. Pso de !% caractere P+icode 4yte Hrder FarC L4HFM +o i+=cio do doc!6 %e+to. Pso do ele%e+to meta co% o atri !to charset.

!aptulo 1 J Apresentao da HTML5

#2

E% 9TFL7 a declara"#o da codiDica"#o de caracteres co% !so do ele%e+to meta Doi si%pliDicada$ pois +#o hE %ais a +ecessidade dos atri !tos http-e#ui! e content. Co+t!do$ co+v'% +otar &!e a si+taAe 9TFL8 para esse ele%e+to ta% '% ' vElida e% 9TFL7 e$ se vocG a preDerir$ pode !sE6la se% pro le%as. ,ara %aiores i+Dor%a6 ";es$ ver) http://www.w3.org/"nternational//-charset.

1.%.2.# 'lemento lin>

E% 9TFL7 o atri !to t'pe para li+Cs a Dolhas de estilos e para scripts ' dispe+sEvel$ %as a declara"#o desse atri !to pode ser !sada$ opcio+al%e+te$ e% 9TFL7.

1.& A HTML5 nos nave,adores atuais

/ese+volver !% proSeto .e e% 9TFL7 para os +avegadores at!ais ' !%a op"#o &!e pode ser co+sideradaV caso vocG decida por ela$ ' preciso levar e% co+ta alg!%as restri";es e %eca+is%os eAiste+tes para co+tor+E6las. > %aioria$ %as +#o todas as D!+cio+alidades da 9TFL7$ SE ' s!portada por !% o! %ais +avegadores at!aisV co+t!do$ eAiste% %eca+is%os dese+volvidos co% a li+g!age% <ava3cript &!e per%ite% detectar s!porte para as D!+cio+alidades cria+do co+di";es de o dese+volvedor oDerecer !% co+teIdo alter+ativo para !%a D!+cio+alidade +#o s!portada por esse o! a&!ele +avegador. YeSa%os a seg!ir alg!%as co+sidera";es so re esse te%a.

1.&.1 ;s novos elementos e o nternet '3plorer

> 9TFL7 crio! vErios ele%e+tos +ovos &!e +#o s#o estili(Eveis co% !so das C33 +os +avegadores 2+ter+et EAplorer +as vers;es a+teriores O vers#o 9$ pois esses +avegadores$ ao co+trErio dos +avegadores sta+dards$ +#o aplica% regras C33 a ele%e+tos &!e +#o co+hece%. E% !%a %arca"#o 9TFL$ se vocG resolver criar !% +ovo ele%e+to cha%ado xpto Lai+da &!e ele +#o seSa vElidoM e escrever !%a regra C33 co%o %ostrada a seg!ir$ o co+teIdo i+serido +o ele%e+to serE +or%al%e+te estili(ado +a cor ver%elha co% D!+do +a cor preta$ eAceto +os 2E8 e a+teriores.
xpto B color: red; bac?ground-color: blac?; C

3e vocG prete+de servir se! doc!%e+to 9TFL7 para a&!eles +avegadores$ precisa i+serir !% %eca+is%o capa( de Da(er co% &!e eles reco+he"a% os +ovos ele%e+tos

$0

HTML 5

da li+g!age%. Tal %eca+is%o ' oDerecido pelo %'todo create%lement*+ da <ava3cript$ co+Dor%e %ostrado a seg!ir)
<---Di, lte "% <E> <script>

document.createElement("xpto");
</script> <-Dendi,E-->

EAiste% aproAi%ada%e+te tri+ta +ovos ele%e+tos +a 9TFL7 e !%a alter+ativa para o script$ cria+do todos esses ele%e+tos i+divid!al%e+te da Dor%a co%o %os6 trada a+terior%e+teV Doi dese+volvida por *e%y 3harp &!e aprese+to! o script e% !%a %at'ria +o se! log$ dispo+=vel para co+s!lta e% http://rem'sharp.com/299F/91/9G/
html@-enabling-script/

H script de *e%y 3harp e+co+tra6se hospedado +o Qoogle e% e+dere"o pI licoV pode%os criar e% +ossos doc!%e+tos !% hotlink para o script$ i+seri+do6o +a se"#o head do doc!%e+to$ co%o %ostrado a seg!ir)
<---Di, lte "% <E> <script src:6http://html5shim.googlecode.com/svn/trunk/html5.js6></script> <-Dendi,E-->

1.&.2 ;s novos elementos e o modelo de renderi?ao

H!tro aspecto i%porta+te a co+siderar$ e esse vElido para todos os +avegadores$ ' &!e os +ovos ele%e+tos$ todos eles$ re+deri(a% se!s co+teIdos co%o ele%e+tos i+li+e$ pois os %odelos de co+teIdo da 9TFL7 s#o prEtica e co+ceit!al%e+te diDere+tes dos %odelos das 9TFL a+teriores. 3e &!iser%os &!e !% o! %ais dos +ovos ele%e+tos seSa% re+deri(ados seg!+do o co+ceito +=vel de loco da 9TFL8$ deve%os declarar eAplicita%e+te essa co+di"#o e% regra C33$ co+Dor%e %ostrado a seg!ir)
xpto B display: lock; C

1.&.# @i/lioteca AavaScript Moderni?r

Foder+i(r ' !%a pe&!e+a i lioteca <ava3cript &!e estE se+do co+sta+te%e+te at!ali(ada por se!s a!tores$ desti+ada a detectar s!porte +ativo pelos +avegadores para as D!+cio+alidades das +ovas tec+ologias para a .e . >s D!+cio+alidades co+te%pladas pela i lioteca s#o a&!elas &!e est#o se+do i%ple%e+tadas pelas especiDica";es para a 9TFL7 e para as C33K.

!aptulo 1 J Apresentao da HTML5

$1

> i lioteca Doi dese+volvida por 0ar!C >te\ co% a cola ora"#o de ,a!l 2rish e e+co+tra6se dispo+=vel para do.+load e% www.moderniHr.com. H script da i lioteca cria !% o Seto <ava3cript de+o%i+ado Foder+i(r e vE6 rias propriedades para esse o Seto. >s propriedades e %'todos criados tG% +o%es idG+ticos aos das +ovas D!+cio+alidades a detectar. H serve os eAe%plos a seg!ir)
3oderniHr.can!as; 3oderniHr.audio; 3oderniHr.borderradius; 3oderniHr.multiplebgs; // propriedade para !eri,icar suporte ao no!o elemento can!as // propriedade para !eri,icar suporte ao no!o elemento audio // propriedade para !eri,icar suporte a bordas arredondadas das (II3 // propriedade para !eri,icar suporte a m$ltiplos bac?grounds das (II3

P%a ve( li+Cada a i lioteca a !% doc!%e+to .e $ pode%os testar o s!porte a !%a +ova D!+cio+alidade$ co+Dor%e eAe%plo a seg!ir$ e% &!e testa%os o s!porte para o ele%e+to can!as.
i, *!oderni"r.canvas+ B // script para uso de can!as C else B alert*64amentoJ seu na!egador nKo suporta can!as6+; C

> i lioteca cria e adicio+a classes ao ele%e+to html$ oDerece+do ao dese+volvedor a possi ilidade de estili(ar diDere+ciada%e+te !% o! %ais ele%e+tos +a pEgi+a co+Dor%e o +avegador oDere"a o! +#o s!porte a deter%i+ada D!+cio+alidade. 3!po+ha o seg!i+te ce+Erio para eAe%pliDicar o !so dessas classes) 3e o +avegador oDerecer s!porte para %Iltiplos acCgro!+ds$ os parEgraDos do doc!%e+to ser#o +a cor ver%elhaV se +#o s!portar$ ser#o +a cor a(!l. > i lioteca ide+tiDica o s!porte pelo +avegador e acresce+ta a classe co% o +o%e multiplebgs ao ele%e+to html. N#o have+do s!porte$ o +o%e da classe acresce+tada ' no-multiplebgs e a Dolha de estilos para resolver o pro le%a proposto +o ce+Erio criado ')
<st'le>

.multiple gs p B color: red; C .no#multiple gs p B color: blue; C

</st'le>

Notar &!e o acr'sci%o da classe$ co%o %ostrado$ possi ilita !%a a!tG+tica co+6 dicio+al +a Dolha de estilos$ pois as regras %ostradas c!%pre% a %es%a Di+alidade da co+dicio+al %ostrada +o script a seg!ir.

$2
<script> !ar para : document.get%lements&'Tag)ame*6p6+;

HTML 5

i$ (!oderni"r.multiple gs) B
,or *!ar i:9; i<para.length; i + B paraDiE.st'le.color : 6red6; C

% else &
,or *!ar i:9; i<para.length; i + B paraDiE.st'le.color : 6blue6; C

%
</script>

H!tra D!+cio+alidade i%porta+te da i lioteca ' &!e ela agrego! o script de6 se+volvido por *e%y 3harp$ %ostrado +o ite% 1.1.8$ &!e Da( co% &!e o +avegador 2+ter+et EAplorer$ +as vers;es 8 e a+teriores$ reco+he"a$ para Di+s de aplica"#o de estili(a"#o$ os +ovos ele%e+tos da 9TFL7. >ssi%$ o !so da i lioteca dispe+sa o !so do script de *e%y 3harp. >t!al%e+te +#o eAiste !% e+dere"o pI lico de hospedage% da i lioteca para i+corporE6la aos +ossos doc!%e+tos co% !so de !% hotlink. YocG deverE Da(er o do.+load da i lioteca$ hospedE6la +o se! servidor e li+CE6la Os s!as pEgi+as$ co+Dor%e %ostrado a seg!ir)
<-./(T01% html> <html lang:6pt-br6> <head> ... <script src'"path/moderni"r#v.n.min.js"></script> </head> <bod'> ...

Faiores detalhes so re a i lioteca$ i+cl!i+do a rela"#o de todos os o Setos$ propriedades e classes por ela criadas e+co+tra%6se e% http://www.moderniHr.com/docs/.

1.1 Templates HTML5

> si+taAe 9TFL7 ' asta+te DleA=vel$ pois a %arca"#o pode ser escrita seg!+do as regras da 9TFL8 &!e ad%ite%$ por eAe%plo$ &!e valores de atri !to seSa% o! +#o %arcados co% aspas o! ap:stroDes$ &!e alg!%as tags$ co%o p e li$ +#o seSa% Dechadas e !%a s'rie de o!tras regras &!e d#o li erdade de escolha da %arca"#o co+Dor%e

!aptulo 1 J Apresentao da HTML5

$#

a preDerG+cia pessoal do a!tor. Escrever 9TFL7 co% ase +essas regras sig+iDica prod!(ir !% doc!%e+to 9TFL7$ o! e% co+Dor%idade co% a si+taAe 9TFL. ,or o!tro lado$ a 9TFL7 pode ta% '% seg!ir a si+taAe RFL e ser escrita seg!+do s!as regras &!e s#o e% r=gidas$ pois +#o ad%ite%$ por eAe%plo$ valores de atri !tos se% aspas o! ap:stroDes e tags se% Decha%e+to. 3e vocG dese+volve R9TFL$ deve estar e% Da%iliari(ado co% essa si+taAe. Escrever 9TFL7 co% ase +as regras da RFL sig+iDica prod!(ir !% doc!%e+to R9TFL7$ o! e% co+6 Dor%idade co% a si+taAe RFL. Nessa se"#o aprese+tare%os as Dor%as de escrever 9TFL7 seg!+do as diversas si+taAes per%itidas pela li+g!age%$ dese+volve+do alg!+s te%plates il!strativos. >+tes de passar%os aos te%plates$ Da"a%os alg!%as co+sidera";es so re a %arca"#o R9TFL. 3eSa vocG !% dese+volvedor eAperie+te$ seSa !% i+icia+te &!e cria co+teIdos co% !so de %arca"#o 9TFL$ ' &!ase certo &!e$ assi% co%o e!$ dese+volve se!s doc!%e+tos seg!+do as regras da R9TFL. EAiste% %ilh;es de pEgi+as +a 2+ter+et dese+volvidas co% essa %arca"#oV isso por&!e &!e% as crio! estava se prepara+do para o D!t!ro$ pois at' o i+=cio de 2005 o NKC alardeava &!e o D!t!ro da 9TFL era a R9TFL e &!e +#o haveria +ovas vers;es da 9TFL. H o Setivo do NKC ao criar a R9TFL Doi proporcio+ar %eios aos dese+volve6 dores de i+cl!ir as D!+cio+alidades da RFL +os doc!%e+tos para a .e . E% %ar"o de 2005$ Ti% 4er+ers6Lee p! lico! !% press release aDir%a+do o seg!i+te)
>p:s a p! lica"#o do 9TFL8 e seg!i+do as co+cl!s;es do NorCshop 1998$ o NKC Doco! +a tra+sDor%a"#o do 9TFL e% !% Dor%ato co% ase e% RFL cha%ado R9TFL devido aos e+eD=cios pr:prios do Dor%ato RFL. > pri%eira reco%e+da"#o R9TFL co%pleta Doi p! licada +o i+=cio de 2000. Co+t!do$ devido ao %aci"o legado do co+teIdo Ne $ co% ase e% varia";es do 9TFL$ os Da rica+tes de +avegadores co%e"ara% vagarosa%e+te a adotar o R9TFL. 2sso res!lto! e% po!ca %otiva"#o para os dese+volvedores de co+teIdos adotar o R9TFL e% se! a% ie+te tradicio+al de dese+volvi%e+to. EApoe+tes das co%!+idades de dese+volvedores e de desig+ apelara% ao NKC para a +ecessidade !rge+te de !%a revis#o dos se!s co%pro%issos co% o 9TFL$ acresce+ta+do +ovas D!+cio+alidades La co%e"ar co% a Nor%a para 9TFL8M e% !%a %a+eira &!e seSa co+siste+te co% as prEticas da co%!+idade e ao %es%o te%po retroco%pat=veis. H NKC gara+tirE i+teropera ilidade por %eio da i%ple%e+ta"#o de s!=tes de testes ro !stas e de servi"os de valida"#o para as D!t!ras tec+ologias e &!e estar#o O disposi"#o da co%!+idade.

$$

HTML 5 H NKC co% o Dorte s!porte dos se!s Fe% ros e co% %ais rec!rsos Lta+to e% pessoal &!a+to e% hard.areM te% o pra(er de reto%ar os tra alhos para o 9TFL. H NKC %odiDico! os Estat!tos do Qr!po de Tra alho do 9TFL co% o prop:sito de per%itir a eDetiva participa"#o dos Da rica+tes de +avegadores$ proSetistas de aplica";es e dese+volvedores de co+teIdos$ pois depe+de do tra alho co+S!+to dessas pessoas o s!cesso do 9TFL do D!t!ro.

Estava decretada a %orte da R9TFL e% Davor da 9TFL7. Co+t!do$ o legado da R9TFL per%a+ece e vocG &!e SE se acost!%o! co% a si+taAe r=gida da %ar6 ca"#o +#o terE de rever o &!e apre+de!$ pois ela co+ti+!a perDeita%e+te vElida +a 9TFL7$ assi% co%o ' vElida ta% '% a si+taAe 9TFL8 %!ito %e+os r=gida e %ais co%place+te do &!e a da R9TFL. P% doc!%e+to R9TFL para ser p!ro e poder se e+eDiciar das D!+cio+alidades da RFL ? e Doi para isso &!e a R9TFL Doi criada ? deve ser servido co% o tipo de F2FE application/xml o! application/xhtml xml. Co+t!do$ a %aioria dos doc!%e+tos R9TFL +a .e ' servida co% o tipo F2FE para 9TFL text/html$ o &!e sig+iDica &!e +#o s#o co+Dor%es co% a RFL. > te+tativa de o NKC evol!ir a 9TFL para co+Dor%idade co% RFL Dracasso!$ por&!e pEgi+as R9TFL servidas co%o RFL &!e co+te+ha% &!al&!er viola"#o co% a si+taAe RFL ca!sar#o !% erro Datal de parsea%e+to e a pEgi+a si%ples%e+te +#o serE re+deri(ada. ,or o!tro lado$ apesar da rigide( co% o trata%e+to de erros$ a si+taAe R9TFL Doi e% rece ida pelos dese+volvedores e ' a%pla%e+te !sada. H serve a %arca"#o R9TFL a seg!ir)
()php header(*+ontent#,ype: application/xhtml-xml*); ).
<-./(T01% html 15&4"( 6-//73(//.T. L2T34 1.9 Transitional//%)6 6http://www.w3.org/TR/xhtml1/.T./xhtml1-transitional.dtd6> <html xmlns:6http://www.w3.org/1FFF/xhtml6> <head> <meta http-e#ui!:6(ontent-T'pe6 content:6text/html; charset:ut,-<6 /> <title>1>gina L2T34</title> <st'le t'pe:6text/css6 media:6all6> /M regras de estilo M/ </st'le> </head> <bod'> <h1>1>gina com marcaNKo L2T34</h1> <p>%ssa p>gina contOm marcaNKo L2T34 <strong class:6desta#ue6>sem erros</strong></p>

!aptulo 1 J Apresentao da HTML5

<p>Poi ser!ida com tipo de 3"3% <code>application/xhtml xml</code></p> </bod'> </html>

$5

,ara de%o+strar o eAe%plo &!e dese+volve%os$ i+seri%os +a pri%eira li+ha da pEgi+a co+te+do a %arca"#o R9TFL a D!+"#o header*+ do ,9,$ co% a Di+alidade de servir a pEgi+a co%o aplica"#o RFL. H doc!%e+to estE de acordo co% a si+taAe RFL e serE re+deri(ado +or%al%e+te e% +avegadores &!e s!porta% RFL. Ya%os s!por &!e o dese+volvedor do eAe%plo te+ha se es&!ecido de !sar aspas +o valor desta#ue da classe para o ele%e+to strong i+serido +o pri%eiro parEgraDo$ co%o %ostrado a seg!ir.
<p>%ssa p>gina contOm marcaNKo L2T34 <strong class:desta/ue>sem erros</strong></p>

3e o doc!%e+to Dor servido co% o tipo de F2FE text/html$ o erro de %arca"#o serE ig+orado pelo +avegador e a re+deri(a"#o do doc!%e+to serE +or%al. Co+t!do$ servi+do o doc!%e+to co%o RFL co% o tipo de F2FE application/xml o! application/ xhtml xml o erro serE Datal e +#o haverE re+deri(a"#o$ co+Dor%e Dig!ras 1.1 e 1.2. Na Dig!ra 1.1 %ostra%os a +#o re+deri(a"#o da pEgi+a +os +avegadores 0ireDoA e 3aDari.

!igura " " # $rro em %ocumento &HTML em na'ega%or stan%ar%

$%

HTML 5

Notar &!e +#o hE !% padr#o de aprese+ta"#o da %e+sage% de erro$ a %a+ei6 ra de aprese+tE6lo ao !s!Erio diDere de !% +avegador para o!tro. H +avegador Hpera$ ao aprese+tar a %e+sage% de erro$ oDerece adicio+al%e+te !% li+C para a re+deri(a"#o da pEgi+a co%o se o erro +#o eAistisse. ,or o!tro lado$ o +avegador 2+ter+et EAplorer$ &!e +#o oDerece s!porte para RFL$ co%porta6se aprese+ta+do ao !s!Erio !%a caiAa de diElogo co% op"#o de a rir o ar&!ivo co% o!tro progra%a o! salvE6lo L0ig!ra 1.2M.

!igura " ( # $rro em %ocumento &HTML no )$

Essa rigide( +o trata%e+to de erros co+tri !i! %!ito para a +#o ado"#o da R9TFL co%o RFL pelos dese+volvedores. Esti%a6se &!e %ais de 97] das pEgi6 +as .e co+te+ha% pelo %e+os !% erro de %arca"#o. ^!e% se arriscaria a ter se! site T&!e radoU por co+ta de !%a distra"#o o! !% %=+i%o e+ga+o i+vol!+tErio[

1.1.1 Template mnimo

E% 9TFL7$ !% doc!%e+to para ser vElido$ al'% do /HCTZ,E$ deve co+ter o ele%e+to title e +ada %ais. >ssi%$ !% te%plate %=+i%o da 9TFL7 pode ser es6 tr!t!rado da seg!i+te Dor%a)
<-./(T01% html> <title>Template</title> <--- Q#ui os conteudos da pagina -->

!aptulo 1 J Apresentao da HTML5

$&

> %arca"#o %ostrada a+terior%e+te valida co%o 9TFL7$ co+t!do a %arca"#o a seg!ir +#o valida.
<-./(T01% html> <title>Template</title> <--- Q#ui os conte$dos da p>gina -->

Notar &!e +a pri%eira %arca"#o o co%e+tErio 9TFL i+serido +a Ilti%a li+ha do c:digo %ostrado co+t'% !% teAto +#o ace+t!ado e +a seg!+da %arca"#o o teAto Doi ace+t!ado. H !so de caracteres +#o >3C22 Ltais co%o ace+t!a"#oM +a %arca"#o 9TFL7$ %es%o e% co%e+tErios$ o riga &!e se declare eAplicita%e+te a codiDica"#o de ca6 racteres. 3e isso +#o Dor Deito$ a re+deri(a"#o dos caracteres +#o >3C22 serE tr!+cada e o doc!%e+to +#o passarE +o validador. >ssi%$ chega%os ao te%plate %=+i%o$ co+Dor%e %ostrado a seg!ir)
<-./(T01% html> <title>Template</title> <meta charset:ut,-<> <--- Q#ui os conte$dos da p>gina -->

evide+te &!e esse te%plate %=+i%o +#o deve ser !sado e% !% site real$ %as vocG poderE !sE6lo para testes e eAperiG+cias co% a li+g!age% 9TFL7. > si+taAe para /HCTZ,E ' case i+se+sitive L+#o disti+g!e %i+Isc!las de %ai6 Isc!lasM$ o &!e sig+iDica &!e &!al&!er !%a das si+taAes seg!i+tes ' perDeita%e+te vElida.
<-./(T01% html> <-doct'pe html> <-./(T01% 2T34> <-doct'pe 2T34> <-.oct'1% hT3l>

>pesar da DleAi ilidade co% a si+taAe$ aco+selho a !sar a pri%eira o! a seg!+6 da Dor%a %ostrada$ &!e s#o a&!elas preDeridas pela %aioria dos dese+volvedores. Escolha e+tre as d!as a &!e %ais lhe agrada e siga co% ela. %!ito provEvel &!e vocG esteSa Da%iliari(ado co% !%a si+taAe 9TFL para declara"#o de caracteres +o doc!%e+to co% o !so do ele%e+to meta$ co+Dor%e %ostrado a seg!ir.
<meta http-e#ui!:6(ontent-T'pe6 content:6text/html; charset:ut,-<6>

$1

HTML 5

Na si+taAe 9TFL7$ essa declara"#o Doi a reviada para)

<meta charset:ut,-<>

,elo pri+c=pio da co%pati ilidade$ a 9TFL7 co+ti+!a a oDerecer s!porte para a si+taAe da 9TFL e vocG$ se preDerir$ pode !sE6la +os doc!%e+tos +ovos o! deiAE6la co%o estE +os doc!%e+tos eAiste+tes %igrados para a 9TFL7. Tal co%o +a 9TFL$ e% 9TFL7 o !so de aspas o! ap:stroDes +os valores dos atri !tos ' Dac!ltativoV assi%$ as d!as si+taAes %ostradas a seg!ir s#o vElidas.
<meta charset:ut,-<> <meta charset:6ut,-<6>

Co%o SE disse%os$ a si+taAe 9TFL7 ' co%pat=vel ta+to co% a 9TFL &!a+to co% a R9TFLV porta+to$ se vocG estE cria+do !% doc!%e+to R9TFL$ terE de Dechar as tags e !sar aspas e% +o%es de atri !to. /everE escrever co%o %ostrado a seg!ir)
<meta charset:6ut,-<6 />

1.1.2 Template HTML5 B verso 1

> seg!ir$ va%os eAa%i+ar e co%e+tar !% te%plate 9TFL7 co% ase e% si+taAe 9TFL8. > se"#o head de !% doc!%e+to 9TFL7 deve co+ter o rigatoria%e+te o ele%e+to title e opcio+al%e+te s#o ad%itidos os seg!i+tes ele%e+tos +a&!ela se"#o) base$ command$ lin?$ meta$ noscript$ script$ st'le. /esses sete ele%e+tos opcio+ais ape+as o ele%e+to command +#o ' previsto +as vers;es a+teriores da li+g!age% 9TFL$ pois se trata de !% +ovo ele%e+to da 9TFL7.
E% aplica";es &!e SE poss!e% !% t=t!lo i+tr=+seco$ por eAe%plo$ !% e6%ail escrito e% 9TFL &!e SE te% !% ca%po desti+ado ao ass!+to$ o ele%e+to title pode ser dispe+sado.

H serve a %arca"#o a seg!ir)

<-./(T01% html> <html lang:6pt-br6> <head> <meta charset:6ut,-<6> <title>Template</title> <meta name:6description6 content:6Template 2T34@ do li!ro do 3auAor.6> <meta name:6?e'words6 content:6lista de pala!ras-cha!e6>

!aptulo 1 J Apresentao da HTML5

<meta name:6author6 content:63auricio Iam' Iil!a6> <meta name:6generator6 content:62T34-Rit 2F26> <meta name:6robots6 content:6all6> <lin? rel:6st'lesheet6 hre,:6mais.css6> <st'le> /M estilos incorporados M/ </st'le> <script src:6path/moderniHr-1.@.min.As6></script> <script src:6scripts.As6></script> </head> <bod'> <--- Q#ui os conte$dos da p>gina --> </bod'> </html>

$2

H ele%e+to meta desti+a6se a Dor+ecer %etadados$ o! seSa$ i+Dor%a";es adicio+ais so re a pEgi+a. 2+Dor%a";es essas &!e +#o pode% ser tra+s%itidas co% !so dos de%ais ele%e+tos per%itidos +a se"#o head do doc!%e+to. Hs atri !tos previstos +as especiDica";es da 9TFL7 para o ele%e+to meta s#o) name$ http-e#ui!$ content e charset$ al'% dos atri !tos glo ais. 3e%pre &!e o atri !to name o! http-e#ui! Dor deDi+ido$ deve6se deDi+ir ta% '% o atri !to content. Nesses casos$ o %etadado ' do tipo par +o%e/valor +o &!al o valor do atri !to name ' o +o%e +o par e o valor do atri !to content ' o valor +o par. > &!a+tidade de ele%e+tos meta a i+serir +a se"#o head do doc!%e+to e o tipo de %etadado a codiDicar s#o D!+";es de cada proSetoV +o eAe%plo %ostrado$ os ele%e+tos Dora% i+seridos ape+as a t=t!lo de il!stra"#o$ assi% a&!ela se"#o +#o prete+de ser !% g!ia r=gido de %etadados. No eAe%plo$ i+seri%os +a se"#o head$ ta% '% a t=t!lo de il!stra"#o$ os ele%e+tos lin?$ st'le e script. Notar &!e todos os valores de atri !tos +a %arca"#o %ostrada est#o e+tre aspas.

1.1.# Template HTML5 B verso 2

Ya%os eAa%i+ar e co%e+tar a seg!ir !% te%plate 9TFL7 idG+tico ao te%plate %ostrado +o ite% a+terior$ ta% '% co% ase e% si+taAe 9TFL8. H serve a %arca"#o a seg!ir)
<-./(T01% html> <html lang:pt-br>

50
<head> <meta charset:ut,-<> <title>Template</title> <meta name:description content:6Template 2T34@ do li!ro do 3auAor.6> <meta name:?e'words content:6lista de pala!ras-cha!e6> <meta name:author content:63auricio Iam' Iil!a6> <meta name:generator content:62T34-Rit 2F26> <meta name:robots content:all> <lin? rel:st'lesheet hre,:mais.css> <st'le> /M estilos incorporados M/ </st'le> <script src:6path/moderniHr-1.@.min.As6></script> <script src:scripts.As></script> </head> <bod'> <--- Q#ui os conte$dos da p>gina --> </bod'> </html>

HTML 5

Nessa vers#o %ostra%os a si+taAe alter+ativa &!e ad%ite valores de atri !tos se% aspas. Fas por &!e co+serva%os as aspas e% alg!+s valores do atri !to content[ Notar &!e para os casos e% &!e isso ocorre! o valor do atri !to ' !%a Drase o! co+S!+to de palavras separadas por espa"os e$ se tirar%os as aspas$ o valor do atri !to deiAa de ser I+ico$ o &!e +#o ' vElido. Co% aspas$ o parser 9TFL i+terpreta o valor do atri !to co%o !%a s: stri+g. Notar &!e$ para o ele%e+to meta &!e Dor+ece i+Dor%a6 ";es para os ro 1s &!e visita% a pEgi+a$ o valor do atri !to content estE se% aspas$ pois tal valor ' !%a s: palavra.

1.1.$ Template 4HTML5 B verso 1

Ya%os eAa%i+ar e co%e+tar a seg!ir !% te%plate R9TFL7 co% ase e% si+taAe RFL e desti+ado a ser servido co% o tipo de F2FE text/html. H serve a %arca"#o a seg!ir)
<-./(T01% html> <html lang:6pt-br6> <head> <meta charset:6ut,-<6 /> <title>Template</title>

!aptulo 1 J Apresentao da HTML5

<meta name:6description6 content:6Template 2T34@ do li!ro do 3auAor.6 /> <meta name:6?e'words6 content:6lista de pala!ras-cha!e6 /> <meta name:6author6 content:63auricio Iam' Iil!a6 /> <meta name:6generator6 content:62T34-Rit 2F26 /> <meta name:6robots6 content:6all6 /> <lin? rel:6st'lesheet6 hre,:6mais.css6> <st'le> /M estilos incorporados M/ </st'le> <script src:6path/moderniHr-1.@.min.As6></script> <script src:6scripts.As6></script> </head> <bod'> <--- Q#ui os conte$dos da p>gina --> </bod'> </html>

51

Nessa vers#o o te%plate ' co%pat=vel co% a si+taAe RFL$ pois valores de atri !to est#o e+tre aspas e ele%e+tos va(ios est#o Dechados. Co+v'% ressaltar &!e$ e% ora escrito co% a si+taAe RFL$ o te%plate +#o estE apto a se valer das D!+cio+alidades da RFL e deverE ser servido co% o tipo de F2FE text/html.

1.1.5 Template 4HTML5 B verso 2

Ya%os eAa%i+ar e co%e+tar !% te%plate R9TFL7 co% ase e% si+taAe RFL$ desti+ado a ser servido co% o tipo de F2FE application/xml o! application/xhtml xml. H serve a %arca"#o a seg!ir)
(012+,34E html. (html lang'"pt# r".
<html xmlns:6http://www.w3.org/1FFF/xhtml6 xml:lang:6pt-br6> <head>

(meta charset'"ut$#5" /.
<title>Template</title> <meta name:6description6 content:6Template 2T34@ do li!ro do 3auAor.6 /> <meta name:6?e'words6 content:6lista de pala!ras-cha!e6 /> <meta name:6author6 content:63auricio Iam' Iil!a6 /> <meta name:6generator6 content:62T34-Rit 2F26 /> <meta name:6robots6 content:6all6 /> <lin? rel:6st'lesheet6 hre,:6mais.css6 /> <st'le> /M estilos incorporados M/ </st'le>

52
<script src:6path/moderniHr-1.@.min.As6></script> <script src:6scripts.As6></script> </head> <bod'> <--- Q#ui os conte$dos da p>gina --> </bod'> </html>

HTML 5

Nessa vers#o o te%plate ' co%pat=vel co% a si+taAe RFL e apto a valer6se das D!+cio+alidades da RFL deve+do ser servido co% o tipo de F2FE application/xml o! application/xhtml xml. E% doc!%e+tos RFL$ +#o hE +ecessidade da declara"#o de /HCTZ,E$ pois por padr#o a re+deri(a"#o aco+tece e% %odo sta+dard. Ta% '% +#o hE +ecessidade de declara"#o da codiDica"#o de caracteres$ pois por padr#o ela ' e% PT068. Co+t!do$ ' i+dispe+sEvel &!e se declare o atri !to xmlns +o ele%e+to6rai( do doc!%e+to apo+ta+do para o ar&!ivo &!e co+t'% o +a%espace para RFL. Notar ai+da &!e o atri !to para deDi+i"#o do pri+cipal idio%a +o &!al os co+teIdos do doc!%e+to Dora% escritos ' xml:lang e +#o lang co%o +a si+taAe 9TFL.

1.1.% Template 4HTML5 B verso #

Co% a chegada da 9TFL7$ o Co+s:rcio NKC crio! o co+ceito de %arca"#o poliglota e p! lico! especiDica";es e diretri(es para a cria"#o de tal %arca"#o. >s especiDica";es deDi+e% %arca"#o poliglota assi%)
/oc!%e+to &!e !sa %arca"#o poliglota ' !% doc!%e+to 9TFL7$ &!e '$ ao %es%o te%po$ !% doc!%e+to 9TFL e RFL escrito co+Dor%e !% co+S!+to de regras deDi+idas. Farca"#o poliglota ' processada e co%pat=vel co% a 9TFL e co% a R9TFL$ seg!+do as regras das especiDica";es para a 9TFL7.

Nessa vers#o o te%plate !sa !%a %arca"#o poliglota$ co+Dor%e seg!e)

(012+,34E html.
<html xmlns:6http://www.w3.org/1FFF/xhtml6 lang:6pt-br6 xml:lang:6pt-br6> <head>

(meta charset'"ut$#5" /.
<title>Template</title> <meta name:6description6 content:6Template 2T34@ do li!ro do 3auAor.6 /> <meta name:6?e'words6 content:6lista de pala!ras-cha!e6 /> <meta name:6author6 content:63auricio Iam' Iil!a6 /> <meta name:6generator6 content:62T34-Rit 2F26 />

!aptulo 1 J Apresentao da HTML5

<meta name:6robots6 content:6all6 /> <lin? rel:6st'lesheet6 hre,:6mais.css6 /> <st'le> /M estilos incorporados M/ </st'le> <script src:6path/moderniHr-1.@.min.As6></script> <script src:6scripts.As6></script> </head> <bod'> <--- Q#ui os conte$dos da p>gina --> </bod'> </html>

5#

> %arca"#o poliglota deve satisDa(er aos seg!i+tes re&!isitos) H /HCTZ,E$ co%o prevG a RFL$ deve ser declarado e% %aiIsc!las e o ht%l &!e se seg!e ao /HCTZ,E deve ser e% %i+Isc!las. Le% re6se de &!e e% 9TFL a si+taAe ' i+se+s=vel ao ta%a+ho de caiAa$ %as e% %arca"#o poliglota ' r=gida. Hs ele%e+tos html$ head$ title e bod' deve% o rigatoria%e+te co+star da %arca"#o. H ele%e+to html deve o rigatoria%e+te co+ter os atri !tos xmlns$ lang e xml:lang. Hs +a%espaces RFL per%itidos e% %arca"#o poliglota s#o a&!eles para as tec+ologias 3YQ e FathFL e deve% ser declarados +os ele%e+tos s!g e math res6 pectiva%e+te$ co+Dor%e si+taAe %ostrada a seg!ir)
<s!g xmlns : 6http://www.w3.org/2999/s!g6>...</s!g> <math xmlns:6http://www.w3.org/1FF</3ath/3ath346>...</math>

H o!tro +a%espace per%itido ' para xlin? &!e pode ser declarado ta+to +o ele%e+to html &!a+to +o ele%e+to s!g &!e co+te+ha essa D!+cio+alidade$ co%o %ostrado a seg!ir)
<html xmlns:6http://www.w3.org/1FFF/xhtml6 xmlns:xlin?:6http://www.w3.org/1FFF/xlin?6 lang:6pt-br6 xml:lang:6pt-br6>

o!
<s!g xmlns:xlin?:6http://www.w3.org/1FFF/xlin?6>...</s!g>

> declara"#o de caracteres deve co+star da se"#o head do doc!%e+to. > si+taAe da %arca"#o deve seg!ir as regras da RFL. ,ara %aiores i+Dor%a";es so re si+taAe RFL$ co+s!lte) http://www.mauAor.com/w3c/xhtml19S2ed.html e http://www.mauAor.
com/w3ctuto/xhtml,a#.html.