HTML 5 - TCC MARLLON BIANCHINI

UNIDADE DE ENSINO SUPERIOR VALE DO IGUAÇU
FACULDADES INTEGRADAS DO VALE DO IGUAÇU
CURSO DE SISTEMAS DE INFORMAÇÃO
MARLLON GIOVANI BIANCHINI
ANÁLISE SOBRE A TECNOLOGIA HTML5, MOSTRANDO OS
PRINCIPAIS PONTOS POSITIVOS E NEGATIVOS DA EVOLUÇÃO,
BEM COMO MOSTRAR AS PRINCIPAIS NOVIDADES
UNIÃO DA VITÓRIA
2012

2
ANÁLISE SOBRE A TECNOLOGIA HTML 5, MOSTRANDO OS
Trabalho de Conclusão de Curso apresentado
ao curso de Sistemas de Informação das
Faculdades Integradas Vale do Iguaçu -
UNIGUAÇU de União da Vitória - PR, para
obtenção do grau de Bacharel em Sistemas de
Informação.
Orientação: Prof. Rodolfo Kuskoski
UNIÃO DA VITÓRIA
2012

3
ANÁLISE SOBRE A TECNOLOGIA HTML5, MOSTRANDO OS
por
Trabalho de Conclusão de Curso aprovado com nota 10, para obtenção do grau de
Bacharel em Sistemas de Informação, pela Banca examinadora formada por:
Prof. Rodolfo Kuskoski
Orientador
Prof. Andréa Tomko
Membro
Prof. André Weizmann
Membro
RESULTADO : APROVADO
UNIGUAÇU: 09/11/2012

0
AGRADECIMENTOS
Agradeço a Deus pela vida que tenho. Agradeço também, a minha família e aos
amigos por compreenderem minhas ausências durante o período de trabalho de conclusão de
curso e o apoio ofertado, me convidando para churrascos e confraternizações em que eu não
pude comparecer devido ao tempo dedicado a esse trabalho.
Agradeço ao meu pai e mãe, pela comida, além da ajuda financeira fornecida durante
a faculdade.
Um agradecimento especial a minha namorada vulgo momozão, digo May, por me
ajudar nas dificuldades e entender a ausência nos momentos de estudo, muito companheira e
querida, um amorzinho.
A minha chefe por permitir que eu fica-se durante o horário de almoço estudando e
desenvolvendo este trabalho.
Aos professores que durante esses quatro anos contribuíram no meu crescimento
profissional e acadêmico. Um agradecimento ao meu orientador pela liberdade na elaboração
desse trabalho.

1
“Confie na sua intuição e busque respostas para as suas próprias perguntas.”
Flávio Fachel, 2011

2
LISTA DE FIGURAS
Figura 1 – Declaração cabeçalho. ......................................................................................................... 16
Figura 2 – Exemplo de código para uma pagina em html..................................................................... 18
Figura 3 –Execução pagina html........................................................................................................... 19
Figure 4 – Doctype em html 4.01.......................................................................................................... 26
Figura 5 – Doctype em HTML5............................................................................................................ 26
Figure 6 – Charset em HTML 4.01....................................................................................................... 26
Figura 7 – Declaração Charset em HTML5.......................................................................................... 27
Figura 8 – Esquema lógico de uma pagina ........................................................................................... 28
Figura 9 – Código Header..................................................................................................................... 29
Figura 10 – Execução Header ............................................................................................................... 29
Figura 11 – Código section com header................................................................................................ 30
Figura 12 – Execução section e header ................................................................................................. 30
Figura 13 – Código nav com lista ordenada.......................................................................................... 31
Figura 14 – Execução nav..................................................................................................................... 31
Figura 15 – Código Article.................................................................................................................... 32
Figura 16 – Execução Article................................................................................................................ 33
Figura 17 – Código Aside ..................................................................................................................... 34
Figura 18 – Execução Aside.................................................................................................................. 34
Figura 19 – Código Footer. ................................................................................................................... 35
Figura 20 – Execução Footer. ............................................................................................................... 36
Figura 21 – Código Hgroup .................................................................................................................. 37
Figura 22 – Execução Hgroup............................................................................................................... 37
Figura 23 – Código Áudio..................................................................................................................... 39
Figura 24 – Execução áudio.................................................................................................................. 39
Figura 25 – Exemplo código Video formato MP4................................................................................ 41
Figura 26 – Execução MP4................................................................................................................... 41
Figura 27 – Código Figure e FigCaption .............................................................................................. 42
Figura 28 – Execução Figure e Figcaption............................................................................................ 43
Figura 29 – Codigo Marcação Bloco Figure e FigCaption ................................................................... 43
Figura 30 – Execução Bloco Figure e Figcaption................................................................................. 44
Figura 31 – Codigo Search.................................................................................................................... 45
Figura 32 – Execução Search................................................................................................................ 46
Figura 33 – Exemplo search em execução............................................................................................ 46
Figura 34 – Código para Tel com Placeholder e Pattern....................................................................... 47
Figura 35 – Execução Tel...................................................................................................................... 48
Figura 36- Execução Tel mostrando erros ............................................................................................ 49
Figura 37 – Código URL....................................................................................................................... 50
Figura 38 – Execução simples URL...................................................................................................... 50
Figura 39 – Execução URL com formato invalido ............................................................................... 51
Figura 40 – Código Range .................................................................................................................... 52
Figura 41- Execução Range .................................................................................................................. 53

3
Figura 42 – Código email...................................................................................................................... 54
Figura 43 – Execução Email simples .................................................................................................... 54
Figura 44 – Execução Email com erro.................................................................................................. 55
Figura 45- Código Number ................................................................................................................... 56
Figura 46 – Execução Number.............................................................................................................. 57
Figura 47 – Codigo Date Time.............................................................................................................. 58
Figura 48 – Execução Date Time.......................................................................................................... 58
Figura 49 – Código Date....................................................................................................................... 59
Figura 50 – Execução Date ................................................................................................................... 60
Figura 51 – Código Month.................................................................................................................... 61
Figura 52 – Execução Month ................................................................................................................ 61
Figura 53 – Codigo Week ..................................................................................................................... 62
Figura 54 – Execução Week.................................................................................................................. 63
Figura 55 – Código Time ...................................................................................................................... 64
Figura 56 – Execução Time .................................................................................................................. 64
Figura 57 – Código Datetime Local...................................................................................................... 65
Figura 58 – Execução DateTimeLocal.................................................................................................. 65
Figura 59- Código Color ....................................................................................................................... 66
Figura 60- Execução Color Chrome e Opera........................................................................................ 67
Figura 61 – Execução Color Ie, safari e Firefox ................................................................................... 67
Figura 62 – Pagina do Google............................................................................................................... 69
Figura 63- Código Autofocus................................................................................................................ 69
Figura 64- Exemplo de execução autofocus.......................................................................................... 70
Figura 65 – Código exemplo min e max............................................................................................... 71
Figura 66- Execução Min e Max........................................................................................................... 71
Figura 67- Código Multiple................................................................................................................... 72
Figura 68 – Execução simples doMultiple............................................................................................ 72
Figura 69 Execução Detalhada multiple ............................................................................................... 73
Figura 70 – Código Required com Pattern............................................................................................ 74
Figura 71 – Execução Pattern com Placeholder.................................................................................... 74
Figura 72 – Código Step........................................................................................................................ 75
Figura 73 – Execução Step.................................................................................................................... 76
Figura 74 – Código Placeholder............................................................................................................ 77
Figura 75 – Execução Placeholder........................................................................................................ 77
Figura 76- Código Required.................................................................................................................. 78
Figura 77- Execução Required.............................................................................................................. 79
Figura 78 – Código Datalist .................................................................................................................. 80
Figura 79- Execução Datalist................................................................................................................ 80
Figura 80 – Código Details e Summary................................................................................................ 81
Figura 81 – Execução Details e Sumarry no Chrome ........................................................................... 82
Figura 82- 2ª Execução Details e SummaryChrome............................................................................. 82
Figura 83 – Execução Details e Summary dando erro. ......................................................................... 83
Figura 84- Código Textarea com Spellcheck........................................................................................ 84
Figura 85- Execução Spellcheck........................................................................................................... 85
Figura 86- Código Meter....................................................................................................................... 86

4
Figura 87 – Execução Meter com Sucesso............................................................................................ 86
Figura 88- Execução com problemas.................................................................................................... 87
Figura 89 – Código Progress................................................................................................................. 87
Figura 90 – Execução Progress............................................................................................................. 88

5
LISTA DE TABELAS
Tabela 1 – Comparativo Motores de renderização e navegadores............................................24
Tabela 2 – Atributo Áudio........................................................................................................38
Tabela 3 – Atributo Vídeo........................................................................................................40

6
LISTA DE SIGLAS
API - Application Programming Interface
ARPA - Agencia de Projetos de Pesquisas Avançadas
ARPANET – Advanced Research Projects Agency Network
CERN - Center for Nuclear Physics
CSS - Cascatyng Style Shee
DOM – Document Object Model
HTML - Hyper Text Markup Lenguage
HTTP - Hipertext Transfer Protocol
IETF - Internet Engineering Task Force
ITCP - Internet Transmition Control Program
NGLayout - Next Generation Layout
OMG - Object Management Group
RIA – Rich Internet Application
SGML - Standard Generalized Markup Language
TCP/IP - Transmission Control Protocol/Internet Protocol
URI - Universal Resource Indentifier
URL - Universal Resource Locator
W3C - World Wide Web Consortium
XHTML - EXtensibleHyperText Markup Language
XML – Extensible Markup Language

7
RESUMO
BIANCHINI. Marllon. Giovani. Análise sobre a tecnologia HTML5, mostrando os
principais pontos positivos e negativos da evolução, bem como mostrar as principais
novidades. Trabalho de Conclusão de Curso. Sistemas de Informação, Faculdade Integradas
do Vale do Iguaçu – União da Vitória – Paraná - 2012
O HTML (Hyper Text Markup Lenguage) é uma linguagem de marcação de texto,
criada no inicio da década de 1990 por TIM BERNERS LEE e que agora esta chegando a sua
quinta versão, devido a necessidade de que uma linguagem acompanhe os novos padrões em
que a internet encontra-se atualmente.
Dois grupos são responsáveis por essa nova especificação o W3C - (W3C - World
Wide Web Consortium) e WHATWG (Web Hypertext Application Technoly Working Group)
que buscam alcançar uma padronização na forma como a linguagem é escrita sem deixar de
oferecer suporte as versões anteriores. De modo com que os desenvolvedores fazem com que
o usuário consiga acesso as informações, independente de dispositivo de acesso, dependendo
apenas de um navegador atualizado.
Os desenvolvedores buscam promover uma maior integração entre o código fonte e o
navegador, dispensando a necessidade da instalação de plug-ins. Onde com a chegada dos
novos elementos de marcação é possível que os mecanismos de busca possam identificar com
maior facilidade as seções de uma página.
Aplicações como validações de formulários, execução de áudio e vídeo, tem execução
nativa, dependendo apenas do navegador estar atualizado e oferecer suporte a esses recursos.
Palavras Chaves: APLICAÇÕES, CÓDIGO, HTML5, NAVEGADOR,
DESENVOLVIMENTO;

