Post on 01-Mar-2016
description
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 1/70
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 2/70
GUIA DE REFERÊNCIA
Índice
Parte 1: Markup
Visão geral do HTML5.1.
Análise do suporte atual pelos navegadores e estratégias de uso2.
Estrutura ásica! "#$T%&E e c'arsets(. Modelos de conte)do*.
+ovos ele,entos e atriutos5.
Ele,entos ,odi-icados e ausentes.
Parte 2: Formulários e Multimídia
+ovos tipos de ca,pos/.
Tipos de dados e validadores0. "etal'es e conte)do editável ..
"ragndrop e corre3ão ortográ-ica14.
Ele,entos audio e video! e codecs11.
Ele,ento device e trea, A&6 12.
Parte 3: A nova geração de aplicações e! "
Mat'ML e V71(.
$anvas A&6 1*.
erversent events15.
"#M e HTML51.
+ovos eventos "#M 1/.
Menus e toolars10.
Tipos de lin8s1.
Parte #: A nova geração de aplicações e! ""
Microdata24.
Hist9rico de sessão e A&6 torage21.
Aplica3:es o--line22.
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 3/70
croll in to vie; e 'idden2(.
7eolocation A&6 2*.
<ndo25.
Sobre esse conteúdo
! "isie foi escolhida pelo #$% do &rasil para ministrar um treinamento sobre '()*5 para os
seus membros e al+uns con,idados. -ara tanto construmos uma apostila com todo o contedo
abordado neste nosso curso. ssa apostila est sendo a+ora publicada sob %reati,e %ommons
a3ui no (ableless. speramos 3ue a4ude a comunidade de desen,ol,imento eb brasileira.
ssa apostila ficar em processo de constante atuali6ao 4 3ue muitos pontos do '()*5 no
foram ainda definidos e tambm por3ue di,ersas outras caractersticas esto sendo plane4adas e
rascunhadas ainda. e ,ocê ti,er 3ual3uer su+esto por fa,or nos contacte.
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 4/70
VISÃO GERAL DO HTML5
;e acordo com o #$% a #eb baseada em $ pilares:
<, es=ue,a de no,es para locali>a3ão de -ontes de in-or,a3ão na ?e! esse es=ue,a c'a,ase <@6.
<, &rotocolo de acesso para acessar estas -ontes! 'oe o HTT&.
<,a linguage, de HBperteCto! para a -ácil navega3ão entre as -ontes de in-or,a3ãoD o HTML.
"amos nos focar no terceiro pilar o '()*.
HBperteCto'()* uma abre,iao de '<perte=t )ar>up *an+ua+e ? *in+ua+em de )arcao de
'<perte=to. Resumindo em uma frase: o '()* uma lin+ua+em para publicao de contedo
@te=to ima+em ,deo udio e etcA na #eb.
B '()* baseado no conceito de 'iperte=to. 'iperte=to so con4untos de elementos C ou nós
C li+ados por cone=Des. stes elementos podem ser pala,ras ima+ens ,deos udio
documentos etc. stes elementos conectados formam uma +rande rede de informao. les no
esto conectados linearmente como se fossem te=tos de um li,ro onde um assunto li+ado ao
outro se+uidamente. ! cone=o feita em um hiperte=to al+o impre,isto 3ue permite a
comunicao de dados or+ani6ando conhecimentos e +uardando informaDes relacionadas.
-ara distribuir informao de uma maneira +lobal necessrio ha,er uma lin+ua+em 3ue se4a
entendida uni,ersalmente por di,ersos meios de acesso. B '()* se propDe a ser esta
lin+ua+em.
;esen,ol,ido ori+inalmente por (im &erners?*ee o '()* +anhou popularidade 3uando o
)osaic ? broser desen,ol,ido por )arc !ndreessen na dcada de 1990 ? +anhou fora. ! partir
da desen,ol,edores e fabricantes de brosers utili6aram o '()* como base compartilhando
as mesmas con,enDes.
# co,e3o e a interoperailidadentre 199$ e 1995 o '()* +anhou as ,ersDes '()*E '()*2.0 e '()*$.0 onde foram
propostas di,ersas mudanas para enri3uecer as possibilidades da lin+ua+em. %ontudo at a3ui
o '()* ainda no era tratado como um padro. !penas em 1997 o +rupo de trabalho do #$%
respons,el por manter o padro do cFdi+o trabalhou na ,erso $.2 da lin+ua+em fa6endo com
3ue ela fosse tratada como prtica comum. "ocê pode ,er: http://.$.or+/(R/html01
/appendi=/chan+es.html.
;esde o comeo o '()* foi criado para ser uma lin+ua+em independente de plataformas
brosers e outros meios de acesso. Hnteroperabilidade si+nifica menos custo. "ocê cria apenas
um cFdi+o '()* e este cFdi+o pode ser lido por di,ersos meios ao in,s de ,ersDes diferentes
para di,ersos dispositi,os. ;essa forma e,itou?se 3ue a #eb fosse desen,ol,ida em uma base
proprietria com formatos incompat,eis e limitada.
-or isso o '()* foi desen,ol,ido para 3ue essa barreira fosse ultrapassada fa6endo com 3ue a
informao publicada por meio deste cFdi+o fosse acess,el por dispositi,os e outros meios com
caractersticas diferentes no importando o tamanho da tela resoluo ,ariao de cor.
;ispositi,os prFprios para deficientes ,isuais e auditi,os ou dispositi,os mF,eis e portteis. B
'()* de,e ser entendido uni,ersalmente dando a possibilidade para a reutili6ao dessa
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 5/70
informao de acordo com as limitaDes de cada meio de acesso.
?HAT ?or8ing 7roupn3uanto o #$% foca,a suas atenDes para a criao da se+unda ,erso do I'()* um +rupo
chamado #eb '<perte=t !pplication (echnolo+< #or>in+ Group ou #'!(#G trabalha,a em
uma ,erso do '()* 3ue tra6ia mais fle=ibilidade para a produo de ebsites e sistemas
baseados na eb.
B #'!(#G @http://.hat+.or+/A foi fundado por desen,ol,edores de empresas como
)o6illa !pple e Bpera em 200. les no esta,am feli6es com o caminho 3ue a #eb toma,a e
nem com o rumo dado ao I'()*. -or isso estas or+ani6aDes se 4untaram para escre,er o 3ue
seria chamado ho4e de '()*5.
ntre outros assuntos 3ue o #'!(#G se foca,a era #eb Jorms 2.0 3ue foi includo no
'()*5 e o #eb %ontrols 1.0 3ue foi abandonado por en3uanto.
! participao no +rupo li,re e ,ocê pode se inscre,er na lista de email para contribuir.
-or ,olta de 200 o trabalho do #'!(#G passou ser conhecido pelo mundo e principalmente
pelo #$% ? 3ue at ento trabalha,am separadamente ? 3ue reconheceu todo o trabalho do
+rupo. m Butubro de 200 (im &erners?*ee anunciou 3ue trabalharia 4untamente com o#'!(#G na produo do '()*5 em detrimento do I'()* 2. %ontudo o I'()*
continuaria sendo mantido paralelamente de acordo comas mudanas causadas no '()*. B
+rupo 3ue esta,a cuidando especificamente do I'()* 2 foi descontinuado em 2009.
# HTML5 e suas ,udan3asKuando o '()* foi lanado o #$% alertou os desen,ol,edores sobre al+umas boas prticas
3ue de,eriam ser se+uidas ao produ6ir cFdi+os client?side. ;esde este tempo assuntos como a
separao da estrutura do cFdi+o com a formatao e princpios de acessibilidade foram tra6idos
para discussDes e L ateno dos fabricantes e desen,ol,edores.
%ontudo o '()* ainda no tra6ia diferencial real para a semMntica do cFdi+o. o '()*tambm no facilita,a a manipulao dos elementos ,ia Na,ascript ou %. e ,ocê 3uisesse
criar um sistema com a possibilidade de ;ra+On ;rop de elementos era necessrio criar um
+rande script com bu+s e 3ue muitas ,e6es no funciona,am de acordo em todos os brosers.
O que é o HTML5?
B '()*5 a no,a ,erso do '()*. n3uanto o #'!(#G define as re+ras de marcao
3ue usaremos no '()*5 e no I'()* eles tambm definem !-Hs 3ue formaro a base da
ar3uitetura eb. ssas !-Hs so conhecidas como DOM Level 0.
Pm dos principais ob4eti,os do '()*5 facilitar a manipulao do elemento possibilitando o
desen,ol,edor a modificar as caractersticas dos ob4etos de forma no intrusi,a e de maneira 3ue
se4a transparente para o usurio final.
!o contrrio das ,ersDes anteriores o '()*5 fornece ferramentas para a % e o Na,ascript
fa6erem seu trabalho da melhor maneira poss,el. B '()*5 permite por meio de suas !-Hs a
manipulao das caractersticas destes elementos de forma 3ue o ebsite ou a aplicao
continue le,e e funcional.
B '()*5 tambm cria no,as ta+s e modifica a funo de outras. !s ,ersDes anti+as do '()*
no continham um padro uni,ersal para a criao de seDes comuns e especficas como rodap
cabealho sidebar menus e etc. Qo ha,ia um padro de nomenclatura de H;s %lasses ou ta+s.
Qo ha,ia um mtodo de capturar de maneira automtica as informaDes locali6adas nos rodaps
dos ebsites.
' outros elementos e atributos 3ue sua funo e si+nificado foram modificados e 3ue a+ora
podem ser reutili6ados de forma mais efica6. -or e=emplo elementos como & ou H 3ue foram
descontinuados em ,ersDes anteriores do '()* a+ora assumem funDes diferentes e entre+am
mais si+nificado para os usurios.
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 6/70
B '()*5 modifica a forma de como escre,emos cFdi+o e or+ani6amos a informao na p+ina.
eria mais semMntica com menos cFdi+o. eria mais interati,idade sem a necessidade de
instalao de plu+ins e perda de performance. a criao de cFdi+o interoper,el pronto para
futuros dispositi,os e 3ue facilita a reutili6ao da informao de di,ersas formas.
B #'!(#G tem mantido o foco para manter a retrocompatibilidade. Qenhum site de,er ter de
ser refeito totalmente para se ade3uar aos no,os conceitos e re+ras. B '()*5 est sendo criado
para 3ue se4a compat,el com os brosers recentes possibilitando a utili6ao das no,as
caractersticas imediatamente.
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 7/70
ANÁLISE DO SUPORTE ATUAL PELOSNAVEGADORES E ESTRATÉGIAS DE USO
# desenvolvi,ento ,odular !nti+amente para 3ue uma no,a ,erso do '()* ou do % fosse lanada todas as ideias
listadas na especificao de,eriam ser testadas e desen,ol,idas para ento serem publicadas para
o uso dos brosers e os desen,ol,edores.
sse mtodo foi mudado com o lanamento do '()*5 e o %$. ! partir de a+ora as duas
tecnolo+ias foram di,ididas em mFdulos. Hsso 3uer di6er 3ue a comunidade de desen,ol,edores
e os fabricantes de brosers no precisam esperar 3ue todo o padro se4a escrito e publicado para utili6arem as no,idades das lin+ua+ens.
!s propriedades do %$ por e=emplo foram di,ididas em pe3uenos +rupos. ' um +rupo
cuidando da propriedade &ac>+round outro da propriedade &order outro das propriedades de
(e=to e etc. %ada um destes +rupos so independentes e podem lanar suas no,idades a 3ual3uer
momento. *o+o o desen,ol,imento para eb ficou mais dinMmico com no,idades mais
constantes.
B ponto ne+ati,o nesse formato 3ue problemas de compatibilidade podem ocorrer com mais
fre3uencia. -or e=emplo um broser pode adotar bordas arredondadas e outro no. Bu um
broser pode escolher suportar um !-H diferente do !-H 3ue o concorrente implementou.
%ontudo os brosers tem mostrado +rande interesse em se manterem atuali6ados em relao aos
seus concorrentes.
Motores de @enderi>a3ão' uma +rande di,ersidade de dispositi,os 3ue acessam a internet. ntre eles h uma srie de
tablets smartphones pcSs e etc. %ada um destes meios de acesso utili6am um determinado
broser para na,e+ar na eb. Qo h como os desen,ol,edores manterem um bom n,el de
compatibilidade com todos estes brosers le,ando em considerao a particularidade de cada
um. Pma maneira mais se+ura de manter o cFdi+o compat,el ni,elar o desen,ol,imento
pelos motores de renderi6ao. %ada broser utili6a um motor de renderi6ao 3ue
respons,el pelo processamento do cFdi+o da p+ina.
!bai=o se+ue uma lista dos principais brosers e seus motores:
interessante 3ue ,ocê faa cFdi+o compat,el com estes motores. Jocando a compatibilidade
nos motores de renderi6ao ,ocê atin+ir uma amplitude maior de brosers.
-or e=emplo se seu cFdi+o funcionar no #eb>it ,ocê alcanar o afari e o %hrome dois dos
principais brosers do mercado para des>tops. !lm disso ,ocê tambm alcana aparelhos
como &lac>berr< i-hone i-od (ouch i-ad e dispositi,os 3ue rodam !ndroid.
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 8/70
$o,patiilidade co, HTML5!tualmente o #eb>it o motor mais compat,el com os -adrDes do '()*5. %omo a !pple tem
interesse 3ue seus dispositi,os se4am ultracompat,eis com os -adrDes ela tem feito um belo
trabalho de atuali6ao e a,ano da compatibilidade deste motor.
%ontudo o Jirefo= e o Bpera 4 esto compat,eis com +rande parte da especificao do '()*5
e %$ e a cada up+rade eles tra6em mais no,idades e atuali6ao dos padrDes.
B 3ue pode te preocupar de ,erdade a retrocompatibilidade com ,ersDes anti+as de brosers
como o Hnternet =plorer. ! )icrosoft est fa6endo um bom trabalho com o H9 mas as ,ersDes8 e 7 no tem 3uase nenhum suporte ao '()*5 o 3ue um problema srio para aplicaDes eb
baseadas em tecnolo+ias mais recentes mas 3ue a base de usurios utili6a as ,ersDes anti+as do
Hnternet =plorer.
!bai=o se+ue uma tabela simples de compatibilidade entre os brosers e al+uns mFdulos do
'()*5:
Técnicas de detec3ão-ode ser 3ue o usurio no utili6e um broser 3ue suporta '()*5. Qeste caso ,ocê pode
redirecion?lo para uma ,erso do site mais simples ou tal,e6 apenas mostrar uma mensa+em
alertando o usurio sobre a importMncia da atuali6ao do broser. -ara isso temos al+umas
tcnicas de deteco para conferir se o broser suporta ou no '()*5.
Kuando o broser ,isita um ebsite ele constrFi uma coleo de ob4etos 3ue representam
elementos '()* na p+ina. %ada elemento no cFdi+o representado no ;B) como um ob4eto
diferente. (odo ob4eto ;B) tem propriedades em comum mas al+uns ob4etos tem
caractersticas especficas. Psaremos estes ob4etos para fa6ermos a deteco. !bai=o se+ue
meios 3ue ,ocê poder utili6ar para detectar o suporte do broser:
Veri-i=ue se u,a deter,inada propriedade eCiste e, oetos gloais co,o ?6+"#? ou +AV67AT#@. +esse caso!veri-ica,os o suporte a geolocali>a3ão.
1.
$rie u, ele,ento e veri-i=ue se u,a deter,inada propriedade eCiste neste ele,ento.2.
$rie u, ele,ento e veri-i=ue se u, deter,inado ,étodo eCiste neste ele,ento! então c'a,e o ,étodo e veri-i=ue se ovalor retorna. &or eCe,plo! teste =uais -or,atos de vdeo são suportados.
(.
$rie u, ele,ento e de-ina u, atriuto co, u, deter,inado valor! então veri-i=ue se o atriuto suporta este valor. &or eCe,plo! crie u, input e veri-i=ue =uais tBpes são suportados.
*.
Utilizando o Modernizr
B )oderni6r @http://.moderni6r.com/A uma biblioteca de deteco 3ue lhe permite
,erificar o suporte da maioria das caractersticas do '()*5 e %$.
B )oderni6r roda automaticamente assim 3ue ,ocê o adiciona no head do documento. !ssim se
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 9/70
,ocê 3uiser ,erificar se o broser suporta Geolocali6ao por e=emplo basta inserir este script
na p+ina. e o broser suportar a feature testada ele retornar true:
if (Modernizr.geolocation) {
// Aceita a feature
} else {
// Não aceita a feature testada.
}
a de Referência http://tableless.com.br/html5/print.php
70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 10/70
ESTRUTURA BÁSICA, DOCTYPE E CHARSETS
! estrutura bsica do '()*5 continua sendo a mesma das ,ersDes anteriores da lin+ua+em h
apenas uma e=cesso na escrita do ;oct<pe. e+ue abai=o como a estrutura bsica pode ser
se+uida:
rquivo! e"e#$los%&%estruturabasica'(t#l
1 <!DO"#$ %M&'
<html lang*+t,-r*'
<head '
< meta charset*0,2*'
3 <link rel*st4les5eet* type*te6t/css* href*estilo.css*'
7 <title'</title'
8 </head '
2 < body'
9 < p'$strutura -:sica de u; %M&</p'
1
11 < pre'
1 =lt>!DO"#$ %M&=gt>< br'
1 =lt>5t;l lang*+t,-r*=gt>< br'
1 =lt>5ead=gt>< br'
13 =lt>;eta c5arset*0,2*=gt>< br'
17 =lt>lin? rel*st4les5eet* t4+e*te6t/css* 5ref*estilo.css*=gt>< br'
18 =lt>title=gt>=lt>/title=gt>< br'
12 =lt>/5ead=gt>< br'
19 =lt>-od4=gt>< br'
1 =lt>/-od4=gt>< br'
=lt>/5t;l=gt>< br'
</pre'
<a href*@aascri+tB 5istor4.go(,1)*'Coltar +ara o artigo</a'
3
7 </body'
8 </html'
# "octBpeB ;oct<pe de,e ser a primeira linha de cFdi+o do documento antes da ta+ '()*.
<!DO"#$ 5t;l'
B ;oct<pe indica para o na,e+ador e para outros meios 3ual a especificao de cFdi+o utili6ar.
m ,ersDes anteriores era necessrio referenciar o ;(; diretamente no cFdi+o do ;oct<pe.
%om o '()*5 a referência por 3ual ;(; utili6ar responsabilidade do &roser.
B ;oct<pe no uma ta+ do '()* mas uma instruo para 3ue o broser tenha informaDessobre 3ual ,erso de cFdi+o a marcao foi escrita.
# ele,ento HTMLB cFdi+o '()* uma srie de elementos em r,ore onde al+uns elementos so filhos de outros
e assim por diante. B elemento principal dessa +rande r,ore sempre a ta+ '()*.
<5t;l lang*+t,-r*'
B atributo *!QG necessrio para 3ue os user?a+ents saibam 3ual a lin+ua+em principal do
documento.*embre?se 3ue o atributo *!QG no restrito ao elemento '()* ele pode ser utili6ado em
3ual3uer outro elemento para indicar o idioma do te=to representado.
-ara encontrar a lista+em de cFdi+os das lin+ua+ens acesse: http://.$.or+/Hnternational
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 11/70
/3uestions/3a?choosin+?lan+ua+e?ta+s.
HEA"! (a+ '!; onde fica toda a parte inteli+ente da p+ina. Qo '!; ficam os metadados.
)etadados so informaDes sobre a p+ina e o contedo ali publicado.
Metata) *(arset
Qo nosso e=emplo h uma metata+ respons,el por cha,ear 3ual tabela de caractres a p+inaest utili6ando.
<;eta c5arset*utf,2*'
Qas ,ersDes anteriores ao '()*5 essa ta+ era escrita da forma abai=o:
<;eta 5tt+,eui*ontent,4+e* content*te6t/5t;l> c5arsetutf,2*'
ssa forma anti+a ser tambm suportada no '()*5. %ontudo melhor 3ue ,ocê utili6e a
no,a forma.
! #eb acessada por pessoas do mundo inteiro. (er um sistema ou um site 3ue limite o acesso e pessoas de outros pases al+o 3ue ,ai contra a tradio e os ideais da internet. -or isso foi
criado uma tabela 3ue suprisse essas necessidades essa tabela se chama Pnicode. ! tabela
Pnicode suporta al+o em torno de um milho de caracteres. !o in,s de cada re+io ter sua
tabela de caracteres muito mais sensato ha,er uma tabela padro com o maior nmero de
caracteres poss,el. !tualmente a maioria dos sistemas e brosers utili6ados por usurios
suportam plenamente Pnicode. -or isso fa6endo seu sistema Pnicode ,ocê +arante 3ue ele ser
bem ,isuali6ado a3ui na %hina ou em 3ual3uer outro lu+ar do mundo.
B 3ue o Pnicode fa6 fornecer um nico nmero para cada caractere no importa a plataforma
nem o pro+rama nem a ln+ua.
Ta) L+,-
' dois tipos de lin>s no '()*: a ta+ ! 3ue so lin>s 3ue le,am o usurio para outros
documentos e a ta+ *HQT 3ue so lin>s para fontes e=ternas 3ue sero usadas no documento.
Qo nosso e=emplo h uma ta+ *HQT 3ue importa o % para nossa p+ina:
<lin? rel*st4les5eet* t4+e*te6t/css* 5ref*estilo.css*'
B atributo rel*st4les5eet* indica 3ue a3uele lin> relati,o a importao de um ar3ui,o
referente a folhas de estilo.
' outros ,alores para o atributo R* como por e=emplo o !*(RQ!(:
<lin? rel*alternate* t4+e*a++lication/ato;E6;l* title*feed* 5ref*/feed/*'
Qeste caso indicamos aos user?a+ents 3ue o contedo do site poder ser encontrado em um
caminho alternati,o ,ia !tom J;.
Qo '()*5 h outros lin>s relati,os 3ue ,ocê pode inserir como o rel*arc5ies* 3ue
indica uma referência a uma coleo de material histFrico da p+ina. -or e=emplo a p+ina de
histFrico de um blo+ pode ser referenciada nesta ta+.
a de Referência http://tableless.com.br/html5/print.php
e 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 12/70
MODELOS DE CONTEÚDO
' pe3uenas re+ras bsicas 3ue nFs 4 conhecemos e 3ue esto no '()* desde o incio. stas
re+ras definem onde os elementos podem ou no estar. e eles podem ser filhos ou pais de outros
elementos e 3uais os seus comportamentos.
;entre todas as cate+orias de modelos de contedo e=istem dois tipos de elementos: elementos
de linha e de bloco.
Bs elementos de linha marcam na sua maioria das ,e6es te=to. !l+uns e=emplos: a strong
e; i;g in+ut a--r s+an.
Bs elementos de blocos so como cai=as 3ue di,idem o contedo nas seDes do la<out.
!bai=o se+ue al+umas premissas 3ue ,ocê precisa relembrar e conhecer:
#s ele,entos de lin'a pode, conter outros ele,entos de lin'a! dependendo da categoria =ue ele se encontra. &or eCe,ploD o ele,entoa não pode conter o ele,entolabel.
#s ele,entos de lin'a nunca pode, conter ele,entos de loco.
Ele,entos de loco se,pre pode, conter ele,entos de lin'a.
Ele,entos de loco pode, conter ele,entos de loco! dependendo da categoria =ue ele se encontra. &or eCe,plo! u, parágra-o não pode conter u, "6V. Mas o contrário é possvel.
stes dois +randes +rupos podem ser di,ididos em cate+orias. stas cate+orias di6em 3ual
modelo de contedo o elemento trabalha e como pode ser seu comportamento.
$ategorias%ada elemento no '()* pode ou no fa6er parte de um +rupo de elementos com caractersticas
similares. !s cate+orias esto a se+uir. )anteremos os nomes das cate+orias em in+lês para 3ue
ha4a um melhor entendimento:
Metadata content
Flo; content
ectioning content
Heading content
&'rasing content E,edded content
6nteractive content
!bai=o se+ue como as cate+orias esto relacionadas de acordo com o #'!(#G:
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 13/70
Metadata content Bs elementos 3ue compDe a cate+oria )etadata so:
ase
co,,and
lin8
,etanoscript
script
stBle
title
ste contedo ,em antes da apresentao formando uma relao com o documento e seu
contedo com outros documentos 3ue distribuem informao por outros meios.
Flo; content ! maioria dos elementos utili6ados no bod< e aplicaDes so cate+ori6ados como Jlo %ontent.
o eles:
a
ar
address
area Gse -or u, decendente de u, ele,ento de ,apa
article
aside
audio
do
loc8=uote
r
utton
canvas
cite
code
co,,and
datalist
del details
d-n
div
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 14/70
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 15/70
tale
teCtarea
ti,e
ul
var
video
;r
TeCt
-or ,ia de re+ra elementos 3ue seu modelo de contedo permitem inserir 3ual3uer elemento 3ue
se encai=a no Jlo %ontent de,em ter pelo menos um descendente de te=to ou um elemento
descendente 3ue faa parte da cate+oria e;-edded.
ectioning content stes elementos definem um +rupo de cabealhos e rodaps.
article
asidenav
section
&asicamente so elementos 3ue 4untam +rupos de te=tos no documento.
Heading content Bs elementos da cate+oria 'eadin+ definem uma seo de cabealhos 3ue podem estar contidos
em um elemento na cate+oria ectionin+.
'1
'2
'(
'*
'5
'
'group
&'rasing content Ja6em parte desta cate+oria elementos 3ue marcam o te=to do documento bem como oselementos 3ue marcam este te=to dentro do elemento de par+rafo.
a
ar
area Gse ele -or descendente de u, ele,ento de ,apa
audio
do
r
uttoncanvas
cite
code
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 16/70
co,,and
datalist
del Gse ele contiver u, ele,ento da categoria de &'rasing
d-n
e,
e,ed
i
i-ra,e
i,g
input
ins Gse ele contiver u, ele,ento da categoria de &'rasing
8d
8eBgen
lael
lin8 Gse o atriuto itemprop -or utili>ado
,ap Gse apenas ele contiver u, ele,ento da categoria de &'rasing
,ar8
,at'
,eta Gse o atriuto itemprop -or utili>ado
,eter
noscript
oect
output
progress
=
ruB
sa,p
script
select
s,all
span
strong
su
sup
svg
teCtarea
ti,e
var
video
;r
TeCt
E,edded content Qa cate+oria mbedded h elementos 3ue importam outra fonte de informao para o
documento.
audio
canvase,ed
i-ra,e
i,g
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 17/70
,at'
oect
svg
video
6nteractive content Hnteracti,e %ontent so elementos 3ue fa6em parte da interao de usurio.
a
audio Gse o atriuto control -or utili>ado
utton
details
e,ed
i-ra,e
i,g Gse o atriuto usemap -or utili>ado
input Gse o atriuto type não tiver o valor 'idden
8eBgen
lael
,enu Gse o atriuto type tiver o valor toolbar
oect Gse o atriuto usemap -or utili>ado
select
teCtarea
video Gse o atriuto control -or utili>ado
!l+uns elementos no '()* podem ser ati,ados por um comportamento. Hsso si+nifica 3ue o
usurio pode ati,?lo de al+uma forma. B incio da se3uencia de e,entos depende do mecanismo
de ati,ao e normalmente culminam em um e,ento de clic> se+uido pelo e,ento ;B)!cti,ate.
B user?a+ent permite 3ue o usurio ati,e manualmente o elemento 3ue tem este comportamento
utili6ando um teclado mouse comando de ,o6 etc.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 18/70
NOVOS ELEMENTOS E ATRIBUTOS
! funo do '()* indicar 3ue tipo de informao a p+ina est e=ibindo. Kuando lemos um
li,ro conse+uimos entender e diferenciar um ttulo de um par+rafo. &asta percebermos a
3uantidade de letra tamanho da fonte cor etc. Qo cFdi+o isso diferente. RobUs de busca e
outros user?a+ents no conse+uem diferenciar tais detalhes. -or isso cabe ao desen,ol,edor
marcar a informao para 3ue elas possam ser diferenciadas por di,ersos dispositi,os.
%om as ,ersDes anteriores do '()* nFs conse+uimos marcar di,ersos elementos do la<out
estruturando a p+ina de forma 3ue as informaDes ficassem em suas reas especficas.
%onse+uimos diferenciar por e=emplo um par+rafo de um ttulo. )as no conse+uamos
diferenciar o rodap do cabealho. ssa diferenciao era apenas percebida ,isualmente pelo
la<out pronto ou pela posio dos elementos na estrutura do '()*. ntretanto no ha,ia
maneira de detectar automaticamente estes elementos 4 3ue as ta+s utili6ada para ambos
poderiam ser i+uais e no ha,ia padro para nomenclatura de H;s e %lasses.
B '()*5 trou=e uma srie de elementos 3ue nos a4udam a definir setores principais no
documento '()*. %om a a4uda destes elementos podemos por e=emplo diferenciar
diretamente pelo cFdi+o '()*5 reas importantes do site como sidebar rodap e cabealho.
%onse+uimos seccionar a rea de contedo indicando onde e=atamente o te=to do arti+o.
stas mudanas simplificam o trabalho de sistemas como os dos buscadores. %om o '()*5 os
buscadores conse+uem ,asculhar o cFdi+o de maneira mais efica6. -rocurando e +uardando
informaDes mais e=atas e le,ando menos tempo para estocar essa informao.
!bai=o se+ue uma lista dos no,os elementos e atributos includos no '()*5:
ste atributos foram descontinuados por3ue modificam a formatao do elemento e suas funDes
so melhores controladas pelo %:
align co,o atriuto da tag caption ! iframe ! img ! input ! object ! legend ! table ! hr ! div ! h1 ! h2 ! h3 !h4 ! h5 ! h6 ! p ! col ! colgroup ! tbody ! td ! tfoot ! th ! thead e tr .
alink ! link ! text e vlink co,o atriutos da tag body .
background co,o atriuto da tag body .
bgcolor co,o atriuto da tag table ! tr ! td ! th e body .
border co,o atriuto da tag table e object.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 19/70
cellpadding e cellspacing co,o atriutos da tag table.
char e charoff co,o atriutos da tag col ! colgroup ! tbody ! td ! tfoot ! th ! thead e tr .
clear co,o atriuto da tag br .
compact co,o atriuto da tag dl ! menu ! ol e ul.
frame co,o atriuto da tag table.
frameborder co,o atriuto da tag iframe.
height co,o atriuto da tag td e th.
hspace e vspace co,o atriutos da tag img e object.marginheight e marginwidth co,o atriutos da tag iframe.
noshade co,o atriuto da tag hr .
nowrap co,o atriuto da tag td e th.
rules co,o atriuto da tag table.
scrolling co,o atriuto da tag iframe.
size co,o atriuto da tag hr .
type co,o atriuto da tag li ! ol e ul.
valign co,o atriuto da tag col ! colgroup ! tbody ! td ! tfoot ! th ! thead e tr .
width co,o atriuto da tag hr ! table ! td ! th ! col ! colgroup e pre.
!l+uns atributos do '()* no so mais permitidos no '()*5. e eles ti,erem al+um
impacto ne+ati,o na compatibilidade de al+um user?a+ent eles sero discutidos.
rev e charset co,o atriutos da tag link e a.
shape e coords co,o atriutos da tag a.
longdesc co,o atriuto da tag img and iframe.
target co,o atriuto da tag link.
nohref co,o atriuto da tag area.
profile co,o atriuto da tag head .
version co,o atriuto da tag html.name co,o atriuto da tag img Guse id instead.
scheme co,o atriuto da tag meta.
archive ! classid ! codebase ! codetype ! declare e standby co,o atriutos da tag object.
valuetype e type co,o atriutos da tag param.
axis e abbr co,o atriutos da tag td e th.
scope co,o atriuto da tag td .
Atriutos
!l+uns elementos +anharam no,os atributos:
# atriuto autofocus pode ser especi-icado nos ele,entosinput GeCceto =uando 'á atriuto hidden atriudo!textarea ! select e button.
A tag a passa a suportar o atriuto media co,o a tag link.
A tag form gan'a u, atriuto c'a,ado novalidate. Iuando aplicado o -or,ulário pode ser enviado se,valida3ão de dados.
# ele,ento ol gan'ou u, atriuto c'a,ado reversed . Iuando ele é aplicado os indicadores da lista são colocadosna orde, inversa! isto é! da -or,a descendente.
# ele,ento fieldset agora per,ite o atriuto disabled . Iuando aplicado! todos os -il'os de fieldset sãodesativados.
# novo atriuto placeholder pode ser colocado e,inputs e textareas.
# ele,ento area agora suporta os atriutos hreflang e rel co,o os ele,entos a e link
# ele,ento base agora suporta o atriuto target assi, co,o o ele,ento a. # atriuto target ta,é, não está,ais descontinuado nos ele,entosa e area por=ue são )teis para aplica3:es ;e.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 20/70
Bs atributos abai=o foram descontinuados:
# atriuto border utili>ado na tag img .
# atriuto language na tag script.
# atriuto name na tag a. &or=ue os desenvolvedores utili>a, 6" e, ve> de na,e.
# atriuto summary na tag table.
B #$% mantm um documento atuali6ado constantemente nesta p+ina: http://.$.or+/(R/2010/#;?html5?diff?201002/.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 21/70
ELEMENTOS MODIFICADOS E AUSENTES
=istiam no '()* al+uns elementos 3ue tra6iam apenas caractersticas ,isuais e no semMnticas
para o contedo da p+ina. sses elementos anteriormente foram descontinuados por3ue
atrapalha,am o cFdi+o e tambm por3ue sua funo era facilmente suprida pelo %. %ontudo
al+uns destes elementos ,oltaram L tona com no,os si+nificados semMnticos. Butros elementos
3ue no descontinuados mas seus si+nificados foram modificados.
Ele,entos ,odi-icados
# ele,ento J passa a ter o ,es,o nvel se,Kntico =ue u, &A+! ,as ainda ,anté, o estilo de negrito no teCto.$ontudo! ele não dá nen'u,a i,portKncia para o teCt ,arcado co, ele.
# ele,ento 6 ta,é, passa a ser u, &A+. # teCto continua sendo itálico e para usuários de leitores de tela! a vo> utili>ada é ,odi-icada para indicar n-ase. 6sso pode ser )til para ,arcar -rases e, outros idio,as! ter,os técnicos eetc.
B interessante 3ue nestes dois casos hou,e apenas uma mudana semMntica. -ro,a,elmente
,ocê no precisar modificar cFdi+os onde estes dois elementos so utili6ados.
# ele,ento a se, o atriuto href agora representa u, place'older no eCato lugar =ue este lin8 se encontra.
# ele,ento address agora é tratado co,o u,a se3ão no docu,ento.
# ele,ento hr agora te, o ,es,o nvel =ue u, parágra-o! ,as é utili>ado para =uerar lin'as e -a>er separa3:es.
# ele,ento strong gan'ou ,ais i,portKncia.
# ele,ento head não aceita ,ais ele,entoschild co,o seu -il'o.
Ele,entos ou atriutos descontinuadosBs elementos abai=o foram descontinuados por 3ue seus efeitos so apenas ,isuais:
ase-ont
ig
center
-ont
s
stri8e
tt
u
Bs elementos abai=o foram descontinuados por 3ue ferem os princpios de acessibilide e
usabilidade:
-ra,e
-ra,eset
no-ra,es
Bs elementos abai=o no foram includos na especificao por3ue no ti,eram uso entre os
desen,ol,edores ou por3ue sua funo foi substituda por outro elemento:
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 22/70
acronym não -oi includo por=ue criou u, ocado de con-usão entre os desenvolvedores =ue pre-erira, utili>ar a tag abbr .
applet -icou osoleto e, -avor da tagobject.
isindex -oi sustitudo pelo uso de -or, controls.
dir -icou osoleto e, -avor da tag ul.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 23/70
#pera 14n3uanto escre,o o Bpera 10 o nicona,e+ador ;es>top 3ue fe6 um bomtrabalho implementando os no,osrecursos de formulrio do '()*5. e,ocê instal?lo poder testar 3uasetudo deste e dos prF=imos doiscaptulos.
dateti,elocal B tipo de campo datetime?local trataautomaticamente as diferenas de fusoshorrios submetendo ao ser,idor erecebendo dele ,alores G)(. %om isso,ocê pode com facilidade construir um sistema 3ue ser usado emdiferentes fusos horrios e permitir 3uecada usurio lide com os ,alores emseu prFprio fuso horrio.
NOVOS TIPOS DE CAMPOS
$ovos valores para o atri!uto t%peB elemento input aceita os se+uintes no,os ,alores para o atributo t<pe:
tel (elefone. Qo h mscara de formatao ou ,alidao propositalmente ,isto no ha,er
no mundo um padro bem definido para nmeros de telefones. claro 3ue ,ocê pode
usar a no,a !-H de ,alidao de formulrios @descrita no captulo 8A para isso. Bs
a+entes de usurio podem permitir a inte+rao com sua a+enda de contatos o 3ue
particularmente til em telefones celulares.
searc'Pm campo de busca. ! aparência e comportamento do campo pode mudar li+eiramente
dependendo do a+ente de usurio para parecer com os demais campos de busca do sistema.
e,ail ?mail com formatao e ,alidao. B a+ente de usurio pode inclusi,e promo,er a inte+raocom sua a+enda de contatos.
url Pm endereo eb tambm com formatao e ,alidao.
"atas e 'orasB campo de formulrio pode conter 3ual3uer um desses ,alores no atributo t<pe:
dateti,e
date
,ont'
;ee8
ti,e
dateti,elocal
(odos de,em ser ,alidados e formatados pelo a+ente de usurio 3ue pode inclusi,e mostrar um
calendrio um seletor de horrio ou outro au=lio ao preenchimento 3ue esti,er dispon,el no
sistema do usurio.
B atributo adicional step define para os ,alidadores e au=lios ao preenchimento a diferena
mnima entre dois horrios. B ,alor de step em se+undos e o ,alor padro 0. !ssim se
,ocê usar ste+** o usurio poder fornecer como horrios 7:00 7:05 e 7:10 mas no
7:02 ou 7:08.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 24/70
nu,er "e4a um e=emplo do tipo number com seus atributos opcionais:
rquivo! e"e#$los%.%nu#ber'(t#l
1 <!DO"#$ 5t;l'
<html lang*en,0F*'
<head '
< meta charset*0,2* /'
3 <title'Nu;-er t4+e</title'
7 </head '
8
2 < body'
9
1 <input name*alue6* type*nu;-er*
11 alue*1.* step*.*
1 min** max** /'
1
1 </body'
13
17 </html'
18
B Bpera 10 nos d uma e=celente ,isuali6ao do 3ue um a+ente de usurio pode fa6er nesse
caso:
range"amos modificar no e=emplo acima apenas o ,alor de t<pe mudando de VnumberV para
Vran+eV:
rquivo! e"e#$los%.%ran)e'(t#l
1 <!DO"#$ 5t;l'
<html lang*en,0F*'
<head '
< meta charset*0,2* /'
3 <title'Gange t4+e</title'
7 </head '
8
2 < body'
9
1 <input name*alue6* type*range* 11 alue*1.* step*.*
1 min** max** /'
1
1 </body'
13
17 </html'
18
Qo,amente Bpera 10:
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 25/70
color B campo com t4+e*color* um seletor de cor. B a+ente de usurio pode mostrar um
controle de seleo de cor ou outro au=lio 3ue esti,er dispon,el. B ,alor ser uma cor no
formato Hff77.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 26/70
TIPOS DE DADOS E VALIDADORES
Formulários vitaminados%onforme ,ocê de,e ter percebido no ltimo captulo o '()*5 a,anou bastante nos recursos
de formulrios facilitando muito a ,ida de 3uem precisa desen,ol,er aplicaDes eb baseadas
em formulrios. Qeste captulo ,amos a,anar um pouco mais nesse assunto e ,ocê ,ai ,er a
coisa ,ai ficar ainda melhor.
auto-ocus!o incluir em um campo de formulrio o atributo autofocus assim:
<in+ut na;e*login* autofocus '
B foco ser colocado neste campo automaticamente ao carre+ar a p+ina. ;iferente das soluDes
em Na,ascript o foco estar no campo to lo+o ele se4a criado e no apenas ao final do
carre+amento da p+ina. Hsso e,ita o problema muito comum 3uando ,ocê muda o foco com
Na,ascript de o usurio 4 estar em outro campo di+itando 3uando o foco mudado.
&lace'older teCt "ocê 4 de,e ter ,isto um VplaceholderV. (radicionalmente ,nhamos fa6endo isso:
rquivo! e"e#$los%/%$lace(olderold'(t#l
1 <!DO"#$ 5t;l'
<html lang*en,0F*'
<head '
< meta charset*0,2* /'
3 <title'#lace5olderI t5e old st4le</title'
7 </head '
8
2 < body'
9 <input name** value*Fearc5 5ere*
1 onfocus*if(t5is.alueJFearc5 5ereJ)t5is.alueJJ*'
11 </body'
11 </html'
'()*5 nos permite fa6er isso de maneira muito mais ele+ante:
rquivo! e"e#$los%/%$lace(older'(t#l
1 <!DO"#$ 5t;l'
<html lang*en,0F*'
<head '
< meta charset*0,2* /'
3 <title'#lace5olderI %M&3 Ka4</title'
7 </head '
8
2 < body'
9 <input name** placeholder*Fearc5 5ere*'
1 </body' 11
1 </html'
re=uired
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 27/70
-ara tornar um campo de formulrio obri+atFrio @seu ,alor precisa ser preenchidoA basta em
'()*5 incluir o atributo reuired:
<in+ut na;e*login* reuired'
,aClengt'"ocê 4 conhecia o atributo ;a6lengt5 3ue limita a 3uantidade de caracteres em um campo
de formulrio. Pma +rande lacuna dos formulrio '()* foi corri+ida. m '()*5 o elemento
te=tarea tambm pode ter ma=len+thW
&alidação de 'ormuláriosPma das tarefas mais enfadonhas de se fa6er em Na,ascript ,alidar formulrios. Hnfeli6mente
tambm uma das mais comuns. '()*5 facilita muito nossa ,ida ao ,alidar formulrios
tornando automtica boa parte do processo. m muitos casos todo ele. "ocê 4 ,iu 3ue pode
tornar seus campos VespertosV com os no,os ,alores para o atributo t<pe 3ue 4 incluem
,alidao para datas emails PR*s e nmeros. "amos um pouco alm.
patternB atributo +attern nos permite definir e=pressDes re+ulares de ,alidao sem Na,ascript. "e4a
um e=emplo de como ,alidar %-:
rquivo! e"e#$los%/%$attern'(t#l
1 <!DO"#$ 5t;l'
<html lang*+t,LG*'
<head '
< meta charset*0,2* /'
3 <title'O atri-uto +attern</title'
7 </head ' 8
2 < body'
9
1 <form '
11 <label for*$#*'$#B
1 <input name*$#* id *$#* required pattern*d{3},d{}* /'
1 </label'
1 <input type*su-;it* value*$niar* /'
13 </form '
17
18 </body'
12
19 </html'
novalidate e -or,novalidate-odem ha,er situaDes em 3ue ,ocê precisa 3ue um formulrio no se4a ,alidado. Qestes casos
basta incluir no elemento for; o atributo noalidate.
Butra situao comum 3uerer 3ue o formulrio no se4a ,alidade dependendo da ao de
submit. Qesse caso ,ocê pode usar no boto de submit o atributo for;noalidate. "e4a um
e=emplo:
rquivo! e"e#$los%/%or#novalidate'(t#l
1 <!DO"#$ 5t;l'
<html lang*+t,LG*'
<head '
< meta charset*0,2* /' 3 <title'Falando rascun5o</title'
7 <style'
8 la-el{displayB-loc?>}
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 28/70
2
</style'
9 </head '
1
11 < body'
1
1 <form '
1 <label'no;eB <input name*no;e* required '</label'
13 <label'e;ailB <input name*e;ail* type*e;ail* required '</label'
17 <label';ensage;B <textarea name*;ensage;* required '</textarea'</label'
18 <input type*su-;it* name*action* value*Falar rascun5o* formnovalidate'
12 <input type*su-;it* name*action* value*$niar*'
19 </form '
1 </body'
</html'
$usto, validators claro 3ue as ,alidaDes padro embora atendam a maioria dos casos no so suficientes para
todas as situaDes. )uitas ,e6es ,ocê ,ai 3uerer escre,er sua prFpria funo de ,alidao
Na,ascript. ' al+uns detalhes na especificao do '()*5 3ue ,o a4ud?lo com isso:
( novo evento oninput é disparado =uando algo é ,odi-icado no valor de u, ca,po de -or,ulário. "i-erente de
onc'ange! =ue é disparado ao -inal da edi3ão! oninput é disparado ao editar. di-erente ta,é, de on8eBup eon8eBpress! por=ue vai capturar =ual=uer ,odi-ica3ão no valor do ca,po! -eita co, ,ouse! teclado ou outra inter-ace=ual=uer.
1.
( m)todo set*ustom&alidit% pode ser invocado por voc. Ele recee u,a string. e a string -or va>ia! o ca,po será,arcado co,o válido. $aso contrário! será ,arcado co,o inválido.
2.
%om isso ,ocê pode inserir suas ,alidaDes no campo de formulrio e dei=ar o na,e+ador fa6er
o resto. Qo mais preciso capturar o e,ento submit e trat?lo. "e4a por e=emplo este
formulrio com ,alidao de %-J:
rquivo! e"e#$los%/%custo#validator'(t#l
1 <!DO"#$ 5t;l'
<html lang*+t,LG*'
<head '
< meta charset*0,2* /'
3 <title'usto; alidator</title'
7 <!,, O aruio c+f.@s cont; a funPão alida#I ue
8 rece-e u;a string e retorna true ou false. ,,'
2 <script src*c+f.@s*'</script'
9 <script'
1 function #(i){
11 i.setusto;Calidit4(alida#(i.alue)JJBJ# in:lido!J)
1 }
1
</script'
1 </head '
13
17 < body'
18 <form '
12 <label'#B <input name*c+f* oninput*#(t5is)* /'</label'
19 <input type*su-;it* value*$niar* /'
</form '
1 </body'
</html'
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 29/70
DETALHES E CONTEÚDO EDITÁVEL.
Ainda mais 'ormulários"e4amos mais duas coisas 3ue ,ocê certamente 4 fe6 mais de uma ,e6 e foram simplificadas
pelo '()*5.
"etal'es e su,ário"e4a um e=emplo de uso dos no,os elementos details e summar<:
<details'
<su;;ar4'o+iando <+rogress ;a6*92* alue*1812*' 8I3Q</su;;ar4'
<dl'
<dt'a;an5o totalB</dt'
<dd'9.2RL</dd'
<dt'ransferidoB</dt'
<dd'1.812</dd'
<dt'a6a de transferSnciaB</dt'
<dd'18RL/s</dd'
<dt'No;e do aruioB</dt'
<dd'%M&3.;+</dd'
</dl'
</details'
"e4a como um a+ente de usurio poderia renderi6ar isso:
ao clicar:
$onte)do editável -ara tornar um elemento do '()* edit,el basta incluir nele o atributo contenteditable assim:
<di contentedita-le*true*'
$dite,;e...
</di'
"ocê pode ler e manipular os elementos edit,eis normalmente usando os mtodos do ;B).
Hsso permite com facilidade construir uma rea de edio de '()*.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 30/70
DRAG-N-DROP E CORREÇÃO ORTOGRÁFICA
+rag and +rop! !-H de ;ra+ and ;rop relati,amente simples. &asicamente inserir o atributo
dragga-le*true* num elemento o torna arrast,el. h uma srie de e,entos 3ue ,ocê
pode tratar. Bs e,entos do ob4eto sendo arrastado so:
dragstart # oeto co,e3ou a ser arrastado. # evento =ue a -un3ão recee te, u, atriuto target ! =ue conté, o oeto sendoarrastado.
drag # oeto está sendo arrastado
dragend A a3ão de arrastar ter,inou
B ob4eto sobre o 3ual outro arrastado sofre os se+uintes e,entos:
dragenter # oeto sendo arrastado entrou no oeto target
dragleave# oeto sendo arrastado deiCou o oeto target
dragover # oeto sendo arrastado se ,ove sore o oeto target
drop# oeto sendo arrastado -oi solto sore o oeto target
"etal'es i,portantesD! ao padro do e,ento dra+o,er cancelar a ao de dra++in+ atual. !ssim nos ob4etos 3ue
de,em receber drop preciso setar uma ao de dra+o,er com no mnimo return false.
eleDes de te=to so automaticamente arrast,eis no precisam do atributo dragga-le. se
,ocê 3uiser criar uma rea para onde seleDes de te=to possam ser arrastadas basta tratar esses
mesmos e,entos.
-or fim todas funDes de tratamento de e,ento de dra+ recebem um ob4eto de e,ento 3uecontm uma propriedade dataransfer um dataset comum a todos os e,entos durante essa
operao de dra+.
rquivo! e"e#$los%10%dra)'(t#l
1 <!DO"#$ %M&'
<html'
<head '
< meta content*te6t/5t;l> c5arset0,2* http-equiv*content,t4+e*/'
3 <title'%M&3 Drag and dro+ de;onstration</title'
7 <style type*te6t/css*'
8 H-o6AI H-o6L {
2 floatBleft> widthB1+6> heightB+6> paddingB1+6> marginB1+6> font-sizeB8Q>
9 }
1 H-o6A { background-colorB blue> }
11 H-o6L { background-colorB green> }
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 31/70
1
1 HdragI Hdrag {
1 widthB3+6> paddingB3+6> marginB3+6> borderB+6 black solid> line-heightB3+6>
13 }
17 Hdrag { background-colorB red>}
18 Hdrag { background-colorB orange>}
12
</style'
19 <script type*te6t/@aascri+t*'
1 "uando o usu#rio inicia um drag$ guardamos no dataset do evento
o id do objeto sendo arrastado
function dragFtart(e) {
e.dataransfer.setData(*TD*I e.target.getAttri-ute(JidJ))>
3 }
7
8 "uando o usu#rio arrasta sobre um dos pain%is$ retornamos
2 false para &ue o evento n'o se propague para o navegador$ o
9 &ue faria com &ue o conte(do fosse selecionado)
function dragOer(e) { return false> }
1
"uando soltamos o elemento sobre um painel$ movemos o
elemento$ lendo seu id do dataset do evento
function dragDro+(e) {
3 var idelt e.dataransfer.getData(*TD*)>
7 e.target.a++end5ild(docu;ent.get$le;entL4Td(idelt))>
8 }
2
9
</script'
</head '
1 < body'
<!,, #ainel 1 ,,'
<div id *-o6A*
ondrop*return dragDro+(eent)*
3 ondragover*return dragOer(eent)*' 7 <!,, Dragga-le 1 ,,'
8 <div id *drag* draggable*true*
2 ondragstart*return dragFtart(eent)*'drag ;e</div'
9 <!,, Dragga-le ,,'
3 <div id *drag* draggable*true*
31 ondragstart*return dragFtart(eent)*'drag ;e</div'
3 </div'
3
3 <!,, #ainel ,,'
33 <div id *-o6L*
37 ondrop*return dragDro+(eent)*
38 ondragover*return dragOer(eent)*'
32 </div'
39
7 </body'
71 </html'
2"e#$lo
e+ue um e=emplo de dra+?and?drop baseado no e=celente e=emplo de *aurent Nouanneau
@http://l4ouanneau.com/lab/html5/demodra+drop.htmlA.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 32/70
,evisão ortográ'ica e gramatical Bs a+entes de usurio podem oferecer recursos de re,iso orto+rfica e +ramatical dependendo
do 3ue hou,er dispon,el em cada plataforma. Bs desen,ol,edores podem controlar o
comportamento dessa ferramenta atra,s do atributo s+ellc5ec?. Hnserir
s+ellc5ec?*true* num elemento fa6 com 3ue a re,iso este4a habilitada para ele. "ocê
tambm pode desabilitar a re,iso para determinado elemento inserindo
s+ellc5ec?*false* .
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 33/70
ELEMENTOS AUDIO E VIDEO, E CODECS
-udio-ara inserir udio em uma p+ina eb basta usar o elemento audio:
<audio src*;us.oga* controls*true* auto+la4*true* /'
B ,alor de controls define se um controle de udio com botDes de pla< pause ,olume barra de
pro+resso contador de tempo etc. ser e=ibido na tela. e for setado como VfalseV ser preciso
controlar o pla<er ,ia 4a,ascript com mtodos como +la4() e +ause(). B ,alor de autopla<define se o udio ,ai comear a tocar assim 3ue a p+ina carre+ar.
#rigens alternativas de áudio(odo a+ente de usurio de,eria suportar o codec li,re B++"orbis mas infeli6mente pode
acontecer de seu ar3ui,o o+a no tocar no computador ou celular de al+um. Kuem sabe do seu
chefe ou seu cliente. nto preciso saber como oferecer um formato alternati,o de udio.
Ja6emos assim:
<audio controls*true* auto+la4*true*'
<source src*;us.oga* /'
<source src*;us.;+* /'
<source src*;us.K;a* /'
</audio'
%laro o a+ente de usurio pode ainda no saber tocar nenhum desses formatos ou se3uer ter
suporte a udio. -ara esses casos oferea um contedo alternati,o:
<audio controls*true* auto+la4*true*'
<source src*;us.oga* /'
<source src*;us.;+* /'
<source src*;us.K;a* /'
<+'aPa o <a 5ref*;us.;+*'doKnload da ;Usica</a'.</+'
</audio'
&ídeoB uso de ,deo muito semelhante ao de udio:
<ideo src*u.og* Kidt5** 5eig5t** /'
com ,rios elementos source:
<ideo controls*true* auto+la4*true* Kidt5** 5eig5t**'
<source src*u.og* /'
<source src*u.;+* /'
<source src*u.K;* /' <+'aPa o <a 5ref*u.;+*'doKnload do Vdeo</a'.</+'
</ideo'
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 34/70
# =ue -unciona na ;e)ar> -il+rim est escre,endo um li,romuito interessante @em in+lêsA chamadoV;i,e Hnto '()* 5V. B captulo sobre"deo a referência de 3ue ,ocê
precisa para publicar ,deo na eb com
'()*5.
*odecs muito importante 3ue ,ocê inclua nos seus elementos source de udio e ,deo
informao a respeito do container e codecs utili6ados. Hsso ,ai e,itar 3ue o na,e+ador
tenha 3ue bai=ar pelo menos parcialmente o ar3ui,o de mdia para depois descobrir
3ue no conse+ue toc?lo. importante lembrar 3ue a e=tenso do ar3ui,o no
informao rele,ante para isso pelo contrrio no si+nifica nada. Pma PR* pode no
ter e=tenso de ar3ui,o e pode le,ar a um redirecionamento.
-ara indicar ao na,e+ador o container e codecs de determinado ar3ui,o usa?se o
atributo t4+e no formato:
t4+eJ MIME-type do container> codecs*codec de vdeoI codec de !udio*J
-or e=emplo um ,deo em B++ usando os codecs (heora e "orbis ter seu source assim:
<source srcJideo.ogJ t4+eJideo/ogg> codecs*t5eoraI or-is*J'
%om )-G? a coisa um pouco mais complicada por 3ue preciso indicar ao na,e+ador
tambm o profile do codec de ,deo utili6ado. "e4a um e=emplo:
<source srcJideo.;+J t4+eJideo/;+> codecs*;+..I ;+a..*J'
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 35/70
?or8ing "ra-t B contedo desse captulo est baseadonuma especificao 3ue ainda est emstatus de V#or>in+ ;raftV. Bu se4a ascoisas ainda podem mudar bastante.Ji3ue de olho no 3ue ,ai acontecer como elemento de,ice e a tream !-Hacessando @em in+lêsA:http://de,.$.or+/html5/html?de,ice/
ELEMENTO DEVICE E STREAM API
( elemento device"ocê pode inserir em seu '()* um elemento de acesso L ebcam do usurio assim:
<deice t4+e*;edia*'
Hsso ,ai e=ibir uma interface solicitando ao usurio acesso a sua ebcam. e ele ti,er
mais de uma tambm ser permitido 3ue ele escolha 3ue ebcam usar. B atributo
media tambm pode conter o ,alor VfsV 3ue ,ai abrir uma cai=a de seleo no sistemade ar3ui,os permitindo ao usurio escolher um ar3ui,o para fa6er stream.
B passo se+uinte conectar o stream desse seu elemento de,ice a al+uma coisa. "e4a
por e=emplo como conect?lo a um elemento ,ideo na prFpria p+ina fa6endo com 3ue o
usurio possa ,er a ima+em de sua prFpria ebcam:
rquivo! e"e#$los%13%videoc(at'(t#l
1 <!DO"#$ 5t;l'
<html lang*en,0F*'
<head '
< meta charset*0,2* /'
3 <title'Cideoc5atI ste+ 1</title'
78 <script'
2 function u+date(strea;) {
9 docu;ent.get$le;entsL4agNa;e(JideoJ)WX.src strea;.url>
1 }
11
</script'
1
1 </head '
1
13 < body'
17
18 < p'o start c5attingI select a ideo ca;eraB <device type;edia onchange*u+date(t5is.data)*'</p'
12 <video autoplay /'
19
</body'
1
</html'
trea,s"ocê de,e ter notado no script acima 3ue a funo de update recebe um parMmetro stream.
(rata?se de um ob4eto da classe tream 3ue possui uma propriedade url 3ue 4 usamos acima e
um mtodo record. B mtodo record inicia a +ra,ao do stream e retorna um ob4eto
treamRecorder. sse ltimo possui um mtodo stop 3ue retorna o ar3ui,o 3ue foi +ra,ado.
&eertopeer *uidado4 B #$% ainda est trabalhando nessa especificao e tudo a3ui pode mudar. -or isso
no se preocupe em entender as mincias. aiba apenas 3ue '()*5 pre,ê 3ue os a+entes de
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 36/70
usurio tenham uma interface de comuicao -2- 3ue permite a troca de te=to ima+em ,deo e
ar3ui,os. -or en3uanto a especificao deste item est sendo escrita 4unto da do elemento
de,ice mas isso de,e +anhar uma p+ina prFpria em bre,e. Ji3ue de olho.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 37/70
MATHML E SVG
Mat.M/B '()*5 incorpora o padro )ath)*. (rata?se de uma lin+ua+em de marcao baseada em
I)* para representao de fFrmulas matemticas. "ocê pode ler mais sobre )ath)* em
http://.$.or+/)ath/. -ara incorporar cFdi+o )ath)* em seu documento '()*5 no
preciso fa6er declaraDes especiais. &asta escre,er normalmente o cFdi+o iniciando com um
elemento ;at5. "e4a este e=emplo:
rquivo! e"e#$los%1&%#at(#l'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Mat5M&</title'
7 </head '
8 < body'
2
9 < math xmlns*5tt+B//KKK.K.org/1992/Mat5/Mat5M&* '
1 < mrow'
11 < mi'6</mi'
1 < mo'</mo'
1 < mfrac'
1 < mrow'
13 < mo form *+refi6*'=;inus></mo'
17 < mi'-</mi'
18 < mo'=#lusMinus></mo'
12 < msqrt'
19 < msup'
< mi'-</mi'
1 < mn'</mn'
</msup'
< mo'=;inus></mo'
< mn'</mn'
3 < mo'=Tnisi-lei;es></mo'
7 < mi'a</mi'
8 < mo'=Tnisi-lei;es></mo'
2 < mi'c</mi'
9 </msqrt'
</mrow'
1 < mrow'
< mn'</mn'
< mo'=Tnisi-lei;es></mo'
< mi'a</mi'
3 </mrow'
7 </mfrac'
8 </mrow'
2 </math'
9
</body'
1 </html'
"e4a como esse e=emplo renderi6ado no na,e+ador:
)esmo 3ue ,ocê nunca tenha ,isto )ath)* e este cFdi+o parea um pouco assustador dê uma
olhada com calma no cFdi+o comparando com a ima+em do resultado e ,ocê ,ai perceber 3ue
muito simples. (al,e6 al+o 3ue possa dei=?lo confuso a entidade =Tnisi-lei;es> 3ue
aparece al+umas ,e6es no cFdi+o. la est l para separar os fatores ac por e=emplo. sses
,alores so multiplicados o 3ue a fFrmula representa mas no 3ueremos colocar um operador
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 38/70
de multiplicao entre eles por3ue por con,eno se simplesmente escre,emos ac 3ual3uer
leitor saber 3ue isso uma multiplicao.
-or 3ue ento se preocupar em inserir =Tnisi-lei;es>X "ocê ,ai notar 3ue se remo,er a
entidade e a ta+ ;o correspondente o resultado ,isual ser o mesmo. %olocamos
=Tnisi-lei;es> por3ue )ath)* no sF ,isual semMntica. Pm outro a+ente de
usurio pode ter recursos de importar essa fFrmula para uma ferramenta de clculo por e=emplo.
0& !ssim como )ath)* "G uma outra lin+ua+em I)* 3ue pode ser incorporada com
facilidade em '()*5. "ocê pode ler mais sobre "G em http://.$.or+/Graphics/"G/.
"G uma lin+ua+em para marcao de +rficos ,etoriais. "e4amos um e=emplo bem simples:
rquivo! e"e#$los%1&%sv)'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'FCY</title' 7 </head '
8 < body'
2
9 <svg width** height**'
1
11 <!,, 0; retZnguloB ,,'
1 <rect x*1* y*1* width*13* height*3* stroke*H* stroke-width*3* fill*H* /'
1
1 <!,, 0; +olVgonoB ,,'
13 < polygon fill*red* stroke*-lue* stroke-width*1*
17 +oints*3I83 89I171 79I171 98I13
18 I1 3I3 188I1 I13
12 11I171 1I171* /'
19
<!,, 0; cVrculo ,,'
1 <circle cx*8* cy** r*7* stroke*H* stroke-width*3* fill*H* /'
</svg'
3 </body'
7 </html'
,e4a como isso renderi6ado no na,e+ador:
poss,el fa6er muito mais com "G. ! maioria dos editores de +rficos ,etoriais ho4e e=porta
e importa automaticamente "G permitindo a um desi+ner construir um +rfico em seu editor
,etorial predileto e e=port?lo diretamente. m se+uida um pro+ramador pode construir
4a,ascript 3ue manipula esse "G usando os mtodos do ;B). %om isso ,ocê pode ter
+rficos dinMmicos com animao escal,eis e com e=celente 3ualidade ,isual pro+ram,eis
em Na,ascript sem tecnolo+ias proprietrias e plu+ins.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 39/70
ECiste u, conteCto ("N!inda no. =istem ,riasimplementaDes de conte=to $; e cadafabricante de na,e+ador tem criado asua mas ainda no h um padro do#$% sobre esse assunto.
CANVAS API
( elemento canvas! %an,as !-H permite a ,ocê desenhar na tela do na,e+ador ,ia Na,ascript. B nico elemento
'()* e=istente para isso o elemento canas o resto todo feito ,ia Na,ascript. "e4a como
inserir o elemento canas numa p+ina:
<canas id*6* Kidt5** 5eig5t**'</canas'
Hsso ,ai e=ibir um retMn+ulo ,a6io. -ara desenhar nele primeiro obtemos o conte=to de desenhocom Na,ascript:
conte6tdocu;ent.get$le;entL4Td(J6J).getonte6t(JdJ)
!+ora 3ue temos um conte=to podemos desenhar nele. "amos comear com um
simples retMn+ulo:
conte6t.fillGect(1I 1I 3I 13)
imples noX Kue tal tentarmos al+o um pouco mais comple=oX ;ê uma olhada no
e=emplo:
rquivo! e"e#$los%1%canvas'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'anas A#T</title'
7 </head '
8 < body'
2
9 <canvas id *6* width** height**'</canvas'
1 < button onclick*desen5ar()*'desen5ar</button'
11
1 <script'
1 function desen5ar(){
1 *btemos o contexto
13 conte6tdocu;ent.get$le;entL4Td(J6J).getonte6t(JdJ)
17
18 +niciamos um novo desenho
12 conte6t.-egin#at5()
19
,ovemos a caneta para o inicio do desenho
1 conte6t.;oeo(13I3)
-esenhamos as linhas
conte6t.lineo(I3)
3 conte6t.lineo(3I13)
7 conte6t.lineo(3I13)
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 40/70
8 conte6t.lineo(2I3)
2 conte6t.lineo(13I3)
9
* desenho n'o % de verdade en&uanto voc.
1 n'o mandar o contexto pint#/lo)
0amos pintar o interior de amarelo
conte6t.fillFt4leJHffJ
3 conte6t.fill()
7
8 0amos pintar as linhas de vermelho)
2 conte6t.stro?eFt4leJHfJ
9 conte6t.stro?e()
1 }
</script'
</body'
3 </html'
,e4a o 3ue acontece 3uando se clica no boto:
' muito mais para ,ocê estudar se 3uiser se aprofundar na %an,as !-H. !penas para 3ue ,ocê
tenha uma idia poss,el desenhar te=to sombras +radientes incluir ima+ens no can,as
manipular os pi=els rotacionar e transformar os ob4etos.
$anvas e V7Pma d,ida muito comum 3uando usar %an,as 3uando usar "G. -ara saber escolher
preciso entender as diferenas entre um e outro. "G ,etorial e baseado em I)* lo+o
acess,el ,ia ;B). %an,as desenhado pi=el a pi=el ,ia Na,ascript.
!ssim as ,anta+ens do "G so:
# conte)do é acessvel a leitores de tela1.
# grá-ico é escalável! não perde resolu3ão ou serril'a ao redi,ensionar 2.
# conte)do é acessvel via "#M (.
as ,anta+ens do %an,as:
A per-or,ance é ,uito superior ao V7 na ,aioria dos casos1.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 41/70
-ácil desen'ar via Oavascript. E, V7! é preciso -a>er seu script escrever PML para voc. $o, $anvas voc s9,anda desen'ar! e pronto.
2.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 42/70
SERVER-SENT EVENTS
vent0ource! er,er?ent ,ents !-H uma maneira de in,erter o flu=o das aplicaDes !4a= fa6endo com
3ue o ser,idor possa disparar o en,io de dados ao a+ente de usurio. -ara isso cria?se no a+ente
de usurio um ob4eto ,entource:
esneK $entFource(Jco;;.+5+J)
Hsso ,ai abrir uma cone=o '((- para Vcomm.phpV e mantê?la escutando. %ada ,e6 3ue oser,idor en,iar e,entos para esse cliente ser disparado o e,neto messa+e do ob4eto
,entource. "e4a um e=emplo:
es.on;essagefunction(e){
alert(*5egara; dadosB *Ee.data)
}
Hsso pode ser usado por e=emplo para implementar uma interface de chat ou um monitor de
status de al+uma operao demorada ocorrendo no ser,idor.
# protocolo de co,unica3ãom nosso e=emplo acima a p+ina comm.php en,ia e,entos para o a+ente de usurio. "ocê no
precisa se preocupar em saber como isso funciona do lado do cliente uma ,e6 3ue o a+ente de
usurio fa6 todo o trabalho. )as importante 3ue saiba como isso de,e funcionar do lado do
ser,idor. ! PR* de comunicao de,e de,ol,er ao cliente um header ontent,t4+eB
te6t/eent,strea; . m se+uida en,ia as mensa+ens 3ue so blocos de te=to separados
um do outro por uma linha em branco:
dataB ;ensage; 1
dataB a ;ensage; te;
dataB ;ais de u;a lin5a
dataB ;ensage;
B prefi=o data: indica 3ue o 3ue se+ue so os dados da mensa+em. "ocê tambm pode usar o
prefi=o id:
dataB ;ensage; 1
idB 1
dataB a ;ensage; te;
dataB ;ais de u;a lin5a
idB
dataB ;ensage;
idB
e ,ocê en,iar prefi=os id em suas mensa+ens e o a+ente de usurio perder a cone=o ao tentar
reconectar ele ,ai en,iar o ,alor do ltimo id no header '((- &ast,$ent,TD. %om isso
,ocê pode por e=emplo en,iar as mensa+ens do chat do ponto em 3ue parou.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 43/70
DOM E HTML5
+(M e 4M/5B )odelo de Bb4etos do ;ocumento @;B) na si+la em in+lêsA a interface entre a lin+ua+em
Na,ascript e os ob4etos do '()*. ;B) o mtodo padro para construo de aplicaDes ricas
com Na,ascript e amplamente conhecido e utili6ado. Qeste captulo supondo 3ue ,ocê 4
conhece ;B) para '()* ou I'()* ,amos nos focar na diferena entre as ,ersDes
anteriores do ;B) e a do '()* 5.
&or =u "#MNBs primeiros na,e+adores a incorporar um motor de Na,ascript tinham alert prompt
document.rite e mais meia d6ia de maneiras de se intera+ir com o usurio. sF. ! idia de
acessar a r,ore de ob4etos do '()* trou=e poder Ls interfaces com o usurio na eb. ! idia
era to boa 3ue os fabricantes de na,e+adores no puderam esperar at 3ue ti,ssemos uma
especificao padro 3ue atendesse suas necessidades e criaram cada um seu prFprio mtodo de
resol,er o problema. Hsso resultou em anos e anos de incompatibilidade em 3ue era preciso
escre,er uma ,erso de seus scripts para cada na,e+ador.
Kueremos com certe6a e,itar uma no,a +uerra de padrDes. -or isso recomendamos a ,ocê por
mais sedutor 3ue parea utili6ar um recurso proprietrio Na,ascript 3ue se atenha ao ;B).
&amos 6s di'erenças
getEle,entsJB$lass+a,esse um sonho anti+o de todo desen,ol,edor Na,ascript. %om '()*5 ,ocê pode fa6er:
destaues docu;ent.get$le;entsL4lassNa;e(JdestaueJ)
isso retornar todos os elementos do '()* 3ue possuem a classe Vdesta3ueV.
innerHTMLButro sonho anti+o 3ue se torna realidade. ! propriedade inner'()* uma idia to boa 3ue
todos os na,e+adores atuais 4 a suportam h muito tempo e todo desen,ol,edor eb sabe
us?la. !pesar disso ela nunca ha,ia sido descrita como um padro.
e por,entura ,ocê nunca ,iu a propriedade inner'()* em ao @pu=a onde ,ocê esta,a nos
ltimos de6 anosXA saiba 3ue ela contm uma strin+ o contedo '()* da p+ina. ,ocê tem
acesso de leitura e escrita a essa propriedade.
"e4a um e=emplo de inner'()*:
function adicionaTte;(no;e){
docu;ent.get$le;entL4Td(JlistaJ).inner%M& E J<li'JEno;eEJ</li'J
}
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 44/70
<sando getelectionG'oe! maioria dos na,e+adores ainda no
te,e tempo de se atuali6ar em relao Lespecificao e retorna uma strin+3uando ,ocê chamadocu;ent.getFelection() eum ob4eto election 3uando ,ocêchama KindoK.getFelection().%omo esperamos 3ue num futuro
activeEle,ent e 'asFocusGB documento '()*5 tem uma no,a propriedade acti,element 3ue contm o elemento 3ue
possui o foco no momento. B documento tambm possui o mtodo hasJocus@A 3ue retorna true
se o documento contm o foco. eu usurio pode estar trabalhando com mltiplas 4anelas abas
frames ou mesmo ter alternado para outro aplicati,o dei=ando o na,e+ador com sua aplicao
Na,ascript rodando em se+undo plano. B mtodo hasJocus@A uma con,eniente maneira de
tratar aDes 3ue dependem do foco na aplicao atual.
"e4a um e=emplo de script dependente de foco:
rquivo! e"e#$los%16%ocus,oti7'(t#l
1 <!DO"#$ 5t;l'
<html lang*+t,LG*'
<head '
< meta charset*0,2* /'
3 <title'Notifier</title'
7 <script'
8
2 function notif4(te6t){
9 docu;ent.get$le;entL4Td(J;sgJ).inner%M&EJ<+'JEte6tEJ</+'J
1 titlelic?()
11 }
1
1 function titlelic?(){
1 if(docu;ent.5asocus()){
13 docu;ent.titleJNotifierJ
17 return
18 }
12 docu;ent.titledocu;ent.titleJNotifierJJ[ NotifierJBJNotifierJ
19 seti;eout(Jtitlelic?()JI3)
}
1
</script'
</head '
3 < body'
7 <input type*-utton* id *notif4* value*Notif4 in 3 seconds*
8 onclic?*notif4(J\ill notif4 in 3 seconds...J)>seti;eout(Jnotif4(J$ent s5oot!J)JI3)* /'
2 <div id *;sg*'</div'
9 </body'
1 </html'
getelectionGBs ob4etos document e indo possuem um mtodo +etelection@A 3ue retorna a seleo atual
um ob4eto da classe election. ! seleo tem entre outros os se+uintes mtodos e propriedades:
anc.or$ode# ele,ento =ue conté, o incio da sele3ão
'ocus$ode# ele,ento =ue conté, o -inal da sele3ão
selectAll*.ildern7parent$ode8eleciona todos os -il'os de parent+ode
deleteFrom+ocument78 @e,ove a sele3ão do docu,ento
range*ount A =uantidade de intervalos na se le3ão
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 45/70
prF=imo o comportamento dedocu;ent.getFelection()
mude su+erimos 3ue ,ocê prefira usar o mtodo de indo por en3uanto.
=uerBelector e IuerBe ,ocê usurio de 4Kuer< 4entendeu tudo. e=atamente a mesmaidia dos seletores 4Kuer<.
!l+uns preocupados usurios de 4Kuer<têm nos per+untado se no melhorem termos de performance usar aelector !-H. )as claro 3ue . e,ocê realmente souber pro+ramarescre,er todo o seu cFdi+o sempre sermelhor em performance 3ue usar umframeor>. )as o +anho nesse caso despre6,el. (al,e6 o conforte saber 3ue nos na,e+adores em 3ue isto estdispon,el a prFpria 4Kuer< usainternamente a elector !-H.
get,angeAt7inde98 @etorna o intervalo na posi3ão indeC
add,ange7range8 Adiciona u, intervalo Q sele3ão
remove,ange7range8 @e,ove u, intervalo da sele3ão
+ntervalos de sele89o
"ocê de,e ter notado acima 3ue uma seleo um con4unto de inter,alos da classe Ran+e. %ada
inter,alo possui entre outros os se+uintes mtodos e propriedades:
delete*ontent78 @e,ove o conte)do do intervalo
set0tart7parento''set8eta o incio do intervalo para o caractere na posi3ão o--set dentro do ele,ento "#M parent
setnd7parento''set8eta o -inal do intervalo para o caractere na posi3ão o--set dentro do ele,ento "#M parent
(anto os ob4etos election 3uanto os ob4etos Ran+e retornam o te=to da seleo 3uando
con,ertidos para strin+s.
docu,ent.'ead B ob4eto document 4 possua uma propriedade bod< uma maneira con,eniente de acessar o
elemento bod< do '()*. !+ora ele +anhou uma propriedade head maneira tambm muito
con,eniente de acessar o elemento head.
elector A&6 ! elector !-H no no,idade do '()*5 anterior a ele. )as como ainda desconhecida de
parte dos desen,ol,edores con,m di6er 3ue ela e=iste e 3ue continua funcionando no '()*5.
%om a selector !-H ,ocê pode usar seletores % para encontrar elementos ;B).
! elector !-H e=pDe duas funDes em cada um dos elementos ;B): 3uer<elector e
3uer<elector!ll. !mbas recebem como ar+umento uma strin+ com um seletor %. !
consulta sempre feita na subtree do elemento ;B) a partir do 3ual a chamada foi
disparada. ! 3uer<elector retorna o primeiro elemento 3ue satisfa6 o seletor ou null
caso no ha4a nenhum. ! 3uer<elector!ll retorna a lista de elementos 3ue satisfa6em o
seletor.
"e4a neste e=emplo um script para tabelas 6ebradas com elector !-H:
rquivo! e"e#$los%16%zebra'(t#l
1 <!DO"#$ 5t;l'
<html lang*+t,LG*'
<head '
< meta charset*0,2* /'
3 <title']e-ra</title'
7 <style'
8 .ze-raon{ background Bsiler}
2
</style'
9 <script'
1 KindoK.onloadfunction(){
11 var ze-rardocu;ent.uer4FelectorAll(J.ze-ra t-od4 trJ)
1 for(var i>i<ze-rar.lengt5>iE)
1 ze-rarWiX.classNa;eJze-raonJ
1 }
13
</script'
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 46/70
17 </head '
18
12 < body'
19 <table class*ze-ra*'
<thead '<tr'
1 <th'Cendedor</th' <th'otal</th'
</tr'</thead '
<tbody'<tr'
<td 'Manoel</td ' <td '1.I</td '
3 </tr'<tr'
7 <td '^oaui;</td ' <td '1.I</td '
8 </tr'<tr'
2 <td 'Maria</td ' <td '1.I</td '
9 </tr'<tr' <td 'Marta</td ' <td '.1I</td '
1 </tr'<tr'
<td 'Antonio</td ' <td '.1I</td '
</tr'<tr'
<td '#edro</td ' <td '1.I</td '
3 </tr'</tbody'
7 </table'
8 </body'
2 </html'
*aracter:sticas es$eciais de Do#,odeList
!s listas de elementos retornadas pelos mtodos do ;B) no so !rra<s comuns so ob4etos
;omQode*ist o 3ue si+nifica 3ue entre outros mtodos especiais ,ocê pode usar listWX ou
list() para obter um elemento da lista. (ambm pode usar listW*na;e*X ou
list(*na;e*) para obter um ob4eto por seu nome. ;uas adiDes interessantes do '()*5 aousar este ltimo mtodo:
# oeto é uscado pelos atriutos na,e ou id.1.
<,a lista de ca,pos de -or,ulário co, o ,es,o valor no atriuto na,e Gu,a lista de radio uttons! por eCe,plo será retornada caso ,ais de u, oeto sea encontrado. Essa lista conté, u, atriuto especial! value! ,uitoconveniente. Ele conté, o valor do radio ,arcado e! ao ser setado! ,arca o radio correspondente.
2.
"atasets"ocê pode atribuir dados arbitrrios a um elemento '()* 3ual3uer prefi=ando seus atributos
com Vdata?V. -or e=emplo:
<i;g src*co;+utador1.@+g* alt*Noo YNe6ius oret5in?er* id*c1*
data,+rocessor*3Y5z* data,;e;or4*2YL*
data,5arddrie*17L* data,screenJ3*J '
"ocê pode acessar esses ,alores ,ia Na,ascript atra,s do atributo dataset assim:
ar i;gdocu;ent.get$le;entL4Td(Jc1J)
+roci;g.dataset.+rocessor
!s propriedades de dataset têm permisso de leitura e escrita.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 47/70
NOVOS EVENTOS DOM
;ma palavra so!re eventosB suporte ao tratamento de e,entos disparados pelo usurio parte essencial do ;B). '()*5
oferece a ,ocê um e=tenso con4unto de no,os e,entos. "amos dar uma olhada nos mais
interessantes:
Ele,entos ,ulti,diaDoncanpla%# ele,ento audio ou video á te, dados su-icientes no u--er para co,e3ar a tocar.
oncanpla%t.roug.# ele,ento audio ou video á te, dados su-icientes no u--er para co,e3ar a tocar e! se a tran-erncia de dados continuar norit,o e, =ue está ocorrendo! esti,ase =ue tocará até o -inal se, interrup3:es.
ondurationc.ange# ele,ento audio ou video teve seu atriutoduration ,odi-icado. 6sso acontece! por eCe,plo! ao alterar a orige, da ,dia.
onemptied # ele,ento audio ou video teve u, erro de retorno va>io de dados da rede. # retorno va>io acontece =uando! por eCe,plo! voctenta invocar o ,étodo plaB de u, ele,ento =ue ainda não te, u,a orige, de ,dia de-inida.
onended # vdeo ou áudio c'egou ao -i,.
onloadeddata#s dados co,e3ara, a ser carregados e a posi3ão atual de plaBac8 á pode ser renderi>ada.
onloadedmetadata#s ,etadados -ora, carregados. Oá sae,os as di,ens:es! -or,ato e dura3ão do vdeo.
onloadstart #s dados co,e3ara, a ser carregados.
onpause# usuário clicou e, pause.
onpla%# usuário clicou e, plaB ou o plaBac8 co,e3ou por causa do atriuto autoplay
onpla%ing # vdeo ou áudio está tocando.
onprogress# agente de usuário está uscando dados do vdeo ou áudio.
Eventos e, ca,pos de -or,ulárioDoninput # usuário entrou co, dados no ca,po
oninvalid # ca,po não passou pela valida3ão
Eventos geraisDonconte9tmenu
# usuário disparou u, ,enu de conteCto sore o oeto. +a ,aioria dos siste,as "es8top! isso signi-ica clicar co, o otãodireito do ,ouse ou segurando u,a tecla especial.
onmouse.eel A rodin'a do ,ouse -oi acionada.
on!e'oreprint
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 48/70
"isparado antes da i,pressão da página. Voc pode usálo para ,odi-icar! esconder ou eCiir e le,entos! preparando a página para i,pressão.
ona'terprint "isparado ap9s a i,pressão da página. Voc pode usálo para reverter o status anterior Q i,pressão.
on.as.c.ange A )lti,a por3ão da <@L! ap9s o 'as' GR! -oi ,odi-icada.
ono''line# agente de usuário -icou o--line.
ononline
# agente de usuário está nova,ente conectado.
onredo# usuário disparou a a3ão de S@e-a>erS.
onundo# usuário disparou a a3ão de S"es-a>erS.
"raganddropD"imos a definio desses e,entos no %aptulo 10:
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
Atri!utos de evento! especificao do '()*5 padroni6ou um formato de atribuio de e,entos 3ue 4 era
amplamente utili6ado. "ocê pode atribuir e,entos atra,s de atributos '()* com o nome do
e,ento. -or e=emplo:
<in+ut on-lur*return erifica(t5is)* /'
claro 3ue ,ocê pode continuar usando o mtodo do ;B) add$ent&istener com a
,anta+em de poder atribuir ,rios listeners ao mesmo e,ento.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 49/70
MENUS E TOOLBARS
( elemento menuB elemento ;enu usado para definir menus e barras de ferramenta. ;entro do menu ,ocê
pode inserir submenus ou comandos. -ara inserir submenus basta inserir outros elementos
;enu. -ara definir comandos ,ocê pode inserir:
<, lin8! u, ele,entoa co, atriuto href 1.
<, otão! u, ele,ento button2.
<, otão! u, ele,ento input co, o atriuto type contendo utton! su,it! reset ou i,age(.
<, radioutton! u, ele,ento input co, o atriuto type contendo radio*.
<, c'ec8oC! u, ele,entoinput co, o atriuto type contendo c'ec8oC5.
<, ele,ento select ! contendo u, ou ,ais options! de-ine u, grupo de co,andos.
<, ele,ento =ual=uer co, o atriuto accesskey /.
<, ele,ento command 0.
Tipos de co,ando' três tipos de comando:
command <,a a3ão co,u,
c.eck!o9 <,a a3ão =ue pode estar no status de ligada ou desligada! e alterna entre esses dois stauts =uando clicada
radio<,a a3ão =ue pode estar no status de ligada ou desligada! e =uando clicada vai para o status de ligada! deligando todas asa3:es co, o ,es,o valor no atriuto radiogroup
;a lista de elementos poss,eis para definir comandos os três primeiros lin> button e input
button definem comandos do tipo command. B 3uarto elemento radiobutton define um
comando do tipo radio. B 3uinto chec>bo= define um comando do tipo chec>bo=.
B se=to elemento o select ,ai definir um +rupo de comandos. e o select ti,er o atributomultiple definir uma lista de comandos do tipo chec>bo=. %aso contrrio os comandos sero
do tipo radio tendo o mesmo radio+roup.
Qo stimo caso um elemento 3ual3uer com tecla de acesso o tipo de comando ,ai depender do
tipo de elemento 3ue recebeu access>e<.
# ele,ento co,,and -or fim temos o oita,o mtodo o elemento co;;and. Qeste caso o tipo de comando depender
do ,alor do atributo t4+e. "e4a um e=emplo de como us?lo:
<co;;and t4+e*co;;and* la-el*Falar* onclic?*salar()* '
;reira n9o usar co##and< $or enquanto
-or 3ue a especificao permite 3ue se use o no,o elemento command para definir comandos e
ao mesmo tempo permite 3ue se use os ,elhos elementos como input button e select para issoX
-ara possibilitar ao desen,ol,edor oferecer al+uma compatibilidade com na,e+adores anti+os.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 50/70
"e4a este e=emplo:
rquivo! e"e#$los%1/%co##and'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Menus</title'
7 </head '
8
2 < body'
9
1 < menu type*tool-ar*'
11 <li'
1 < menu label*ile*'
1 < button type*-utton* onclick*fneK()*'NeK...</button'
1 < button type*-utton* onclick*fo+en()*'O+en...</button'
13 < button type*-utton* onclick*fsae()*'Fae</button'
17 < button type*-utton* onclick*fsaeas()*'Fae as...</button'
18 </menu'
12 </li'
19 <li'
< menu label*$dit*'
1 < button type*-utton* onclick*eco+4()*'o+4</button'
< button type*-utton* onclick*ecut()*'ut</button'
< button type*-utton* onclick*e+aste()*'#aste</button'
</menu'
3 </li'
7 <li'
8 < menu label*%el+*'
2 <li'<a href*5el+.5t;l*'%el+</a'</li'
9 <li'<a href*a-out.5t;l*'A-out</a'</li'
</menu'
1 </li'
</menu'
</body'
3
7 </html'
B a+ente de usurio de,eria renderi6ar al+o como:
Pm a+ente de usurio 3ue no conhece o no,o elemento ;enu ,ai entender esse cFdi+o como
listas aninhadas com botDes e lin>s. ,ai renderi6ar isso assim:
Qo est bonito mas perfeitamente acess,el. o ,isual pode ser bem trabalhado com %. !
mesma coisa poderia ser escrita com o elementoco;;and
:
rquivo! e"e#$los%1/%co##and3'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Menus</title'
7 </head '
8
2 < body'
9
1 < menu type*tool-ar*'
11 < menu label*ile*'
1 <command onclick*fneK()* label*NeK...* /'
1 <command onclick*fo+en()* label*O+en...* /'
1 <command onclick*fsae()* label*Fae* /' 13 <command onclick*fsaeas()* label*Fae as...* /'
17 </menu'
18 < menu label*$dit*'
12 <command onclick*eco+4()* label*o+4* /'
19 <command onclick*ecut()* label*ut* /'
<command onclick*e+aste()* label*#aste* /'
1 </menu'
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 51/70
< menu label*%el+*'
<command onclick*locationJ5el+.5t;lJ* label*%el+* /'
<command onclick*locationJa-out.5t;lJ* label*A-out* /'
3 </menu'
7 </menu'
8
2 </body'
9
</html'
)as um a+ente de usurio 3ue no conhece os elementos ;enu e co;;and no ,ai mostrar
absolutamente nada.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 52/70
TIPOS DE LINS
/inks! possibilidade de lin>ar documentos o 3ue torna a #eb o 3ue ela . =istem duas maneiras
principais de lin>ar documentos os elementos a e lin?. B elemento a cria um lin> no
contedo da p+ina. "ocê conhece sua sinta=e:
<a 5ref*5tt+B//isie.co;.-r*'Cisie</a'
B elemento lin? por sua ,e6 cria um metadado um lin> 3ue no mostrado no contedo
mas o a+ente de usurio usa de outras maneiras. B uso mais comum ,incular um documento a
uma folha de estilos:
<lin? rel*st4les5eet* 5ref*estilo.css* /'
Qote o atributo rel*st4les5eet*. B atributo rel pode estar presente nos elementos a e
lin? e ter uma srie de ,alores:
Metadados de navega3ãoarc.ivesos ar=uivos do site
aut.or a página do autor do docu,ento atual
!ookmark o per,alin8 da se3ão a =ue este docu,ento pertence
'irst o pri,eiro docu,ento da série a =ual este pertence
.elpauda para esta página
inde9 o ndice ou su,ário =ue inclui o lin8 para esta página
last o )lti,o docu,ento da série a =ual este pertence
licensea licensa =ue core este docu,ento
ne9t o pr9Ci,o docu,ento da série a =ual este pertence
pre'etc.o agente de usuário deve -a>er cac'e desse lin8 e, segundo plano tão logo o docu,ento atual ten'a sido carregado. # autor dodocu,ento indica =ue este lin8 é o provável pr9Ci,o destino do usuário.
prevo docu,ento anterior da série a =ual este pertence
searc.a usca deste site
up# docu,ento u, nvel aci,a deste
B Bpera nos d um interessante e=emplo de como um a+ente de usurio pode e=ibir estes lin>s:
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 53/70
etadados da páginaalternateu, -or,ato alternativo para o conte)do atual. &recisa estar aco,pan'ado do atriuto type ! contendo o tipo M6ME do -or,ato. &or eCe,plo! para indicar o @ da página atual usa,osD
link relalternate typeapplicationrssxml hrefrss)xml
icono cone =ue representa esta página
ping!ack a <@L de pingac8 desta página. Através desse endere3o u, siste,a de logging ou gerenciador de conte)do pode avisar auto,atica,ente =uando u, lin8 para esta página -or inserido.
st%les.eet a -ol'a de estilo lin8ada deve ser vinculada a este docu,ento para eCii3ão
$o,porta,ento dos lin8s na páginae9ternal indica u, lin8 eCterno ao do,nio do docu,ento atual
no'olloindica =ue o autor do docu,ento atual não endossa o conte)do desse lin8. #s roUs de indeCa3ão para ,otores de usca pode,! por eCe,plo! não seguir este lin8 ou levar e, conta o no-ollo; e, seu algorit,o de ran8ing.
nore'errer o agente de usuário não deve enviar o 'eader HTT& @e-erer se o usuário acessar esse lin8
side!ar o lin8 deve ser aerto nu,a sidear do navegador! se este recurso estiver disponvel
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 54/70
MICRODATA
0em<ntica adicional ;ê um olhada no se+uinte cFdi+o:
rquivo! e"e#$los%30%#icrodata1'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Microdata 1</title' 7 </head '
8 < body'
2
9 <h"'Gesultados do tri;estre</h"'
1 <ol'
11 <li'
1 <dl'
1 <dt'no;e</dt' <dd '^oaui;</dd '
1 <dt'total</dt' <dd '1.87</dd '
13 </dl'
17 </li'
18 <li'
12 <dl'
19 <dt'no;e</dt' <dd 'Manoel</dd '
<dt'total</dt' <dd '1.9</dd '
1 </dl'
</li'
<li' <dl'
3 <dt'no;e</dt' <dd 'Antonio</dd '
7 <dt'total</dt' <dd '9.</dd '
8 </dl'
2 </li'
9 <li'
<dl'
1 <dt'no;e</dt' <dd '#edro</dd '
<dt'total</dt' <dd '18.8</dd '
</dl'
</li'
3 </ol'
7
8 </body'
2 </html'
! )icrodata !-H nos permite tornar esta estrutura semMntica um pouco mais especfica
definindo o 3ue o contedo de cada elemento. "e4a este outro e=emplo:
rquivo! e"e#$los%30%#icrodata3'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Microdata </title'
7 </head '
8 < body'
2
9 <h"'Gesultados do tri;estre</h"'
1 <ol'
11 <li'
1 <dl itemscope'
1 <dt'no;e</dt' <dd itemprop*no;e*'^oaui;</dd ' 1 <dt'total</dt' <dd itemprop*total*'1.87</dd '
13 </dl'
17 </li'
18 <li'
12 <dl itemscope'
19 <dt'no;e</dt' <dd itemprop*no;e*'Manoel</dd '
<dt'total</dt' <dd itemprop*total*'1.9</dd '
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 55/70
1 </dl'
</li'
<li'
<dl itemscope'
3 <dt'no;e</dt' <dd itemprop*no;e*'Antonio</dd '
7 <dt'total</dt' <dd itemprop*total*'9.</dd '
8 </dl'
2 </li'
9 <li'
<dl itemscope'
1 <dt'no;e</dt' <dd itemprop*no;e*'#edro</dd '
<dt'total</dt' <dd itemprop*total*'18.8</dd '
</dl'
</li' 3 </ol'
7
8 </body'
2 </html'
!dicionamos atributos especias itemscope e itemprop. %ada elemento itemscope define um item
de dados. %ada itemprop define o nome de uma propriedade. B ,alor da propriedade o
contedo da ta+ '()*. ! )icrodata !-H nos fornece acesso especial a esses dados. "e4a como
acessar esses dados:
resultadosdocu;ent.getTte;s()
for(ar i>i<resultados.lengt5>iEE){
alert(resultadosWiX.+ro+erties.no;eWX.contentE*B G_ *E
resultadosWiX.+ro+erties.totalWX.content)
}
"i-erentes tipos de dados Qo e=emplo acima temos uma lista+em de pessoas. !+ora ima+ine 3ue ,ocê precise ter no
mesmo documento uma lista+em de pessoas e carros. -oderia escre,er assim:
rquivo! e"e#$los%30%#icrodata&'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Microdata </title'
7 </head '
8 < body' 2
9 <h"'Gesultados do tri;estre</h"'
1 <ol'
11 <li'
1 <dl itemscope'
1 <dt'no;e</dt' <dd itemprop*no;e*'^oaui;</dd '
1 <dt'total</dt' <dd itemprop*total*'1.87</dd '
13 </dl'
17 </li'
18 <li'
12 <dl itemscope'
19 <dt'no;e</dt' <dd itemprop*no;e*'Manoel</dd '
<dt'total</dt' <dd itemprop*total*'1.9</dd '
1 </dl'
</li'
<li'
<dl itemscope'
3 <dt'no;e</dt' <dd itemprop*no;e*'Antonio</dd ' 7 <dt'total</dt' <dd itemprop*total*'9.</dd '
8 </dl'
2 </li'
9 <li'
<dl itemscope'
1 <dt'no;e</dt' <dd itemprop*no;e*'#edro</dd '
<dt'total</dt' <dd itemprop*total*'18.8</dd '
</dl'
</li'
3 </ol'
7
8 <h#'arros ;ais endidos</h#'
2 <ol'
9 <li'
<dl itemscope'
1 <dt'no;e</dt' <dd itemprop*no;e*'usca</dd '
<dt'total</dt' <dd itemprop*total*'2</dd '
</dl'
</li'
3 <li'
7 <dl itemscope'
8 <dt'no;e</dt' <dd itemprop*no;e*'LrasVlia</dd '
2 <dt'total</dt' <dd itemprop*total*'92</dd '
9 </dl'
3 </li'
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 56/70
31 <li'
3 <dl itemscope'
3 <dt'no;e</dt' <dd itemprop*no;e*'orcel</dd '
3 <dt'total</dt' <dd itemprop*total*'1</dd '
33 </dl'
37 </li'
38 </ol'
32
39 </body'
7 </html'
Qote 3ue pessoas e carros tem propriedades em comum nome e total. Kuando ,ocê e=ecutar
docu;ent.getTte;s() ,ai obter uma lista de todos os elementos com ite;sco+e. %omoobter uma lista apenas de pessoas ou de carrosX "ocê pode adicionar a cada item um atributo
ite;t4+e 3ue di6 de 3ue tipo de entidade so a3ueles dados:
rquivo! e"e#$los%30%#icrodata'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Microdata </title'
7 </head '
8 < body'
2
9 <h"'Gesultados do tri;estre</h"'
1 <ol' 11 <li'
1 <dl itemscope itemtype*+essoa*'
1 <dt'no;e</dt' <dd itemprop*no;e*'^oaui;</dd '
1 <dt'total</dt' <dd itemprop*total*'1.87</dd '
13 </dl'
17 </li'
18 <li'
12 <dl itemscope itemtype*+essoa*'
19 <dt'no;e</dt' <dd itemprop*no;e*'Manoel</dd '
<dt'total</dt' <dd itemprop*total*'1.9</dd '
1 </dl'
</li'
<li'
<dl itemscope itemtype*+essoa*'
3 <dt'no;e</dt' <dd itemprop*no;e*'Antonio</dd '
7 <dt'total</dt' <dd itemprop*total*'9.</dd '
8 </dl'
2 </li'
9 <li'
<dl itemscope itemtype*+essoa*'
1 <dt'no;e</dt' <dd itemprop*no;e*'#edro</dd '
<dt'total</dt' <dd itemprop*total*'18.8</dd '
</dl'
</li'
3 </ol'
7
8 <h#'arros ;ais endidos</h#'
2 <ol'
9 <li'
<dl itemscope itemtype*carro*'
1 <dt'no;e</dt' <dd itemprop*no;e*'usca</dd '
<dt'total</dt' <dd itemprop*total*'2</dd '
</dl'
</li'
3 <li'
7 <dl itemscope itemtype*carro*'
8 <dt'no;e</dt' <dd itemprop*no;e*'LrasVlia</dd '
2 <dt'total</dt' <dd itemprop*total*'92</dd '
9 </dl'
3 </li'
31 <li'
3 <dl itemscope itemtype*carro*'
3 <dt'no;e</dt' <dd itemprop*no;e*'orcel</dd '
3 <dt'total</dt' <dd itemprop*total*'1</dd '
33 </dl'
37 </li'
38 </ol'
32
39 </body'
7 </html'
!+ora ,ocê pode e=ecutar: docu;ent.getTte;s(JcarroJ) para obter sF os carros por
e=emplo.
=alando u# idio#a co#u#
"ocê de,e ter notado 3ue pode definir seus prFprios padrDes de metadados com microdata.
Recomendo 3ue antes de criar seu prFprio formato ,erifi3ue se o mesmo problema no 4 foi
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 57/70
resol,ido por al+um. B site .data?,ocabular<.or+ contm al+uns desses formatos
padroni6ados. -or e=emplo para descre,er os dados de sua empresa ou or+ani6ao no in,ente
seu prFprio formato use o formato definido em http://.data?,ocabular<.or+/Br+ani6ation. B
,alor de ite;t4+e de,e ser a prFpria PR* 3ue documenta o formato. "e4a como fica:
rquivo! e"e#$los%30%visie'(t#l
1 <!DO"#$ 5t;l'
<html'
<head '
< meta charset*0,2* /'
3 <title'Cisie #adr`es \e-</title'
7 </head '
8 < body'
2
9 <address itemscope itemtype*5tt+B//data,oca-ular4.org/Organization* '
1 <h" itemprop*na;e*'Cisie #adr`es \e-</h"'
11 <div itemprop*address* itemscope itemtype*5tt+B//data,oca-ular4.org/Address* '
1 < p itemprop*street,address*'Ala;eda dos 0-iatansI 38 , #lanalto #aulista</p'
1 < p'
1 <span itemprop*localit4*'Fão #aulo</span' ,
13 <span itemprop*region*'F#</span' ,
17 <span itemprop*countr4,na;e*'Lrasil</span'
18 </p'
12 < p itemprop*+ostal,code*'8,</p'
19 </div'
<div itemprop*tel*'E33.11.88,8</div'
1 </address'
</body'
</html'
%laro 3ue a ,anta+em de usar o formato padroni6ado ao in,s de in,entar o seu no apenas no
ter o trabalho de pensar os nomes das propriedades. Bs sistemas de busca e outros sistemas 3ue
acessem seu site podem entender e tratar esses dados. B Goo+le 4 fa6 isso ,e4a neste endereo:
http://.+oo+le.com/support/ebmasters/bin/anser.p<XhlYenZanserY181
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 58/70
eguran3a%laro se seu script tentar associar umaPR* fora do domnio do script L listade histFrico isso ,ai resultar numae=ceo de se+urana.
HIST!RICO DE SESSÃO E API STORAGE
ist=rico de 0essão e AP" 0toragePm dos +randes desafios de usabilidade ao se construir aplicaDes eb com a tecnolo+ia atual
apresentar um modelo de na,e+ao consistente para o usurio. ;uas +randes lacunas nos
impediam de fa6ê?lo:
+ão 'avia u,a -or,a si,ples de -a>er co, =ue as a3:es locais do usuário nu,a página -osse, re-letidas na pr9Ci,a. &or eCe,plo! se o usuário are e -ec'a itens e, u, ,enu e, árvore e e, seguida navega para a pr9Ci,a página! era,uito di-cil -a>er co, =ue o ,enu aparece no ,es,o estado na segunda página.
1.
+ão 'avia u,a -or,a si,ples de -a>er co, =ue as a3:es do usuário nu,a página AaC respondesse, correta,ente aosot:es de controle de 'ist9rico do navegador Gvoltar e avan3ar.
2.
'()*5 tra6 formas simples de solucionar os dois problemas.
Hist9rico de essão"ocê pro,a,elmente conhece o ob4eto histor< do na,e+ador e seus mtodos go -ac? e
forKard. le nos permite ,ia 4a,ascript um controle bsico do histFrico de na,e+ao. B
mesmo controle 3ue o usurio ,oltar e a,anar.
B ob4eto histor< foi ,itaminado no '()*5 com dois no,os mtodos:
pus.0tate7datatitle>url?8D acrescenta u,a entrada na lista de 'ist9rico.1.
replace0tate7datatitle>url?8D ,odi-ica a entrada atual na lista de 'ist9rico.2.
%om isso ,ocê pode acrescentar itens L lista de histFrico associando dados ou mesmo uma PR*
a eles. -or e=emplo di+amos 3ue ,ocê tenha três elementos de contedo em sua p+ina e um
script 3ue e=iba um por ,e6 de acordo com os cli3ues do usurio no menu:
function s5oKontent(n){
// $sconde;os todos os ele;entos de conteUdo
for(ar i1>i<>iEE)
docu;ent.get$le;entL4Td(JcontJEi).st4le.dis+la4JnoneJ
// $6i-i;os o ele;ento escol5ido
docu;ent.get$le;entL4Td(JcontJEn).st4le.dis+la4J-loc?J
}
"amos fa6er com 3ue nosso script acrescente uma linha de histFrico ao selecionar um elemento:
function s5oK#age(n){
// $sconde;os todos os ele;entos de conteUdo
for(ar i1>i<>iEE)
docu;ent.get$le;entL4Td(JcontJEi).st4le.dis+la4JnoneJ
// $6i-i;os o ele;ento escol5ido
docu;ent.get$le;entL4Td(JcontJEn).st4le.dis+la4J-loc?J
}
function s5oKontent(n){
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 59/70
eriali>ar Pma outra complicao dos %oo>iesresol,ida pela !-H tora+e o fato de
%oo>ies sF arma6enarem strin+s nosobri+ando a seriali6ar arra<s e ob4etos 4a,ascript. ! especificao da !-Htora+e re+e 3ue 3ual3uer ,alor
4a,ascript pode ser arma6enado erecuperado. Hnfeli6mente em al+unsdos na,e+adores em 3ue testamos os,alores so con,ertidos para strin+s
// Mostra;os o conteUdo escol5ido
s5oK#age(n)
// Fala;os a +:gina atual no 5istrico
5istor4.+us5Ftate({+ageBn}IJonteUdo JEn)
}
Ja6endo isso cada ,e6 3ue o usurio escolher um item no menu o elemento ser e=ibido e uma
linha ser acrescentada no histFrico. B usurio poder acessar normalmente esses itens de
histFrico usando o boto de ,oltar do na,e+ador. %ada ,e6 3ue ele usar o histFrico ser
disparado um e,ento popstate. !ssim para 3ue nosso script este4a completo basta tratar esse
e,ento:
function s5oK#age(n){
// $sconde;os todos os ele;entos de conteUdo
for(ar i1>i<>iEE)
docu;ent.get$le;entL4Td(JcontJEi).st4le.dis+la4JnoneJ
// $6i-i;os o ele;ento escol5ido
docu;ent.get$le;entL4Td(JcontJEn).st4le.dis+la4J-loc?J
}
function s5oKontent(n){
// Mostra;os o conteUdo escol5ido
s5oK#age(n)
// Fala;os a +:gina atual no 5istrico
5istor4.+us5Ftate({+ageBn}IJonteUdo JEn)
}
// buando o usu:rio naegar no 5istricoI ;ostra;os a +:gina relacionadaB
KindoK.on+o+statefunction(e){
if(e.state)
s5oK#age(e.+age)
}
localtorage e sessiontorage!t o '()* 3uando precis,amos arma6enar dados no a+ente de usurio 3ue persistissem
entre as p+inas us,amos %oo>ies. %oo>ies nos permitiam arma6enar o status de um menu
4a,ascript 3ue precisa,a ser mantido entre as p+inas lembrar o nome do usurio o histFrico de
operaDes reali6adas por ele ou a ltima ,e6 3ue ele ,isitou nosso site.
%om o aumento da comple=idade das aplicaDes baseadas em eb duas +randes limitaDes dos
%oo>ies nos incomodam:
"nter'ace comple9a: o c9digo para ar,a>enar $oo8ies envolve co,pleCos cálculos co, datas e controle do no,e dedo,nio.
1.
/imite de arma@enamento: alguns agentes de usuário per,itia, o ar,a>ena,ento de no ,áCi,o 24 $oo8ies! co,apenas *J cada.
2.
'()*5 tra6 uma no,a maneira de arma6enar dados no client a !-H tora+e. Pm ob4eto tora+e
possui os mtodos:
get"tem7ke%8D oté, u, valor ar,a>enado no torage1.
set"tem7ke%value8 guarda u, valor no torage2.
remove"tem7ke%8 eCclui u, valor do torage(.
clear78 li,pa o torage*.
sto dispon,eis dois ob4etos no escopo +lobal @indoA: localtora+e e
sessiontora+e. B ob4eto localtora+e arma6ena os dados no client sem e=pirao
definida. Bu se4a se o usurio fechar o na,e+ador e ,oltar ao site semanas depois os
dados estaro l. B sessiontora+e arma6ena os dados durante a sesso atual de
na,e+ao.
B cFdi+o para arma6enar um ,alor na tora+e se parece com isso:
localFtorage.setTte;(Juser5oiceJI)
3uando ,ocê precisar desse ,alor em outra p+ina:
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 60/70
assim como nos %oo>ies. (oramos para 3ue os a+entes de usurioimplementem corretamente esserecurso.
localFtorage.getTte;(Juser5oiceJ)
ssa interface 4 muito mais simples 3ue a de %oo>ies. )as pode ficar melhor. "ocê
pode usar o tora+e como um arra<. -or e=emplo:
if(!sessionFtorageWJt5e;eJX){
sessionFtorageWJt5e;eJXJoldfurnitureJ>
}
Qo h como isso ser mais simplesW !lm disso o espao de arma6enamento su+erido peladocumentao de 5)& para cada domnio resol,endo acredito 3ue por mais uma dcada o
problema de espao de arma6enamento local.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 61/70
APLICAÇ"ES OFFLINE
*ac.ing '()*5 pro,ê uma maneira de se indicar ao na,e+ador 3ue elementos so necessrios e de,em
ser postos em cache para 3ue uma aplicao funcione offline. B e=emplo da documentao
oficial bastante esclarecedor. ;ê uma olhada na se+uinte p+ina:
rquivo! e"e#$los%33%cloc>'(t#l
1 <!DO"#$ %M&'
<html'
<head '
<title'loc?</title'
3 <script src*cloc?.@s*'</script'
7 <link rel*st4les5eet* href*cloc?.css*'
8 </head '
2 < body'
9 < p'5e ti;e isB <output id *cloc?*'</output'</p'
1 </body'
11 </html'
(rata?se de um id+et de relF+io. -ara funcionar este '()* depende dos ar3ui,os Vcloc>.4sV e
Vcloc>.cssV. -ara permitir 3ue o usurio acesse esta p+ina offile precisamos escre,er um
ar3ui,o de manifesto indicando 3ue PR*s de,em ser postas em cache. "amos preparar uma
no,a ,erso do id+et contendo o manifesto 3ue um ar3ui,o com a e=tenso .manifest e 3ue
de,e ser ser,ido com o tipo )H) te6t/cac5e,;anifest . m nosso caso o ar3ui,o ,aise chamar cloc>.manifest e ter o se+uinte contedo:
A%$ MANT$F
cloc?1.5t;l
cloc?.css
cloc?.@s
!+ora ,e4a o '()* com o ar3ui,o de manifesto lin>ado:
rquivo! e"e#$los%33%cloc>1'(t#l
1 <!DO"#$ %M&'
<html manifest*cloc?.;anifest*'
<head '
<title'loc?</title'
3 <script src*cloc?.@s*'</script'
7 <link rel*st4les5eet* href*cloc?.css*'
8 </head '
2 < body'
9 < p'5e ti;e isB <output id *cloc?*'</output'</p'
1 </body'
11 </html'
Qote 3ue recomendado 3ue ,ocê insira o prFprio '()* principal na lista de PR*s do ar3ui,o
de manifesto embora no se4a necessrio. !o encontrar uma p+ina com um ar3ui,o de
manifesto ,inculado o na,e+ador far cache das PR*s listadas no manifesto e da prFpria
p+ina.
Qote tambm 3ue no necessrio 3ue todas as PR*s para cache este4am importadas nodocumnto atual. B ar3ui,o de manifesto pode contar todas as p+inas de sua aplicao 3ue
forem necessrias para permitir o funcionamento offline inclusi,e a na,e+ao entre p+inas.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 62/70
( o!eto Application*ac.eB ob4eto !pplication%ache controla o status e operaDes de cachin+ da p+ina. le pode ser
acessado ,ia 4a,ascript assim:
KindoK.a++licationac5e
eu mtodo mais interessante o update@A 3ue fa6 com 3ue o a+ente de usurio recarre+ue o
cache da aplicao. !lm disso ele possui a propriedade status cu4o ,alor numrico pode ser
um dos se+uintes:
B C ;$*A*+ +ão 'á u, ar=uivo de ,ani-esto nesta página ou apontando para ela
1 C "+/ # oeto Application$ac'e está ocioso. # cac'e está atuali>ado.
2 **D"$ # ar=uivo de ,ani-esto está sendo aiCado e con-erido.
3 C +(E$/(A+"$ As <@Ls vinculadas no ,ani-esto estão sendo aiCadas.
# C ;P+A4,A+
# cac'e é antigo! ,as ainda não -oi ,arcado co,o osoleto.5 C (G0(/4 # cac'e -oi ,arcado co,o osoleto e precisa ser atuali>ado assi, =ue possvel.
B ob4eto !pplication%ache tambm possui os se+uintes e,entos relacionados a sua mudana de
status:
onc'ec8ing
onerror
onnoupdate
ondo;nloading
onprogress
onupdatereadB
oncac'ed
onosolete
%omo ,ocê pode ,er alm de onerror temos um e,ento para cada um dos status da lista acima.
*ontrole de status da aplicação Qo e=emplo do relF+io acima no h formulrios ou submissDes !4a=. B a+ente de usurios no
troca dados com o ser,idor. !ssim muito fcil fa6er sua aplicao rodar offline mas essa no a realidade da maioria das aplicaDes. "imos no captulo anterior como fa6er arma6enamento
local de dados. %om isso ,ocê pode arma6enar os dados 3ue o na,e+ador de,eria en,iar para o
ser,idor en3uanto a aplicao esti,er offline e to lo+o ela este4a online en,iar tudo.
-ara saber se a aplicao est online basta acessar a propriedade on*ine do ob4eto
indo.na,i+ator:
function sala(dados){
if(KindoK.naigator.on&ine){
eniaA@a6(dados)
}else{
sala&ocal(dados)
}
}
para disparar o en,io 3uando a aplicao esti,er online e a,isar o usurio 3uando ela esti,er
offline usamos os e,entos ononline e onoffline do ob4eto indo:
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 63/70
KindoK.ononlinefunction(){
eniaA@a6(o-te;&ocal())
docu;ent.get$le;entL4Td(JKarningJ).inner%M&JJ
}
KindoK.onofflinefunction(){
docu;ent.get$le;entL4Td(JKarningJ).inner%M&JA+licaPão offline.J
}
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 64/70
SCROLL IN TO VIE# E HIDDEN
0crolling into viePm tru3ue simples mas muito til . "ocê pode fa6er:
docu;ent.get$le;entL4Td(JaisoJ).scrollTntoCieK()
Hsso ,ai rolar a p+ina at 3ue o elemento com o id Va,isoV este4a ,is,el no topo do ,ieport.
"ocê pode passar um parMmetro opcional top:
docu;ent.get$le;entL4Td(JaisoJ).scrollTntoCieK(false)
B ,alor default true. e ,ocê passar false a rola+em ,ai dei=ar o ob4eto ,is,el na base do
,ieport.
.iddenBcultar e e=ibir elementos uma das tarefas mais comuns em Na,ascript. m '()*5 e=iste um
atributo especfico para isso o atributo hidden. !o inser?lo em um elemento assim:
<di 5idden'iI se esconde!</di'
Bu assim:
<di 5idden*true*'iI se esconde!</di'
B elemento estar oculto.
'idden e Oavascript !cessar o atributo hidden em Na,ascript muito con,eniente:
function sKitc5$le;ent(el;){
if(el;.5idden)
el;.5iddenfalse
else
el;.5iddentrue
}
%laro ,ocê pode fa6er:
function sKitc5$le;ent(el;){
el;.5idden!el;.5idden
}
u+iro 3ue ,ocê sempre use o atributo hidden. ;escobrir se o elemento est oculto lendo as
propriedades displa< e ,isibilit< do % alm de dar mais trabalho pode +erar confuso.
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 65/70
GEOLOCATION API
M)todos de eolocali@ação' três populares maneiras de um a+ente de usurio descobrir sua posio no +lobo:
eolocali@ação "P o ,étodo usado pela ,aioria dos navegadores ;e e, co,putadores. Através de consultas ;'ois e servi3os de locali>a3ão de 6&! vai deter,inar a cidade ou região e, =ue voc está.
4riangulação P,0 "ispositivos conectados a u,a rede de ce lulares e se, u, 7&! ou co, o 7& desligado! pode, deter,inar sua posi3ão pela
triKngula3ão das antenas 7&@ pr9Ci,as. e, ,ais preciso =ue o ,étodo aseado e, 6&! vai ,ostrar e, =ue parte do airrovoc está.
P0 o ,étodo ,ais preciso. E, condi3:es ideais! a ,arge, de erro é de apenas 5 ,etros.
mbora essas se4am as três maneiras mais populares de se resol,er o problema podem no ser
as nicas. !l+uns a+entes de usurio podem usar uma combinao desses mtodos ou mesmo
um no,o mtodo 3ue ,enha a ser in,entado. -or isso a Geolocation !-H a+nFstica em relao
ao mtodo usado. ' apenas uma maneira de li+ar e desli+ar o Vmodo de alta precisoV o 3ue
,ai ter si+nificado diferente em cada a+ente de usurio.
-ara obter a posio do usurio basta e=ecutar o script:
naigator.geolocation.geturrent#osition(s5oK+os)
Bnde s5oK+os uma funo callbac> 3ue ,ai receber um ob4eto de posicionamento. "e4a um
e=emplo:
function s5oK+os(+osition){
lat+osition.coords.latitude
lon+osition.coords.longitude
alert(J"our +ositionB JElatEJIJElon)
}
%laro ,ocê pode fa6er o 3ue 3uiser abrir um mapa submeter a posio ,ia !4a= en,iar os
dados para um ebser,ice etc.
B mtodo +et%urrent-osition recebe dois outros parMmetros. B primeiro uma funo para
tratamento de erro. B se+undo um ob4eto de confi+urao.
Tratando errosKuando o script tenta acessar o posicionamento o na,e+ador e=ibe uma barra como esta:
B usurio pode ento escolher se dese4a ou no compartilhar sua posio com o site. !lm de o
usurio poder di6er no muita coisa pode dar errado na hora de obter a +eolocali6ao. -ara
tratar isso ,ocê pode passar o se+undo parMmetro a +et%urrent-osition:
naigator.geolocation.geturrent#osition(s5oK+osIerro+os)
%aso al+o dê errado a funo erropos ,ai receber um ob4eto -ositionrror 3ue tem o atributo
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 66/70
code 3ue pode ter um dos se+uintes ,alores:
1 C Permissão negada# usuário clicou e, Snão co,partil'arS.
2 C Posição indisponível # agente de usuário está desconectado! os satélites de 7& não pudera, ser alcan3ados ou algu, erro se,el'ante.
3 C 4imeout Te,po esgotado ao oter u,a posi3ão. Voc pode de-inir o te,po ,áCi,o ao c'a,ar get$urrent&osition.
B C rro descon.ecido
Algu,a outra coisa i,pediu o agente de usuário de oter u,a posi3ão.
,9o trate a res$osta do usurio co#o u# erro
m sua funo de tratamento de erro se obti,er o cFdi+o de erro 1 por fa,or no incomode o
usurio com mensa+ens de erro. le escolheu no compartilhar sua posio com o site. (al,e6 a
melhor atitude se4a no fa6er nada nesse momento.
# oeto de con-igura3ãoB terceiro parMmetro de +et%urrent-osition um ob4eto de confi+urao 3ue pode ter as
se+uintes propriedades:
ena!leig.Accurac%e true! liga o ,odo de alta precisão. +u, celular isso pode instruir o navegador! por eCe,plo! a usar o 7& ao invés datriangula3ão 7&@
timeout # te,po e, ,ilissegundos =ue o agente do usuário vai esperar pela posi3ão antes de disparar u, erro tipo (.
ma9imumAge# te,po! e, ,ilissegundos! =ue o navegador pode cac'ear a posi3ão.
;atc'&ositione o 3ue ,ocê dese4a rastrear a posio do usurio continuamente pode usar ao in,s de
+et%urrent-osition o mtodo atch-osition. le tem a mesma assinatura de +et%urrent-osition:
Knaigator.geolocation.Katc5#osition(s5oK+osIerro+os)
! diferena 3ue a funo shopos ser chamada toda ,e6 3ue a posio do usurio mudar. B
,alor de retorno um nmero 3ue pode ser usado posteriormente para cancelar o atcher:
naigator.geolocation.clear\atc5(K)
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 67/70
UNDO
( o!eto ;ndoManager B a+ente de usurio de,e arma6enar um histFrico de alteraDes para cada documento carre+ado.
sse histFrico controlado pelo ob4eto Pndo)ana+er acess,el atra,s de
KindoK.undoManager . B histFrico +uarda dois tipos de alteraDes:
Alterações +(M # pr9prio 'ist9rico de altera3:es do navegador! as altera3:es "#M são inseridas auto,atica,ente no 'ist9rico =uando ousuário usa u, ca,po de edi3ão.
(!etos undo#s oetos undo são inseridos no 'ist9rico e controlados pelos seus scripts. &or eCe,plo! u,a aplica3ão de e,ail pode guardar u, oeto undo representando o -ato de =ue o usuário ,oveu u, e,ail de u,a pasta para outra.
B ob4eto Pndo)ana+er possui os se+uintes mtodos e propriedades:
lengt.o n),ero de entradas no 'ist9rico
positiono n),ero da entrada atual no 'ist9rico
add7datatitle8adiciona u,a entrada espec-ica no 'ist9rio. data pode ser u, oeto literal co, dados aritrários.title é co,o essaentrada vai aparecer descrita na lista do 'ist9rico
remove7inde98re,ove u,a entrada espec-ica do 'ist9rico
clear;ndo78re,ove todas as entradas antes da atual no 'ist9rico
clear,edo78re,ove todas as entradas ap9s a atual no 'ist9rico
!lm disso os itens no histFrico podem ser acessados com
KindoK.undoManagerWinde6X .
@espondendo Qs a3:es de undo e redo%ada ,e6 3ue o usurio disparar uma ao de undo ou redo e o item do histFrico for um ob4eto
undo ser disparado o e,ento correspondente indo.onundo ou indo.onredo. !s funDes
associadas a estes e,entos recebero como parMmetro um ob4eto e,ent contendo uma
propriedade data cu4o ,alor o ob4eto undo 3ue ,ocê inseriu no histFrico.
"e4a o e=emplo:
KindoK.onundofunction(e){
alert(JGefazer a alteraPãoB JEe.data)
}
"isparando as a3:es de undo e redo
e ,ocê 3uiser oferecer em sua aplicao botDes para undo e redo basta 3ue eles e=ecutem:
docu;ent.e6eco;;and(JundoJ)
Bu:
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 68/70
docu;ent.e6eco;;and(JredoJ)
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 69/70
a de Referência http://tableless.com.br/html5/print.php
de 70 29/08/2011 17:0
7/18/2019 Guia de Referência - HTML 5
http://slidepdf.com/reader/full/guia-de-referencia-html-5 70/70
a de Referência http://tableless.com.br/html5/print.php