8
ABSTRACT
BIANCHINI. Marllon. Giovani. Analysis of the technology HTML5, showing the main
strengths and weaknesses of evolution as well as the main news show. Work completion
of course. Information Systems, Faculty of Integrated Vale do Iguaçu - Union City -
Paraná - 2012
HTML (Hyper Text Markup Lenguage) is a markup language text, created at the
beginning of the 1990s by Tim Berners Lee and now is coming to its fifth version, because
the need for a language that accompanies the new standards that internet is today.
Two groups are responsible for this new specification, the W3C (W3C - World Wide
Web Consortium) and WHATWG (Web Hypertext Application Working Group Technoly)
seeking to achieve a standardization in the way the language is written while supporting
previous versions. So that developers make the user able to access information regardless of
access device, depending only a web browser.
Developers seek to promote greater integration between the source code and the
browser, eliminating the need to install plug-ins. Where the arrival of the new markup
elements is possible that search engines can more easily identify the sections of a page.
Applications and validations forms, running audio and video, has native execution,
depending only on the browser being updated and support these resources.
Keyword: APLICATION, BROWSER, CODE, HTML5, DEVELOPERS

9
SUMÁRIO
1. INTRODUÇÃO...............................................................................................................11
1.2 Objetivos....................................................................................................................12
1.2.1 Objetivo geral.........................................................................................................12
1.2.1 Objetivos específicos..............................................................................................12
2. REFERENCIAL TEÓRICO..........................................................................................14
2.1 A Evolução da Internet ..............................................................................................14
2.1.1 TCP/IP......................................................................................................................15
2.1.2 O Protocolo HTTP ...................................................................................................15
2.1.3 URL..........................................................................................................................16
2.1.4 Word Wibe Web.......................................................................................................16
2.2 O surgimento do Html e a interação com outras linguagens ..........................................17
2.2.1 HTML.......................................................................................................................17
2.2.2 XML – eXtensible Markup Language .....................................................................19
2.2.3 XHTML....................................................................................................................19
2.2.4 CSS – Cascatyng Style Sheet..................................................................................20
2.2.5 RIA – Rich Internet Application..............................................................................20
2.2.6 Javascript..................................................................................................................20
2.3 O Grupo de pesquisas W3C............................................................................................21
2.3.1 Web Semântica.........................................................................................................21
2.3.2 DOM –Document Object Model..............................................................................22
2.4 Whatwg...........................................................................................................................23
2.5 Motores de Renderização................................................................................................23
3 HTML5................................................................................................................................25
3.1 Declaração Doctype........................................................................................................25
3.2 MetaCharset....................................................................................................................26
3.2.1 ISO 8859-1 ..............................................................................................................27
3.3 Elementos de marcação...................................................................................................27
3.3.1 Header ......................................................................................................................28
3.3.2 Section......................................................................................................................30
3.3.3 Nav ...........................................................................................................................31
3.3.4 Article.................................................................................................................32
3.3.5 - Aside ......................................................................................................................33
3.3.6 - Footer.....................................................................................................................35
3.3.7-Hgroup .....................................................................................................................36
3.4 Multimídia ......................................................................................................................37
3.4.1 Áudio........................................................................................................................38

10
3.4.2 Vídeo........................................................................................................................40
3.4.3 Figure e Figure Caption ...........................................................................................42
3.5 Novos campos para formulários .....................................................................................44
3.5.1 Search.......................................................................................................................45
3.5.2 Tel.............................................................................................................................47
3.5.3 URL..........................................................................................................................49
3.5.4 Range........................................................................................................................52
3.5.5 Email ........................................................................................................................53
3.5.6 Number.....................................................................................................................56
3.5.7 Date Time.................................................................................................................57
3.5.8 Date .........................................................................................................................59
3.5.9 Month .......................................................................................................................60
3.5.10 Week.......................................................................................................................62
3.5.11 Time ......................................................................................................................63
3.5.12 Date Time-Local ....................................................................................................65
3.5.13 Color.......................................................................................................................66
3.6- Validação dos formulários.............................................................................................68
3.6.1 AutoFocus ................................................................................................................68
3.6.2 Mínimo e Máximo....................................................................................................70
3.6.3 Multiple....................................................................................................................71
3.6.4 Pattern.......................................................................................................................73
3.6.5 STEP.........................................................................................................................75
3.6.6 Maxlenght.................................................................................................................76
3.6.7 Placeholder...............................................................................................................76
3.6. 8 - Required................................................................................................................78
3.7 - Atributo Data list ..........................................................................................................79
3.8 Sumary e Details.............................................................................................................81
3.9 - Conteúdo editável.........................................................................................................84
3.10 Spellcheck.....................................................................................................................84
3.11 Meter.............................................................................................................................86
3.12 Progress........................................................................................................................87
3.13 Elemento Canvas ..........................................................................................................88
3.13.1. BIBLIOTECA MODERNIZR ..............................................................................89
3.14 GEOLOCALIZAÇÃO..................................................................................................89
4. CONCLUSÃO.....................................................................................................................90
5. REFERÊNCIAS .................................................................................................................92
6.GLOSÁRIO..........................................................................................................................96

11
1. INTRODUÇÃO
O avanço da internet nos últimos anos fez com que novas tecnologias aparecessem.
Surgem, então, ferramentas com a função de suprir as necessidades e acompanhar esses
avanços tecnológicos.
Surge então o HTML5, visando facilitar e reduzir os custos de desenvolvimento de
sites e aplicações web, além de estabelecer novos padrões de trabalho. Incentivados pela W3C
– World Wide Web Consortium, grupo de pesquisas formado por grandes empresas como
Apple, Google, Mozilla Foundation, Microsoft e outras empresas, além de uma junção com o
WHATWG (Web Hypertext Application Technoly Working Group) um grupo de trabalho para
tecnologias de hipertexto em aplicações para WEB. Onde ambos os grupos tem como objetivo
promover uma mudança e padronização na linguagem HTML(Hyper Text Markup Lenguage).
Buscando no processo de criação do documento fazer com que haja uma estruturação mais
simples, de forma padrão nas paginas de internet.
Com a criação de tags especificas para cada sessão da página, como cabeçalho,
conteúdo, propaganda e rodapé. Promovendo uma melhor organização, visando facilitar
principalmente o trabalho do desenvolvedor, além de facilitar a vida dos mecanismos de
buscas, promovendo assim uma melhor semântica a página.
Uma das grandes novidades no HTML5 é a possibilidade do usuário utilizar os
recursos mais recentes de áudio e vídeo de forma mais simples. Tanto na parte do usuário que
ira usufruir dessas tecnologias, dispensando a instalação de plug-ins e ferramentas para
visualização do arquivo, quanto na parte do desenvolvedor que não precisara ficar buscando
possíveis alternativas para o desenvolvimento, apenas focando no formato do conteúdo.
O HTML5 é a versão mais recente do HTML, e entre suas principais vantagens está há
interação com as mais diversas plataformas de acesso, sendo elas
computadores, tablets, smartphones entre outros dispositivos com acesso a internet. Fazendo
com que haja um acesso quase universal as vantagens oferecidas pela linguagem, dependendo
apenas do usuário ter um navegador atualizado e que venha a oferecer suporte a linguagem.
Outra mudança do HTML5 é na forma de armazenamento e execução de programas
que venham a exigir a transferência, inserção e validação de dados. Tornando muito mais
simples a criação de elementos para a validação de campos para os formulários. Onde o
navegador fica responsável pela validação dos dados, dependendo apenas do tipo de validação

12
programada, em alguns casos dispensando até a necessidade de criação de um tipo de
validação através de javascript. Tudo isso através da API(Application Programming
Interface) responsável pelo controle e inserção dos dados, que varia de navegador para
navegador, boa parte dos navegadores já vem oferecendo recurso a esses tipos de aplicações.
A inclusão do elemento canvas junto ao HTML5 é outra importante mudança, fazendo
com que seja possível realizar a criação e manipulação de imagens através de Pixels,
controlados a partir de API javascript, inseridos no documento da página. Além da
possibilidade de criação de conteúdos mais interativos ao usuário, como a criação de
aplicações editáveis, correção ortográfica, geolocalização e menus interativos.
1.1 Justificativa
Por se tratar de uma linguagem em desenvolvimento, ainda sem uma versão final,
proporciona muitos pontos a serem explorados, como por exemplo, as principais
características da nova tecnologia, bem como as principais melhorias e novidades.
1.2 Objetivos
1.2.1 Objetivo geral
Realizar uma análise sobre a linguagem HTML5, mostrando as principais novidades,
assim como as melhorias decorrentes da evolução.
1.2.1 Objetivos específicos
-Coletar e apresentar dados sobre compatibilidade da nova linguagem junto aos navegadores.
-Analisar os benefícios em relação a integração com outras tecnologias.
-Apresentar as melhorias da tecnologia se comparado a versões anteriores.

13
1.3 Metodologia da Pesquisa
Estudo cuja pesquisa se enquadra como bibliográfica, pois busca dados e conseqüentes
informações sobre o objetivo geral proposto, em dados secundários, ou seja, já publicados em
livros, revistas, artigos científicos, entre outros, impressos ou digitais. Esta pesquisa também
se enquadra como qualitativa e exploratória, pois busca, através de exemplos práticas, afirmar
os conceitos vistos no referencial teórico.

14
2. REFERENCIAL TEÓRICO
2.1 A Evolução da Internet
Teve início com a criação da ARPA (Agencia de Projetos de Pesquisas Avançadas) do
departamento de defesa dos Estados Unidos no ano de 1957, com a finalidade de desenvolver
pesquisas e gerar ideias para a criação de novas tecnologias. No inicio do ano de 1960, Joseph
Liklider fez uma publicação, onde ele argumentava a ideia de que computadores em poderiam
promover consulta a informações e fornecer armazenamento de dados. Mais tarde no ano de
1962, foi criado o grupo de pesquisas (ARPANET –Advanced Research Projects Agency
Network) que tinha como finalidade de realizar pesquisas em computadores, no ano de 1967
começaram a aparecer alguns resultados das pesquisas, e então no ano de 1969 uma rede
formada por quatro computadores estava formada, pronta e funcionando.
“A ARPANET era uma rede de pesquisa que foi criada pelo Departamento de defesa
dos Estados Unidos. Pouco a pouco, centenas de universidades e repartições públicas foram
sendo conectadas a ela através de linhas telefônicas privadas.”(TANENBAUM, pg.39)
Porem haveria um problema, conectar redes físicas de maior distancia, e então foi
desenvolvida uma solução que era a de que deveriam ser enviadas em pequenas partes
chamadas de pacotes. Entretanto devido ao avanço de tal tecnologia, começaram a aparecer
outros problemas, como fazer com que redes separadas se comunicassem.
Foi então que no ano de 1974, Robert Kahum, pesquisador da ARPA em parceira com
Vinton Cerf, desenvolveram um rascunho de um protocolo que com recebia o nome de ITCP-
“Internet TransmitionControlProgram”-“Programa de controle de transmissão entre redes”
que tinha como principal função mascarar a diferença entre os protocolos de rede, fazendo
com que se comunicassem assim através de um novo padrão, reduzindo assim o papel da rede
e movendo uma maior responsabilidade ao servidor na transferência de pacotes.
Então após uma série de pesquisas, no ano de 1982, surgia o protocolo “TCP/IP”,
sendo reconhecido internacionalmente e tornando-se protocolo padrão da ARPA para
transferência de dados, possibilitando a conexão entre as maquinas. Esse protocolo é utilizado
até os dias atuais.
Mais tarde no final da década de 80, incentivada pelo crescente numero de
computadores pessoais, a internet já começava a se consolidar, então foi ai que Tim Berners-

15
Lee veio a propor um projeto onde de hypertext para transmissão de conteúdo entre
pesquisadores espalhados por diferentes locais.
“A Web nasceu da necessidade de se fazer com que grupos de cientistas de diferentes
nacionalidades pudessem colaborar uns com os outros através da troca de relatórios, plantas,
desenhos, fotos e outros documentos.” (TANENBAUM, pg.778).
Esse projeto ficou conhecido como Word Wide Web, onde inicialmente é a estrutura
que permite o acesso a documentos vinculados a internet. Porem só veio a entrar em
funcionamento em meados dos anos 1990 à 1991, com o surgimento do Hypertext que era a
interface para navegação e publicação destas informações .
2.1.1 TCP/IP
É dividido em camadas, cada uma com tarefas específicas, sendo divido em TCP e IP.
IP é o responsável pelo endereçamento dos pacotes de dados para os demais protocolos. Já o
TCP é quem garante a continuidade do fluxo de informação, cuidando para que o processo
venha a ocorrer sem maiores problemas.
Os elementos que formam a base da internet são o modelo de referência
TCP/IP epilha de protocolos TCP/IP possibilitando a criação de um serviço
universal[..]uma maquina pertence á internet quando ela executa a pilha de
protocolos TCP/IP, tendo um endereço IP e podendo enviar pacotes IP a
todas as outras maquinas da Internet. (TANENBAUM, pg.60)
2.1.2 O Protocolo HTTP
É um protocolo de comunicação que trabalha na camada de aplicação, o seu
funcionamento é definido através de dois tipos de mensagens:
- Request (Pedido): é responsável por realizar a chamada através de uma url
exemplo:http://www.uniguacu.edu.br.
- Response (Resposta) é a mensagem que é enviada pelo servidor em resposta a solicitação
gerada pelo cliente.

16
De acordo com Albuquerque a comunicação entre servidores e navegadores
ocorre através de regras definidas no HTTP, onde o mesmo vem a utilizar o
protocolo TCP para realizar o transporte e estabelecer a conexão. As
conexões são iniciadas pelos navegadores que enviam o pedidoe encerradas
pelo servidor após o envio da resposta.(TCP /IP – Internet: Procolos&
Tecnologias, pg 268)
2.1.3 URL
Trabalhando em cima do protocolo HTTP, a URL tem a função de realizar a
solicitação de uma página web. Segundo (FORMAGGIO pg.45) uma URL é composta por
um protocolo, o domínio e a URI. Onde o protocolo será o “HTTP”, o domínio será aquele
conhecido como endereço do site e a URI será a estrutura ou nome dos documentos que
compõem a URL.
Figura 1 – Declaração cabeçalho.
Fonte :Formaggio Pg. 45
Um Browser envia uma requisição HTTP para uma URL especifica, e o
servidor, hospedando aquela URL, envia de volta uma resposta HTTP.[...] o
protocolo usa um formato simples em texto puro. Os tipos de requisição são
GET(obter), POST (enviar), HEAD (cabeçalho), PUT(colocar),
DELETE(apagar), OPTIONS(opções) e TRACE (depurar). (SOUDERS,
CapituloB- Visão Geral do HTTP)
2.1.4 Word Wibe Web

17
As Pesquisas tiveram inicio a partir no ano de 1990 por pesquisadores do CERN(
Center for Nuclear Physics), onde Tim-Berners-Lee era o responsável por conduzir as
pesquisas, que tinham por finalidade realizar uma troca de documentação entre pesquisadores
espalhados por diferentes locais.
“A Word Wide Web é composta por servidores que armazenam documentos escritos
em uma linguagem de formatação e por programas, chamados de navegadores, que sabem
interpretar esses documentos.”(ALBUQUERQUE, pg 267)
2.2 O surgimento do Html e a interação com outras linguagens
O HTML(HyperTextMarkupLenguage) pode ser caracterizado como uma linguagem
para marcação de texto. Surgiu no ano de 1990, criado por Tim Berners-Lee que tinha como
foco a ideia de promover a troca de conteúdo eletrônico entre pesquisadores espalhados por
diferentes locais.
2.2.1 HTML
Foi criado um protótipo de navegador que inicialmente veio a receber o nome de Word
Wide Wibe, com a ideia de promover a troca de conteúdo através de Links Globais,
trabalhando em cima de um protocolo HTTP (Hyper Text Transfer Protocol). Utilizava os
padrões da SGML (Standard Generalized Markup Language) e então no ano de 1990 nas
estações de trabalho da antiga CEO da Apple, foi realizada uma troca de arquivos eletrônicos
através de hyper-marcação de texto, dando inicio assim a era WEB.
O HTML veio a passar por uma série de revisões e alterações, durante o seu processo
de evolução, inicialmente no ano de 1995 foi criado o HTML workgroup, que tinha como
participantes a NCSA, Mosaic e IETF, foram eles os responsáveis pela conclusão do HTML
2.0 e inicio da utilização do Javascript nas paginas. Mais tarde no ano de 1996 surge o grupo
de pesquisas da W3C e com ele vem a evolução, surgindo assim o HTML 3.2, que tinha como
principal novidade a introdução de recursos gráficos.

18
Uma linguagem de marcação é usada para definir como o conteúdo de um
determinado documento deve ser exibido, ou seja, ás paginas apresentam
uma série de formações definida pelo autor e o browser se encarrega de
transformar esta formatação, até então contida apenas em código, em algo
mais adequado para leitura e visualização. (SILVA pg. 22)
No ano de 1999 surge o HTML 4.01 e com ele veio a introdução do CSS
(CascatyngStyleShee) com a finalidade de prover uma melhor aparência e visualização das
páginas. No ano de 2000 o grupo de pesquisas W3C começa um trabalho de pesquisas e lança
o XHTML que é a combinação da linguagem de marcação HTML com o XML.
Posteriormente no ano de 2002 devido ao sucesso, o grupo continuou suas pesquisas o
XHTML recebe uma atualização, que entre suas principais vantagens trás a independência de
dispositivo, utilizando as sintaxes do XML aplicadas com as funcionalidades do HTML.
O WHATWG surgiu em 2004, por um grupo de empresas descontentes com os rumos
que a web vinha tomando . Em meados de 2006 e 2007 o grupo foi oficialmente reconhecido
pela W3C e mais tarde Tim Berners Lee anunciou que trabalharia junto com o WHATWG na
criação do HTML5.
O HTML é uma linguagem de marcação, que tem como função descrever a estrutura e
o conteúdo, sendo representado através de TAGS, as quais são responsáveis pela formatação
dos documentos. Através dessas representações é possível a exibição de diversos recursos
como áudio, texto, foto, vídeo, gráficos entre outros. O HTML é representado através de tag e
cada tag pode conter um comando, atributo ou valor.
Pode-se observar abaixo na figura02, um exemplo de código fonte de uma pagina.
Figura 2 – Exemplo de código para uma pagina em html
Fonte : O Autor
Em seguida na figura 03, pode-se observar um simples exemplo de uma pagina de
internet sem nenhum tipo de conteúdo agregado a ela.

19
Figura 3 –Execução pagina html
Fonte: O Autor
2.2.2 XML – eXtensible Markup Language
Desenvolvida com a finalidade de solucionar as limitações do HTML, sendo uma
meta-linguagem orientada para a descrição de conteúdos. Sua forma de utilização é voltada
para a introdução de informações especificas se relacionadas com o contexto em que são
utilizadas.
A XML é um método para estruturar dados. São exemplos de dados
estruturados os elementos de uma planilha, cadernetas de endereços,
parâmetros de configuração, transações financeiras, desenhos técnicos, entre
outros[...], ela torna simples para o computador gerar e ler dados, e garantir
que sua estrutura não seja ambígua. (MACEDO, pg.04)
2.2.3 XHTML
Surgiu com o conceito de reformulação da linguagem HTML. Sua ação melhora a
padronização da exibição das páginas WEB.
“O XHTML é o html em formato XML(Extensible Markup Language).”(SILVA, pg.23)
Consequentemente promove uma melhoria na acessibilidade, melhorando a velocidade nas
respostas e no desenvolvimento de aplicativos.

20
2.2.4 CSS – Cascatyng Style Sheet
Trata- se de uma linguagem que é responsável por escrever e descrever a apresentação
de páginas web, como se fosse uma folha de estilos. Definindo de forma personalizada a
inclusão dos mais diversos tipos de formatação de uma página como a definição de cores,
fontes e o layout.
“Com a utilização do CSS, passamos a ter a HTML/XHTML preocupando-se somente em
estruturar o documento em blocos de informação (Títulos, Cabeçalhos, parágrafos, etc)
enquanto o CSS controla o design (posicionamento, cores, fontes, etc).”(MACEDO, Pg07).
Trabalha como um complemento ao HTML, de forma independente, sendo utilizada
como linguagem de marcação. É ela a responsável por promover a separação de um conteúdo
e o formato de um documento.
2.2.5 RIA – Rich Internet Application
Busca combinar a interatividade e funcionalidade dos sistemas que rodam em desktop
com a abrangência e flexibilidade dos sistemas web, promovendo a união das duas
plataformas em um único meio. Dessa Maneira o usuário não ficará refém de um sistema
operacional especifico a ser instalado, fazendo com que o sistema venha a trabalhar em cima
de plataforma HTML. Promovendo uma maior portabilidade ao usuário. Deslocando parte do
processamento para a máquina do usuário, de modo com que o servidor não se sobrecarregue,
tornando assim a Web igual ao desktop.
2.2.6 Javascript
É uma linguagem de programação de código aberto e trabalha em conjunto com o
HTML, sendo utilizada como complemento, é utilizada na criação de páginas web.
A sua arquitetura baseada em objetos permite realizar uma ampla variedade
de funções, como validar dados de entradas de usuários, acrescentar
elementos interativos [..] a vantagem da utilização do javascript é de ele ser

21
executado no lado do cliente, ou seja, pelo navegador do usuário.
(MACEDO, pg.203)
A presença dos scripts é identificada em um código através de tags, onde para iniciar é
utilizado a tag <SCRIPT> e para fechar a tag </SCRIPT>. Dentro de um mesmo documento
HTML podem existir múltiplos scripts.
2.3 O Grupo de pesquisas W3C
W3C (World Wide Consortium) teve o inicio de suas atividades no ano de 1994, e é
responsável por estabelecer os padrões na interpretação e desenvolvimento de conteúdos web,
ela estipula que sejam seguidos alguns padrões pré-estabelecidos de maneira universal
fazendo com que qualquer individuo ou tecnologia independente de hardware/software
consiga visualizar o conteúdo, e ainda sugere que novas tecnologias venham a seguir esses
novos padrões, defende que a tecnologia tenha um padrão universal assim facilitando a
maneira como seus códigos sejam entendidos, dentre os principais utilizadores desse padrão
pode-se citar o HTML5, XHTML e CSS. Sugere-se que sejam respeitados alguns pré-
requisitos: Compatibilidade, utilidade, interoperabilidade e acesso universal.
“A Sigla W3C significa Word Wide Web Consourtiom e é usada para definir o Consórcio
Internacional responsável pelo desenvolvimento, implantação e regulamentação das
linguagens pertinentes a internet.” (Silva, Pg.24).
O termo compatibilidade, segundo a W3C, vem a defender que as paginas venham
oferecer suporte a conteúdos já existentes, ou seja aqueles conteúdos desenvolvidos em
versões anteriores, devem ser lidos em versões mais recentes, de maneira com que venha a
rodar em todas as plataformas.
“Visa garantir que a marcação HTML possa ser usada de modo efetivo para todos os
fins que ela se destina”.(Silva, Pg.32). Visando promover o acesso universal ao usuário
independente de tecnologia utilizada para acessar o conteúdo publicado.
2.3.1 Web Semântica

22
A Web Semântica foi desenvolvida com a finalidade de estruturar o conteúdo
significativo das páginas web. Tem como principal objetivo permitir o compartilhamento de
dados e utilizá-los nas mais diversas aplicações, apresentando- as para usuários, auxiliando os
agentes de software na busca de informações varrendo os conteúdos das paginas WEB,
usando mecanismos semânticos, promovendo a automatização das pesquisas.
Segundo o Site da W3C.BR(2012) “Foi criada com o objetivo de interconectar
perfeitamente a administração de informações pessoais, integrar aplicações em empresas e
compartilhar dados comerciais, científicos e culturais em escala global”.
O responsável por grande parte da pesquisa é o W3C. Inicialmente a ideia da Web
Semântica surgiu no ano de 2001, em um artigo publicado na revista Scientific American, e
que recebia o seguinte titulo “Web Semântica: um novo formato de conteúdo para a Web que
tem significado para computadores vai iniciar uma revolução de novas possibilidades.” escrito
por Tim Berners-Lee, James Hendler e Ora Lassila publicaram um artigo na revista. O
conceito surge com a ideia de comportar a web como um todo e não mais um monte de
informação espalhada e sem finalidade, apresentando assim um novo passo no
desenvolvimento da internet, incentivado principalmente pela organização do conteúdo e
também pela interação inteligente dos usuários com o material disponível na web. Ela utiliza
de dois mecanismos para promover a buscas;
Um Exemplo de utilização da Web Semântica:
Espera-se que, um exemplo de uma busca, no Google por “Pastelaria em União da
Vitória” também apresente resultados relacionados a táxi, telefones para delivery, receitas,
preços dos pasteis, cardápios, sites para compra on-line e etc. Ou seja, informações
complementares e relevantes para o internauta também serão oferecidas automaticamente
pelos sites de busca.
2.3.2 DOM –Document Object Model
Pode-se caracterizar o DOM como uma interface de programação de aplicativos para
documentos HTML, XHTML e XML.
DOM é uma especificação do W3C que cria uma maneira, independente da
plataforma e da linguagem, de acessar e alterar o conteúdo e a estrutura do

23
documento[...]foi baseado nas especificações do Object Management Group,
o que lhe permite ser usado com qualquer linguagem de
programação.(ASLESSON&SCHUTTA, Pg.37)
Segundo o site da W3C/DOM:(2012)
“O DocumentObjectModel é uma interface de plataforma e linguagem neutra, que
permite que a programas e scripts dinamicamente acessarem e atualizarem o conteúdo,
estrutura e estilo de documentos”.
2.4 Whatwg
WHATWG significa Web Hypertext Application Technoly Working Group (Grupo de
trabalho para Tecnologias de hipertexto em aplicações para WEB). Foi criado no ano de 2004
por um grupo de desenvolvedores da Apple, Mozilla Foundation e por programadores do
Opera. Inicialmente esse grupo tinha como principais objetivos o desenvolvimento do
HTML5, Web Forms 2.0 e Web Controls 1.0. Sendo que o HTML 5 é o único ainda em
andamento, devido ao fato do Web Forms 2.0 ter sido agregado ao w3c e o Web Controls
descontinuado.
“O WHATWG desenvolve a HTML5 em conjunto com o W3C[..]a versão
do WHATWG é menos restrita do que a versão do w3c.Por exemplo: em
vários itens da especificação, apresenta exemplos ilustrativos e informações
sobre suporte da funcionalidade descrita[..]Essas informações adicionadas
não constam da versão do W3C.”(Silva.M.S, pg.26).
2.5 Motores de Renderização
Desde o início da criação da internet o principal objetivo é a publicação de arquivos e
a troca de informações, em ambiente de rede virtual. Porém devido a grandes avanços
tecnológicos e surgimento de tecnologias voltadas para a web, as páginas passaram a ter cada
vez mais importância no cotidiano das pessoas.
Inicialmente os navegadores ofereciam apenas informações no formato do texto de
maneira pouco interativa e de fácil compreensão aos usuários. Porem com o aprimoramento
das linguagens de programação web e surgimento de novos aplicativos, estimulada pelo

24
crescente aumento de pessoas com acesso a internet e maior quantidade de dispositivos para
acesso a rede, surge então a necessidade de que os browsers viessem a disponibilizar mais
recursos e melhores condições para tornar o acesso mais simples, interativo e que
conseguissem acompanhar o desenvolvimento dessas novas tecnologias.
Com o aumento da compatibilidade dos navegadores, estimulada por parceiros como a
W3C e WHATWG, o HTML5 vem ganhando maior padronização na codificação e evolução
dos browser. “Cada navegador tem um motor de renderização [..], então cada um vai tratar
seus códigos a sua maneira. Até mesmo os clientes de email possuem seus motores
próprios.”( w3tricks, 2012)
Basicamente pode-se dizer que os motores web tem a função de interpretar linhas de
códigos, marcações, funções, cookies, links, scripts e ainda são responsáveis pelo
carregamento dos plug-ins para as paginas web.
“Há uma grande diversidade de dispositivos que acessam a internet. Entre
eles, há uma série de tablets, smartphones, pc's e etc. Cada um destes meios
de acesso utilizam um determinado browser para navegar na web. Não há
como os desenvolvedores manterem um bom nível de compatibilidade com
todos estes browsers levando em consideração a particularidade de cada um.
Uma maneira mais segura de manter o código compatível, é nivelar o
desenvolvimento pelos motores de renderização. Cada browser utiliza um
motor de renderização que é responsável pelo processamento do código da
página.” (W3C, 2011)
Atualmente os principais motores são o Gecko, Presto,Webkit e o trident, todos eles
em atividade.
A seguir na tabela 04, pode-se observar quais motores cada navegador utiliza.
Motor Navegador
Webkit Safari, Google Chrome
Gecko Mozila Firefox
Trident Internet Explorer
Presto Opera
Tabela 3, - Comparativo motores de renderização e navegadores
Fonte: O Autor

25
3 HTML5
O HTML5 surge como uma alternativa para promover uma maior navegabilidade aos
usuários proporcionando mais segurança na navegação, através de páginas mais leves e
dinâmicas.
Segundo o site da MSDN, o HTML5 é um termo síntese que descreve um conjunto de
especificações do HTML, de CSS e de JavaScript, projetado para capacitar desenvolvedores a
criar sites e aplicativos da próxima geração.(MSDN, 2012).
O HTML5 traz um novo padrão para a criação de seções especificas do documento,
onde cabeçalho, menu de navegação, aside, conteúdo e rodapé agora são identificados através
de tags especificas. Facilitando a forma como o desenvolvedor vem a organizar seu código
dentro da página.
“ O html 5 nos dá novos elementos que denotam sem ambiguidades pontos de referência na
página” (LAWSON B. & SHARP R.,8)
O HTML5 traz novos elementos para o input type, com isso tornando muito mais
simples a validação dos campos. Onde cada novo input type recebe validação nativa através
do navegador, que fica responsável por realizar a validação e aplicar o tratamento ao campo,
de forma transparente ao usuário final.
Outra novidade é a chegada das tags específicas para áudio e vídeo, onde agora se
fazem presente na especificação do HTML5. Onde esses recursos são executados de forma
nativa junto ao navegador, dependendo apenas do navegador oferecer suporte ao formato a ser
executado.
"Áudio e Vídeo tornaram-se objetos de primeira classe na web com HTML5, exatamente
como aconteceu com outros tipos de mídia, como imagens, no passado."(HTML5 ROCKS,
2012)
A Geolocalizão e o canvas são duas API que fazem parte da especificação oficial do
HTML5 e dependem de bibliotecas para que possam funcionar perfeitamente, .
3.1 Declaração Doctype
A primeira grande mudança é especificada já na primeira linha de código, na
declaração para a sintaxe DOCTYPE, onde surge de forma case insensitive (não distingue

26
minúsculas de maiúsculas). Tornando o cabeçalho muito mais simples se comparado a
versões anteriores.
Pode-SE observar na figura 4, a declaração na versão do HTML 4.01:
Figure 4 – Doctype em html 4.01
Fonte: O autor
Surge então uma nova maneira de realizar a declaração do DOCTYPE, pode-se
observar a seguir na figura 5, a maneira de como se deve declarar em HTML 5.
Figura 5 – Doctype em HTML5.
Fonte: O autor
3.2 MetaCharset
Esse atributo tem a função de definir quais caracteres abstratos podem vir a fazer parte
de um documento com formato HTML, ou seja, tem a função de acrescentar aquela palavra
acentuada no site e fazer com que elas apareçam de forma legível no mesmo.
Exemplo conforme figura 6 abaixo, mostrando código de declaração em versões
anteriores.
Figure 6 – Charset em HTML 4.01
Fonte:O autor

27
A seguir pode-se observar a figura 7, onde é apresentado um exemplo de declaração
de um elemento charset.
Figura 7 – Declaração Charset em HTML5
Fonte : O Autor
Onde com a chegada da nova versão do html5 ficou muito mais simples efetuar a
declaração do charset.
3.2.1 ISO 8859-1
O ISO 8859-1 é um conjunto de caracteres padrão, sendo especificado no documento
para oferecer suporte a caracteres especiais. “Os primeiros 128 caracteres do ISO-8859-1 é o
original ASCII conjunto de caracteres (os números 0-9, o alfabeto letras maiúsculas e
minúsculas Inglês, e alguns caracteres especiais).”(W3Schools, 2012)
3.3 Elementos de marcação
Com o HTML5 surge um novo conceito para distinção de tags, fazendo com que as
maquinas sejam capazes de interpretar a estrutura das páginas. Uma das grandes novidades é a
estruturação e distribuição das tags na página, com o surgimento da tag section,
possibilitando a criação de uma nova seção de códigos. Com a ajuda destes novos elementos,
pode-se por exemplo diferenciar através do código HTML5, as principais áreas do site como
cabeçalho, menu, rodapé e o conteúdo.

28
A ideia é de substituir uma grande quantidade de divs, e sem seu lugar implantar os
novos elementos que venham se encarregar dessas funções, onde os mesmo tem a função de
se comunicar com o navegador explicando que aquela tag é especifica, surgindo assim os
elementos de marcação. Onde o responsável por realizar a divisão e alinhamento dos novos
elementos é css.
A figura 8, conforme segue mostra um esboço de organização dos novos elementos.
Figura 8 – Esquema lógico de uma pagina
Fonte: HTML5 e Seo : Quais as novidades ?
3.3.1 Header
A W3C comenta que esse elemento é responsável por definir o cabeçalho de uma
página ou de uma seção, podendo apresentar outros conteúdos sendo eles o logo de uma
empresa(layout), campo de pesquisa ou sumário da página. (W3C, 2012). É possível á

29
utilização de mais de um elemento dentro deste cabeçalho, como em caso de utilização dos
elementos <h1> até o <h6> ou de uma section, além de utilizarmos em outros elementos.
Pode-se observar a seguir na Figura 09 exemplo de utilização do elemento Header.
Figura 9 – Código Header
Fonte:O autor
Em seguida pode-se observar na figura 10, o resultado do código da Figura 09, sendo
executado nos principais navegadores de internet.
Figura 10 – Execução Header
Fonte: O Autor
Antes do surgimento do HTML5 era utilizado uma div= “header”, para realizar esse
tipo de ação.

30
3.3.2 Section
A W3C comenta que esse elemento tem a função de representar uma seção de
aplicação ou um documento de forma genérica. (W3C, 2012). Como exemplo pode-se citar a
home-page de um site, a qual pode ser dividida em diversas seções.
Pode-se observar a seguir na Figura 11, um exemplo de utilização do elemento Section
sendo utilizado em conjunto com uma section com o header.
Figura 11 – Código section com header
Fonte : O Autor
Pode-se observar na figura 12, conforme segue abaixo exemplo de execução da tag
section nos principais navegadores de internet.
Figura 12 – Execução section e header
Fonte: O Autor

31
Antes do surgimento do HTML5 era utilizado uma div como elemento de uma seção.
3.3.3 Nav
A W3C comenta que é responsável por uma sessão de navegação.(W3C, 2012).
Normalmente utiliza-se em conjunto com uma lista ordenada, contendo links para acesso
interno e externo, como por exemplo um menu de navegação.
Pode-se observar na figura 13, conforme segue abaixo exemplo de utilização da tag
NAV, sendo utilizada em conjunto com uma lista ordenada.
Figura 13 – Código nav com lista ordenada
Fonte : O Autor
Pode-se observar a seguir na figura 14, execução da tag NAV nos principais
navegadores de internet.
Figura 14 – Execução nav
Fonte:O autor

32
Antes do HTML5 era utilizado uma div= “nav” para criar este tipo de função, e a lista
ordenada era utilizada da mesma forma, não sofrendo nenhuma atualização.
3.3.4 Article
A W3C comenta que é um elemento que tem um significado semântico, sendo uma
seção independente do conteúdo (W3C, 2012). Sendo o elemento Article uma forma mais
especificada do elemento section, se relacionado a um tema especifico, devera ser utilizado
dentro de uma section. Podendo conter outros elementos dentro de um article como por
exemplo a tag time para realizar uma marcação a respeito de um evento ou um conteúdo com
fins jornalísticos.
Pode-se observar na figura 15 na sequencia, um exemplo de código para a tag article
sendo utilizado em conjunto com o elemento section, header e tag time, para demonstrar uma
marcação no tempo, através de uma página de internet.
Figura 15 – Código Article
Fonte : O Autor

33
A seguir na figura 16, pode-se observar a execução do article nos principais
Figura 16 – Execução Article
Fonte : O Autor
Em versões anteriores ao HTML5 era utilizado uma DIV= “Conteudo”, para criar uma
sessão responsável por realizar a função do article.
3.3.5 - Aside
A W3C comenta que consiste no conteúdo à parte daquele onde está inserido (W3C,
2012). Por exemplo o conteúdo da barra lateral, que pode ser considerado separado do
conteúdo original da página, como uma propaganda ou um link externo ao site, podendo ser
utilizada em conjunto com outros elementos.

34
A seguir na figura 17, pode-se observar um exemplo com o código para a tag aside,
sendo utilizada em conjunto com uma lista ordenada para apresentar possíveis links externos.
Figura 17 – Código Aside
Fonte : O Autor
A seguir na figura 18, exemplo do elemento aside em conjunto com uma lista
ordenada sendo executado nos principais navegadores.
Figura 18 – Execução Aside
Fonte : O Autor
Em versões anteriores ao HTML5 era criado uma div= “propagandas” para representar
o aside, e a lista ordenada não sofreu nenhuma atualização decorrente da evolução do
HTML5.

35
3.3.6 Footer
A W3C comenta que é o rodapé de um documento ou sessão (W3C, 2012). Como
exemplo pode-se incluir o nome do autor da página, uma data de publicação da página,
informações para contato ou informações de direitos de autorais além de links externos,
podendo conter uma lista ordenada informando os links diversos.
Em seguida pode-se observar na próximo página à figura 17, apresentando uma forma
de utilização da tag footer, sendo divida em duas seções, uma sobre, contendo informações
simples como quem escreveu a página e alguns link externo. E a outra sessão chamada de
acesse também que pode conter uma lista ordenada, contendo links internos e externos.
Figura 19 – Código Footer.
Fonte : O Autor
Em seguida pode-se observar na figura 20, o resultado da figura 19, sendo apresentada
nos principais navegadores.

36
Figura 20 – Execução Footer.
Fonte:O autor
Em versões anteriores ao HTML5 era utilizado uma div= “rodapé” para criar a função
de um rodapé da página.
3.3.7 Hgroup
A W3C comenta que é responsável por agrupar os elementos de <h1> à <h6> dentro
de uma seção, onde a seção pode ter diversos níveis, sendo classificado em ordem crescente,
sendo o nível <h1> o mais alto.(W3C, 2012). Podendo ser utilizada em conjunto com outros
elementos como a sectior, header, group, article e aside. Pode-se observar a aplicação do
código na Figura 21, conforme segue na próxima página.

37
Figura 21 – Código Hgroup
Fonte : O Autor
A seguir pode-se observar na figura 22, o exemplo de execução do hgroup nos
principais navegadores .
Figura 22 – Execução Hgroup
Fonte: O Autor
3.4 Multimídia
O HTML5 traz uma grande inovação, baseando-se em novos padrões que vem
surgindo junto com o avanço da internet, além de novos costumes por parte dos usuários.

38
Estimulado por um crescente numero de dispositivos conectados a rede, onde boa parte vem
utilizando smartphones, tablets ou computador para acessar algum tipo de mídia, seja ela rede
social para compartilhamento de vídeos e fotos ou simples execução de vídeos e musicas
através da internet.
A partir dessa nova versão, que traz como uma de suas principais novidades o suporte
nativo as tags de Áudio e Vídeo. Fazendo com que não seja mais necessário à instalação de
Codecs e plug-ins para a execução dos elementos, trazendo maior comodidade ao usuário,
além de promover uma maior segurança devido ao fato de tudo estar sendo rodado de forma
nativa junto ao navegador.
3.4.1 Áudio
É uma novidade a implantação da tag<audio>. Definindo um novo elemento
específico responsável por incorporar um arquivo de áudio em uma página da web. Segundo o
site da W3CSchools, com essa nova tag é possível inserir um conteúdo especifico,
dispensando a instalação de plug-ins para a execução de um arquivo.(W3CSchols,
2012).Onde o navegador é responsável por executar o formato do arquivo.
O elemento áudio é responsável pela execução de 03(Três) tipos de formatos, sendo
eles o “mp3”, “wav” ou “OGG”. O elemento áudio em HTML5, possui como principais
atributos o Autoplay, controls, loop, preload e src, conforme segue abaixo a tabela de
descrição de características de cada atributo.
Atributo Valor Descrição
Autoplay Autoplay Define que a execução iniciara assim que o áudio estiver carregado
Controls Controls Os controles do áudio iram ser mostrados no player
Loop Loop O áudio começara a tocar novamente quando chegar ao seu final.
Preload Preload O áudio começara a carregar enquanto a pagina é lida(este atributo é
ignorado, quando o atributo "autoplay" esta definido).
Src Src É a fonte do áudio, definida através de uma URL(caminho) que
devera ser especificada.
Tabela 2- Atributos de Audio;
Fonte : O Autor

39
Pode-se observar na figura 23, conforme segue na próxima página, exemplo de código
do elemento áudio para a execução dos formatos mp3,wav e ogg.
Figura 23 – Código Áudio
Fonte:O autor
A Seguir na figura 24, pode-se observar o exemplo de execução do elemento áudio
com o formato mp3.
Figura 24 – Execução áudio
Fonte: O autor

40
Conforme exemplo de execução da figura 24, foi possível notar que todos os
navegadores executaram com sucesso o elemento áudio com exceção do safari, representado
pela letra “E” que não conseguiu executar nenhum formato. O navegador Internet Explorer 9
representado pela letra “C” chegou até a solicitar permissão para executar o arquivo. Antes da
chegada do HTML5 era necessário a instalação de plug-ins para a execução do elemento
áudio.
3.4.2 Vídeo
A introdução da tag video é outra novidade no HTML5. O elemento vídeo tem a
função de apresentar um vídeo de forma nativa, se o navegador apresentar compatibilidade
junto ao formato do vídeo além da opção de estilização do player junto com o CSS.
Segundo o site da W3C o elemento vídeo possui os seguintes atributos autoplay,
preload, controls, loop, pôster, height, width, muted e src.(W3C, 2012).
Segue abaixo tabela representando as especificações.
Atributo Descrição
Autoplay Define que o atributo começara a assim que a pagina for aberta, toca o quanto estiver
armazenado.
Preload Carrega o video juntamente com o armazenamento da pagina e só funciona com o
autoplay desabilitado.
Controls Define os "controles" que var ser exibidos no videoex : "play" "pause"
Loop Tem a função de executar novamente o arquivo quando o mesmo tiver chego ao final.
Poster É a representação do vídeo através de uma imagem.
Height Define a altura do vídeo
Widht Define a largura do vídeo
Muted Habilita a opção de deixar o vídeo Mudo(Sem som).
Src É a fonte do vídeo, definida através de uma URL(caminho) que devera ser
especificado.
Tabela 3 – Atributos Vídeo.
Fonte : O Autor

41
Pode-se observar na figura 25, abaixo, exemplo de código para o elemento vídeo.
Figura 25 – Exemplo código Video formato MP4
Fonte:O autor
Em seguida na figura 26, pode-se observar o comparativo de execução entre os
principais navegadores para a execução do formato MP4 e como cada um de forma
independente cria o seu player de execução.
Figura 26 – Execução MP4
Fonte:O autor

42
Observa-se conforme a figura 26, que os navegadores Firefox representado pela letra
“A”, opera representado pela letra “D” e safari representado pela letra “E” não oferecem
suporte a esse formato de vídeo. O navegador Internet explorer 9 representado pela letra “C”,
solicita permissão para a execução e o Google Chrome representado pela letra “A” executa
com sucesso.
3.4.3 Figure e Figure Caption
O elemento figure tem a função de realizar a marcação em um bloco de conteúdo
independente, que normalmente vem a contém imagens, gráficos, diagramas ou ilustrações
que fazem referência ao conteúdo principal de uma pagina. O elemento Figcaption tem a
função de inserir uma “legenda” para a imagem.
Pode-se observar na figura 27, um exemplo de código do elemento figure e figcaption.
Figura 27 – Código Figure e FigCaption
Fonte:O autor
Pode-se observar na figura 28 presente na próxima página, o resultado do código da
figura 27, sendo executado nos principais navegadores de internet.

43
Figura 28 – Execução Figure e Figcaption
Fonte: O autor
Pode-se observar no exemplo da figura 28, que em todos os navegadores, o elemento
Figure e Figcaption é executado com sucesso.
Em seguida na figura 29, conforme segue, um exemplo de marcação de um bloco de
imagens sendo utilizado em conjunto com o Figcaption.
Figura 29 – Codigo Marcação Bloco Figure e FigCaption
Fonte: O Autor
Pode-se observar no exemplo da figura 30, conforme segue na próxima página, a
maneira como os navegadores executam a marcação de um bloco.

44
Figura 30 – Execução Bloco Figure e Figcaption
Fonte : O Autor
Antes do HTML5 para marcar um bloco, era necessário realizar a marcação de cada
imagem uma por uma e adicionando uma legenda para cada, agora pode se marcar um bloco
todo de imagens.
3.5 Novos campos para formulários
Os formulários em HTML5, tiveram inicio com o Web Forms 2.0, uma especificação
anterior à atual especificação do HTML5, onde foi criada por um grupo conhecido como Web
Hypertext Applications Technology WorkingGroup, ou apenas WHATWG. Grande parte do
trabalho inicial do WHATWG tornou-se o ponto de partida do que chamamos hoje de
HTML5, e o esforço do Web Forms 2.0, foi integrado a especificação oficial do HTML5.
Devido a grande utilização de muitos campos de verificação de dados, e também por haver
uma integração com outras linguagens como o Javascript.
“Os novos campos de formulários foram a gênese da especificação
que se tornou o HTML5, e é onde vemos o princípio da extensão

45
retrocompatível em ação. As extensões são, em maior parte, novos
valores do atributo type do elemento de entrada.”(LAWSON B. &
SHARP R.,68)
Surgem então 13 novos tipos de entrada para uso em formulários sendo eles search,
tel, url, email,datetime, date, month, week, time, datetime-local, number, range e color.
“O HTML5 define novos tipos de campo, e por razões que se tornaram claras em algum
momento não há motivo para não começar a utilizá-los.” (Pilgrim M., Pg.150)
3.5.1 Search
Segundo o site do WHATWG é preciso definir o atributo type do elemento input com
o valor definido para search.(WHATWG, 2012). Tem muita semelhança com o atributo
“text”, com a única diferença é que voltado e interpretado pelos navegadores como um campo
de busca. Cada navegador interpreta o search de uma maneira diferente e os navegadores que
não oferecem suporte a esse elemento o tratam como um elemento text.
“Esse tipo de entrada espera um termo de busca[..]a diferença entre os tipos search e text é
apenas estilística.”(LAWSON B. & SHARP R.,73)
A figura 31, apresenta um exemplo de código para o search sendo utilizado em
conjunto com o placeholder para indicar que aquele campo é um campo de busca.
Figura 31 – Codigo Search
Fonte: O Autor
Pode-se observar na figura 32 presente na próxima página, o código da figura 31,
sendo executada junto aos principais navegadores de internet.

46
Figura 32 – Execução Search
Fonte: O Autor
Observa-se no exemplo da figura 32, que todos os navegadores interpretam
inicialmente o campo sendo tipo texto, onde o Internet Explorer 9, representado pela letra
“C”, apresenta o campo, mas não o atributo placeholder que esta definido para apresentar que
aquele é um campo de busca. A seguir figura 33 na próxima página, pode-se observar a
maneira como cada navegador haje quando algo é inserido no campo definido como type=
“search”.
Figura 33 – Exemplo search em execução
Fonte: O Autor

47
Pode-se observar no exemplo da figura 33, que somente os navegadores Google
Chrome representado pela letra “A” e o Safari representado pela letra “E” ofereceram suporte
a esse recurso. Os outros navegadores apenas interpretaram o campo search como sendo do
tipo texto. Anteriormente era utilizado o input= “text” para realizar esse tipo de função.
3.5.2 Tel
Elemento que representa um controle para inserção de um campo especifíco para
colocar um numero de telefone. Segundo o site da W3C é preciso que seja definido o
atributo type do elemento input como tel.(W3C,2012).Devido ao fato dos telefones possuírem
vários formatos, o mesmo não possui um formato especifico, então em caso de obtenção de
um formato especifico e padronização para realizar a validação e verificação desses formatos
é necessário que seja utilizado o atributo Pattern, além da utilização do Placeholder para
mostrar o formato a ser preenchido no campo.
“O tipo de entrada tel espera um número de telefone. Não há
validação especial, ele sequer força uma entrada apenas numérica,
visto que muitos números telefônicos são comumente escritos com
caracteres adicionais, por exemplo +44 (0) 208 123 1234.”(LAWSON
B. & SHARP R.,73)
Em seguida na figura 34 um exemplo de código do type = “tel” sendo executado em
conjunto com atributo pattern para realizar a validação do formato e o placeholder para
demonstrar o exemplo de formato correto a ser inserido.
Figura 34 – Código para Tel com Placeholder e Pattern
Fonte : O Autor

48
A seguir é possível observar o código da figura 34 sendo executado e apresentado
através da figura 35, nos principais navegadores, onde é possível observar a maneira como
cada navegador apresenta o tel sendo executado em conjunto com os outros atributos.
Figura 35 – Execução Tel
Fonte:O autor
Pode-se observar que na figura 35, onde todos os navegadores exceto o Internet
Explorer 9 representado pela letra “B”, executaram com sucesso o atributo Type=Tel. A
seguir na Figura 36 presente na próxima pagina, é possível observar a maneira como os
navegadores interpretam o atributo type=tel quando ele é executado e preenchido de forma
incorreta.

49
Figura 36- Execução Tel mostrando erros
Fonte : O autor
Na figura 36, observa-se que o navegadores Internet explorer 9 representado pela letra
“B” tratou o atributo type= “tel”sendo como type= “text”, não realizando assim nenhum tipo
de validação, nem sequer apresentando o placeholder. Já o navedor Safari representado pela
letra “C”, apresentou o atributo placeholder, porem não fez a validação do pattern. Os
navegadores Firefox representado pela letra “A”, Opera representado pela letra “D” e Chrome
representado pela letra “E” executaram com sucesso o atributo e ainda mostraram uma
mensagem avisando que o formato digitado estava incorreto. A validação desse tipo de campo
antes da chegada do HTML5 era anteriormente realizada através de funções definidas através
de javascript.
3.5.3 URL
Esse elemento é utilizado para a inserção de uma url através de um campo especifico,
onde o navegador fica responsável por verificar se é um formato valido, e não por verificar a
procedência do endereço nem sua existência. Segundo o site da WHATWG é necessário que
seja definido o atributo type do elemento input como url.( WHATWG, 2012).

50
Pode-se observar na figura37, conforme segue abaixo exemplo .
Figura 37 – Código URL
Fonte: O autor
Pode-se observar o código da figura 37 sendo executada nos principais navegadores,
conforme figura 38 abaixo, onde junto com o type=url foi definido o atributo placeholder
para demonstrar o formato de url para ser preenchido.
Figura 38 – Execução simples URL
Fonte: O autor

51
No exemplo da figura 38, nota-se que todos os navegadores exceto o Internet
Explorer 9 representado pela letra “B”, executaram com sucesso as especificações. A seguir
pode-se observar na figura 39 na próxima página, a maneira como cada navegador trata de
validar o formato type=url e o tipo de mensagem de aviso que ele informa em caso de formato
invalido.
Figura 39 – Execução URL com formato invalido
Fonte: O autor
Nos navegadores Chrome representado pela letra “A”, Firefox representado pela letra
“B” e opera representado pela letra “C”, executaram com sucesso e validaram nativamente o
type= “url” e apresentam uma mensagem de erro em caso de preenchimento errado.
Entretanto nos navegadores Internet Explorer 9 representado pela letra “D” e Safari
representado pela letra “E”, trataram o type = “url” sendo como um type= “text” não fazendo
nenhum tipo de validação.
Antes do HTML5 a validação desse tipo de campo era realizado através de mascaras
no javascript.

52
3.5.4 Range
Segundo o site da W3C o elemento Range é definido através do atributo type do
elemento input como range.(W3C, 2012). Esse elemento utiliza cinco elementos para
promover o controle dos intervalos, sendo min para o valor mínimo, max para o valor
máximo, step para definir o intervalo e value para definir o valor, além de any para nenhum
valor. Tendo como função criar uma barra de rolagem com algum tipo de intervalo.
A seguir pode-se observar na figura 40 um exemplo de código para o input type= “range”.
Figura 40 – Código Range
Fonte: O autor
A seguir na figura 41 presente na próxima página, pode-se observar a execução do
range nos principais navegadores e a maneira como cada um trata esse atributo.

53
Figura 41- Execução Range
Fonte : O autor
Pode-se observar que os navegadores Chrome representado pela letra “A”, Opera
representado pela letra “B” e Safari representado pela letra “C” executaram o range. Os
navegadores Internet Explorer e Firefox trataram orange como tipo texto.
3.5.5 Email
Segundo o site do WHATWG esse é o atributo "type" de um "input" quando a opção
for igual a "email" significa que deve ser definido o campo para que se possa vir a receber
um endereço de email válido (WHATWG, 2012). Essa forma de validação não tem a função
de verifica se o e-mail digitado é existente, mas sim a função de verificar se o formato
digitado está correto. Pode ser utilizado o atributo multiple em conjunto com o email, para
inserção de mais de um email no mesmo campo.
A seguir na figura 42, pode-se observar uma declaração de código para o type=
“email” sendo utilizada em conjunto com o placeholder para demonstrar o formato que
devera ser preenchido no campo.

54
Figura 42 – Código email
Fonte: O autor
A figura 43, conforme segue, onde apresenta-se um exemplo de execução da figura
42, onde mostra a execução do elemento nos principais navegadores, apresentando a forma
como cada um trata esse novo elemento.
Figura 43 – Execução Email simples
Fonte: O autor

55
Pode-se notar na figura 43 da página anterior, que de alguma forma todos os
navegadores executaram com sucesso o elemento email, porém o Internet Explorer9
representado pela letra “C” não exibiu o placeholder, porem tratou o type=“email” sendo do
type=“text”.
A seguir na figura 44, de pode-se observar como que cada navegador interpreta os
dados preenchidos errados no campo.
Figura 44 – Execução Email com erro
Fonte: O autor
Conforme exemplo da figura 44, pode-se observar que os navegadores Chrome
representado pela letra “A”, Firefox representado pela letra “B” e Opera representado pela
letra “C”, executaram com sucesso a validação do formato de email, de forma nativa.
Já os navegadores Safari representado pela letra “D” e Internet explorer representado pela
letra “E”, apenas trataram o type email sendo como do tipo texto. Antes do HTML5 esse tipo
de validação apresentado pelos navegadores “A”, “B” e “C” era realizado através de funções
definidas pelo javascript.

56
3.5.6 Number
O Number tem a função de definir que o campo é especifico para entrada de números,
ficando o navegador responsável pela validação do mesmo. Segundo o site da W3C o campo
number é utilizado quando é definido pelo o atributo type do elemento input como
Number(W3C 2012).Para a validação e verificação pode-se utilizar o atributo min para definir
o valor mínimo para um campo e max para definir o valor máximo, além do atributo step para
definir os intervalos entres esses números.
Pode-se observar a seguir no exemplo da figura 45, conforme segue na próxima
pagina, exemplo de declaração do type= “number” através de código.
Figura 45- Código Number
Fonte: O autor
Pode-se observar a execução do código da figura 45, através da figura 46 conforme
segue na próxima página.

57
Figura 46 – Execução Number
Fonte : O Autor
Conforme exemplo da figura 46, é possível notar que os navegadores de internet
Chrome devidamente representado pela letra “A”, Opera representado pela letra “B” e Safari
letra “C” executaram com sucesso o atributo number e criaram até uma caixa de opção para a
escolha. Já os navegadores Firefox representado pela letra “D” e Internet Explorer
representado pela letra “E” não fizeram a mesma coisa que os navegadores “A”, “B” e “C”,
apenas apresentaram o type= “number” como type=”text”. Em versões anteriores ao HTML5,
poderia fazer esse tipo de validação através de alguma função declarada através de javascript.
3.5.7 Date Time
Permite a entrada de um formato de data e hora com a utilização de um fuso horário,
onde o navegador tem a função de realizar a validação do campo de forma nativa. “Date e
time validam uma data e horário precisos” (LAWSON B. & SHARP R.,71)

58
A seguir na figura 47, pode-se observar um exemplo de declaração para o elemento
date time.
Figura 47 – Codigo Date Time
Fonte: O autor
A seguir na figura 48, presente na próxima página, pode-se observar o comparativo de
execução entre os navegadores através do input type = “datetime”.
Figura 48 – Execução Date Time
Fonte: O autor

59
Pode-se observar no exemplo de execução apresentado na figura 46 no qual os
navegadores de internet Safari representado pela letra “A”, Opera representado pela “B”
apresentaram com sucesso esse input type= “date time”. Já os outros navegadores apenas
apresentaram esse atributo como input type= “text”.
3.5.8 Date
Deve ser utilizado para inserir um tipo de data, fazendo com que seja criado um
calendário para seleção de uma data.
A seguir na figura 49 é possível observarmos um exemplo de declaração do código
para o input type= “date”.
Figura 49 – Código Date
Fonte: O Autor

60
Em seguida na figura 50 pode-se observar o resultado da execução do type= “date”
nos principais navegadores de internet.
Figura 50 – Execução Date
Fonte : o Autor
É possível observar-se que os navegadores Google Chrome representado pela letra
“A”, opera representado pela letra “B” e safari representado pela letra “C” executaram com
sucesso esse atributo criando um calendário ou menu interativo para escolha de data. Os
navegadores Internet Explorer representado pela letra “D” e Mozilla Firefox representado pela
letra “E” apenas trataram o input type= “date” como type= “text”
3.5.9 Month
O Month é um novo atributo do input, sendo representado através de um mês.“<input
type=“month” permite a entrada e validação de um mês”. (LAWSON B. & SHARP R.,71)
A seguir na figura 51, pode-se observar um exemplo de especificação do código para o
type= “month”.

61
Figura 51 – Código Month
Fonte: O Autor
Em seguida na figura 52, pode-se observar um exemplo de execução do elemento
Month sendo executado nos principais navegadores.
Figura 52 – Execução Month
Fonte: O autor
Conforme execução da figura 52 é possível se observar que os navegadores Opera
representado pela letra “A” e Safari representado pela letra “B” executaram com sucesso e
criaram uma forma de calendário para a escolha do mês. Os navegadores Chrome
representado pela letra “C”, Mozilla Firefox representado pela letra “D” e Internet Explorer
representado pela letra “e” trataram o atributo type= “month” como sendo do type= “text” não
realizando nenhum tipo de ação.

62
3.5.10 Week
Deve ser utilizado para inserir uma data formada por uma data e um numero de
semana, de forma nativa junto ao navegador, sem a necessidade da especificação de um fuso-
horário.“<input type= “week”> permite a entrada e validação do número de uma semana.”
(LAWSON B. & SHARP R.,72)
A Seguir na figura 53 pode-se observar um exemplo de especificação de código para o
type= “week”.
Figura 53 – Codigo Week
Fonte: O Autor
Pode-se observar na próxima página a figura 54 , que apresenta um exemplo de
exucução do código da figura 53, sendo apresentada nos principais navegadores de internet
para apresentação do type= “month”.

63
Figura 54 – Execução Week
Fonte: O Autor
Conforme exemplo de execução da figura é possível observar que os navegadores
Opera representado pela letra “A” e Safari representado pela letra “B” executaram com
sucesso o atributo week apresentando a seleção para uma semana. Os navegadores Internet
Explorer representado pela letra “c”Chrome representado pela letra “D” e Firefox
representado pela letra “E” trataram o type= “week” sendo como do type= “text”, não criando
nenhum tipo de calendário ou de validação.
3.5.11 Time
É utilizado para inserir um valor de horário com hora, minuto segundos e fração de
segundos, mas sem fuso horário.“O<input type= “TIME” > permite entrada de um horário em
formato 24 horas e o valida” (LAWSON B. & SHARP R., Pg. 71)
A seguir na figura 55, presente na próxima página, é possivel observarmos um exemplo de
código para esse novo elemento.

64
Figura 55 – Código Time
Fonte: O autor
A seguir na figura 56 pode-se observar o resultado do código da figura 55 sendo
executado nos principais navegadores.
Figura 56 – Execução Time
Fonte: O Autor
Pode-se observar que no exemplo da figura 56, os navegadores opera representado
pela letra “A” e Safari letra “b” executaram com sucesso o time criando uma caixa para
seleção de um horário.Os navegadores Firefox representado pela letra “B”, Internet Explorer
letra “D” e Chrome letra “E” apenas trataram esse type sendo como texto.

65
3.5.12 Date Time-Local
É utilizado para inserir data e hora com ou sem um fuso horário definido. Onde o
navegador fica responsável pela definição do fuso horário.
A seguir na figura 57 é possível observarmos um exemplo de código para o type=
“datetime-local”.
Figura 57 – Código Datetime Local
Fonte: O autor
A seguir na figura 58 pode-se observar o exemplo de execução do datetimelocal nos
principais navegadores e a maneira como cada um trata essa especificação.
Figura 58 – Execução DateTimeLocal
Fonte : O Autor

66
Conforme execução da figura 58, presente na página anterior é possível notar-se que
os navegadores que oferecem suporte a esse tipo de recurso criam um calendário para a
escolha de uma data e hora, sendo eles o navegador Opera representado pela letra “A” e Safari
letra “b”. Os navegadores que não oferecem suporte a esse recurso tratam o type= “datetime-
local” sendo como do type= “text”, são eles Chrome letra “C”, Internet Explorer letra “D” e
Firefox letra “E”.
3.5.13 Color
Tem a função de apresentar uma paleta para a escolha de uma cor.
A seguir na figura 59 pode-se observar um exemplo de especificação do código para o input
type= “color”.
Figura 59- Código Color
Fonte : O Autor
Pode-se observar na figura 60, conforme segue na próxima página, execução nos
únicos navegadores que oferecem suporte a esse recurso, sendo eles os navegadores de
internet Google Chrome e Opera.

67
Figura 60- Execução Color Chrome e Opera
Fonte:O Autor
A seguir na figura 61, pode-se observar a execução do código 59 da pagina anterior,
sendo executado o elemento color nos navegadores de internet Internet Explorer, Firefox e
safari.
Figura 61 – Execução Color Ie, safari e Firefox
Fonte: O Autor
Pode-se notar que nenhum dos navegadores ofereceu suporte ao elemento color e
todos trataram o type=colorcomo elemento type=text.

68
3.6 Validação dos formulários
HTML5 surge com a proposta de facilitar a vida do programador, tornando boa parte
das validações de forma nativa junto ao navegador, fazendo com que o programador não
tenha que escrever várias linhas de códigos em javascript para realizar as validações nos
campos. “O elemento input tem diversos novos atributos para especificar o comportamento e
limitações: Autocomplete, min, max, multiple, pattern e step”. (LAWSON B. & SHARP
R.,74). Surge também o novalidade para situações em que um formulário não seja validado e
o Formnovalidate para que o formulário seja validado dependendo apenas da ação do submit.
3.6.1 AutoFocus
Autofocus é um atributo utilizado em formulários ou páginas de internet e tem a
função de determinar que um elemento venha a receber o foco assim que carregado. “Tão
logo a página carregue, ele move o foco da inserção para um campo de inserção em
particular”.(LAWSON B. & SHARP R.,74).
Esse atributo devera ser utilizado apenas uma vez por página.
“Muitos Websites utilizam [..]para focar (selecionar) no primeiro
campo de inserção de um formulário web automaticamente. Por
Exemplo, a homepage do Google com focalizará automaticamente a
caixa de inserção, de modo que você possa digitar as palavras-chave
de sua busca sem ter de posicionar o cursos na caixa de
busca.”(Pilgrim M., Pg.148).
Em seguida pode-se observar um exemplo prático de execução de uma página que
utiliza esses recursos, presente na figura 62 da próxima pagina.

69
Figura 62 – Pagina do Google
Fonte: Google
Disponivelem : www.google.com.br
Pode-se observar na figura 63, um exemplo pratico de uma figura contendo um código
para uma pagina que utilize o autofocos.
Figura 63- Código Autofocus
Fonte: O autor
Os navegadores que não suportam o autofocos simplesmente o ignoram. Em HTML5
os atributos que podem receber esse elemento são o "button", "input", "keygen", "select" e
"textarea".
Observa-se a seguir a figura 64 presente na próxima página, onde mostra a execução
da figura 63 nos principais navegadores.

70
Figura 64- Exemplo de execução autofocus
Fonte: O Autor
Conforme execução do código da figura 63, podem-se observar que todos os
navegadores de internet exceto o Internet Explorer 9 oferecem suporte a esse tipo de atributo,
onde o mesmo apenas ignora a sua execução.
3.6.2 Mínimo e Máximo
Tem a função de declarar o valor mínimo e máximo de um campo, sendo min para
mínimo e max para máximo. “Esses atributos restringem a gama de valores que pode ser
inserida em um campo; você não pode enviar o formulário com um número menor que min ou
maior que max.” (LAWSON B. & SHARP R.,78)
Pode-se observar na figura 65, presente na próxima página, um exemplo de código
utilizando o valor mínimo e máximo.

71
Figura 65 – Código exemplo min e max
Fonte: O autor
A seguir na figura 66, pode-se observar um exemplo de execução nos principais
Figura 66- Execução Min e Max
Fonte: O Autor
3.6.3 Multiple

72
Tem a função de permitir a entrada de múltiplos valores em um mesmo campo. O
atributo multiple deve trabalhar com os type= file por exemplo para carregar varias imagens
ou outros tipos de arquivo e type=email com multiple definido para inserir mais de um
endereço de email.
A seguir pode-se observar na figura xx, exemplo de declaração para o type= “file”
com o atributo multiple definido.
Figura 67- Código Multiple
Fonte: O autor
Pode-se observar na figura 68, exemplo de execução de execução do type= “files” com
o multiple definido.
Figura 68 – Execução simples doMultiple
Fonte: O autor

73
A seguir pode-se observar na figura 69, uma forma de execução mais detalhada do
atributo multiple nos principais navegadores de internet.
Figura 69 Execução Detalhada multiple
Fonte: O Autor
Conforme execução da figura 69, pode-se observar que todos os navegadores
executaram com sucesso a especificação do type= “file”, porem o Internet Explorer
representado pela letra “A’ não fez com que fosse possível selecionar mais de um arquivo.
Diferente dos outros navegadores que executaram com sucesso essa especificação. Os
navegadores Chrome representado pela letra “A” e Safari representado pela letra “B”,
apresentaram a quantidade de arquivos selecionados.
3.6.4 Pattern
O atributo pattern tem a função de validar expressões regulares, sem a utilização de
Javascript. É utilizado por exemplo para realizar a validação de um campo como telefone ou
Cep de uma cidade.

74
Pode-se observar na figura 70, exemplo de utilização do atributo pattern para
validação de um formato de CEP de uma cidade sendo utilizado em conjunto com o
placeholder para mostrar o formato a ser digitado.
Figura 70 – Código Required com Pattern
Fonte : O Autor
Pode-se observar a seguir na figura 71, exemplo de execução nos principais
Figura 71 – Execução Pattern com Placeholder
Fonte: O autor

75
Nota-se que no exemplo da figura 71, presente na página anterior, os navegadores
Internet Explorer e Safari, trataram o pattern como sendo um atributo do tipo text e não
realizaram a validação do campo. Diferente disso os navegadores de internet Google Chrome,
Opera e Mozilla Firefox realizaram validação além de emitir mensagem de que o formato
digitado não era valido.
3.6.5 STEP
Esse atributo tem a função de definir o intervalo entre os valores de entrada em um
campo.“O step controla o nível de granularidade de entrada.” (LAWSON B. & SHARP R.,78)
A seguir na figura 72, exemplo de especificação para o código.
Figura 72 – Código Step
Fonte: O Autor
A seguir pode-se observar na figura 73 presente na próxima página, execução do
atributo step sendo utilizado em conjunto com os atributos mim e max.

76
Figura 73 – Execução Step
Fonte: O Autor
Conforme execução da figura 73, é possível notar-se que somente os navegadores
Google Chrome representado pela letra “A”, safari letra “B’ e Opera letra “C” executaram
com sucesso esse atributo os navegadores que não ofereceram suporte apenas trataram o
mesmo sendo do type= “text”.
3.6.6 Maxlenght
Tem a função de limitar o numero máximo de caracteres em um campo.
3.6.7 Placeholder
Tem a função de definir textos pré-definidos em um campo de inserção de dados,
onde o mesmo irá desaparecer após ser digitado algo no campo.
Na figura 74, exemplo presente na próxima, observa-se um exemplo de código para a
declaração do mesmo.

77
Figura 74 – Código Placeholder
Fonte: O Autor
A seguir na figura 75 pode-se observar o código da figura 74, sendo executada nos
principais navegadores de internet.
Figura 75 – Execução Placeholder
Fonte: O Autor

78
Nota-se que na figura 75, todos os navegadores exceto o Internet Explorer executaram
com sucesso o atributo placeholder. Antes da chegada do HTML5 para realizar esse tipo de
função era necessário a aplicação de mascaras javascript ou bibliotecas especificas para esse
recurso.
3.6. 8 Required
Este tipo de atributo é definido para o navegador, fazendo com que o preenchimento
de um campo seja obrigatório no formulário, ou seja, o usuário não conseguira enviar o
formulário se não preencher o campo.
Pode-se observar na figura 76, conforme segue abaixo, exemplo de um código para
um formulário utilizando o required.
Figura 76- Código Required
Fonte: O Autor
Na figura 77 o atributo required tem a função de verificar se o campo foi preenchido e
não o seu formato. Pode-se observar na figura 77, exemplo de execução da figura 76 nos
principais navegadores de internet.

79
Figura 77- Execução Required
Fonte: O autor
Pode-se observar, que os navegadores Internet Explorer representado pela letra “C” e
Safari representado pela “E” não executaram a validação de campo obrigatório. Os demais
navegadores executaram com sucesso o atributo required e enviaram uma mensagem de que o
campo deveria ser preenchido.
3.7 Atributo Data list
Esse elemento tem a criar uma lista pré-definida dentro de um input. Pode-se observar
na figura 78, conforme segue na próxima página, o exemplo do datalist funcionando.

80
Figura 78 – Código Datalist
Fonte: O Autor
Pode-se observar a seguir na figura 79, o resultado da figura 78, sendo executado nos
navegadores
Figura 79- Execução Datalist
Fonte: O Autor
Pode-se observar na figura 79, o exemplo de comparativo entre os navegadores, onde
os navegadores Internet Explorer representado pela letra “D” e safari representado pela letra
“E” não executaram o atributo datalist apenas o trataram como sendo um type= “text”. Já os
outros navegadores executaram com sucesso essa função.

81
3.8 Sumary e Details
Tem a função de criar um elemento interativo de mostrar e esconder, onde segundo o
site da Mozilla o elemento details é utilização para criar uma caixa de detalhes e o summary
apresentar esse sumário, ou até mesmo a legenda para o conteúdo do elemento details.
(Mozilla, 2012). Podendo ser criado de forma nativa, sem a necessidade da implantação de
javascript para criação do mostrar esconder, dependendo apenas do navegador oferecer
suporte ao usuário.
A seguir na figura 80, pode-se observar um exemplo de código para o datails e summary.
Figura 80 – Código Details e Summary
Fonte : O Autor
Pode-se observar a figura 81, resultado da figura 80, sendo apresentado um exemplo
de execução do details e summary no navegador de internet Google Chrome, único a oferecer
suporte a esse tipo de recurso.

HTML 5 - TCC MARLLON BIANCHINI

HTML 5 - TCC MARLLON BIANCHINI

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a HTML 5 - TCC MARLLON BIANCHINI

Semelhante a HTML 5 - TCC MARLLON BIANCHINI (20)

HTML 5 - TCC MARLLON BIANCHINI