Introdução
Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na versão 4. De lá pra cá, a W3C esteve focada em linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics - o uso de gráficos vetoriais em navegadores). Enquanto isso, desenvolvedores de navegadores estiveram preocupados em melhorar as funcionalidades destes, como exibir páginas em abas e oferecer integração com leitores de RSS. Recentemente, no entanto, organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar novos e interessantes recursos.Neste artigo, veremos algumas novidades que o HTML5 traz. Para quem está se familiarizando agora com o HTML, sem preocupações: os elementos tradicionais continuam os mesmos, já que o HTML5 foi planejado considerando também compatibilidade com estas funcionalidades.
Quer aprender HTML de uma forma fácil ? Compre o curso aqui
Novos elementos
Vários novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento<div>
com foco na semântica; outros surgiram
da necessidade de padronizar a maneira de se publicar conteúdo, como
acontece hoje com as imagens. Os principais elementos dessa nova versão
são:Elementos de estrutura
<header>
- cabeçalho da página ou de uma
seção (não confundir com a tag <head>
);<section>
- cada seção do conteúdo;<article>
- um item do conteúdo dentro da página
ou da seção;<footer>
- o rodapé da página ou de uma
seção;<nav>
- o conjunto de links que formam a navegação,
seja o menu principal do site ou links relacionados ao conteúdo da
página;<aside>
- conteúdo relacionado ao artigo (como
arquivos e posts relacionados em um blog, por exemplo).Elementos de conteúdo
<figure>
- usado para associar uma legenda a uma imagem,
vídeo, arquivo de áudio, objeto ou iframe:<figure id="figura01"> <legend>Figura 1. Esquema de uma página em HTML5</legend> <img src="html5.png" border="0" width="200" height="300" alt="Estrutura de uma página escrita com os novos elementos do HTML5" /> </figure>
<canvas>
- por meio de uma API
gráfica, renderiza imagens 2D dinâmicas que poderão
ser usadas em jogos, gráficos, etc;<audio>
e <video>
- usados para streaming
(transmissão pela internet) de áudio e vídeo. É
uma tentativa de criar um padrão em todos os navegadores como acontece
hoje com as imagens:<audio src="musica.mp3" autoplay="autoplay" loop="20000" /> <video src="video.mov" width="400" height="360" />
<dialog>
- junto com as tags <dt>
e <dd>
criado para formatar um diálogo:<dialog> <dt> Michael, you never told me your family knew Johnny Fontane! <dd> Oh sure, you want to meet him? <dt> Yeah! <dd> You know, my father helped Johnny in his career. <dt> Really? How? <dd> ...Let's listen to this song. </dialog>
<time>
- representa data e/ou hora;<meter>
- utilizado para representar medidas, que podem
ser de distância, de armazenagem em disco, etc.Precisa desenvolver projetos HTML e não possui experiência ?? Aprenda com esse curso.
Elementos retirados do HTML5
Alguns elementos não existirão mais no HTML5. Alguns foram retirados porque sua função é puramente visual e devem ser substituídos por uma declaração no CSS (Cascading Style Sheets), como:
<basefont>
, <big>
,
<center>
, <font>
, <s>
,
<strike>
, <tt>
e <u>
.
Outros foram retirados porque afetam negativamente a acessibilidade do site:
<frame>
, <frameset>
e <noframes>
.
Apesar de serem considerados antigos,
<b>
e <i>
ainda serão reconhecidos e renderizados para fins de formatação,
mas devem ser substituídos sempre que possível pelos elementos
<strong>
e <em>
, respectivamente.Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são:
target
no elemento<a>
;align
nos elementos<table>
e demais tags de tabelas,<iframe>
,<img>
,<input>
,<hr>
,<div>
,<p>
, entre outros;background
em<body>
;bgcolor
nos elementos de tabela e no<body>
;border
em<table>
e<object>
;cellpadding
ecellspacing
em<table>
;height
em<td>
e<th>
;width
nos elementos<hr>
,<table>
,<td>
,<th>
e<pre>
;hspace
evspace
em<img>
e<object>
;noshade
esize
em<hr>
.
Doctype
Com o HTML5 usaremos apenas uma declaração doctype:<!DOCTYPE html>Além de única, ela é curta e fácil de lembrar - hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML.
Transição do XHTML
A semelhança entre o HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos deixarão o processo mais simples.A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como
<img>
e <input>
fossem "fechados":<input type="text" id="nome">
Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita:
<input type="text" id="nome" />
Logotipo HTML5
Em janeiro de 2011 o HTML5 ganhou um logotipo, junto com símbolos gráficos que mostram para o visitante quais recursos estão sendo utilizados naquele site, como CSS3 e multimídia. Segundo o site oficial da W3C, o logotipo é "forte e confiável, universal como a linguagem de marcação que você escreve".
É hora de usar o HTML5?
Atualmente, praticamente todos os navegadores mais utilizados do mercado oferecem suporte à maior parte dos elementos do HTML5. No entanto, alguns desenvolvedores defendem a ideia de esperar um pouco mais para que esta nova especificação comece a ser utilizada pra valer, afinal, muitos acessos a sites ainda são feitos com versões de browsers que não trabalham com HTML5.
Outros acreditam que toda nova tecnologia deve ser colocada em prática o quanto antes, e já começaram a utilizar o HTML5 junto com scripts que fazem os navegadores mais antigos reconhecerem as novas tags (como, por exemplo, este script do desenvolvedor Remy Sharp).
A resistência sempre vai existir (infelizmente, hoje ainda encontramos sites diagramados com
<table>
como se estivéssemos
em 1990!). A versão 6 do Internet Explorer, por exemplo, permaneceu em uso
durante mais de uma década e precisou da ação de grandes
companhias como o Google, que
deixou de dar suporte a esta edição para tentar diminuir a quantidade de usuários
com um navegador incrivelmente antigo. Não é por menos que
muitos desenvolvedores se preocupam em criar páginas que funcionam em navegadores
atuais e também nos mais antigos, afinal, ninguém quer perder visitantes.Por esta razão, o jeito mais fácil de tomar a decisão sobre migrar ou não para o HTML5 é estudando o público-alvo do site para saber quais os navegadores mais utilizados por ele, e pensar se o tempo gasto com a adaptação para browsers antigos valerá a pena. Talvez seja mais interessante, por exemplo, redesenhar seu blog pessoal em HTML5, mas manter o portfólio em XHTML. Cada caso é um caso e planejamento, como em qualquer projeto, é essencial.
Decididamente, o HTML5 inaugura uma nova era no desenvolvimento de páginas para a internet, onde a mobilidade do usuário é a palavra-chave. Mudanças foram implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e acertos. A partir de agora, teremos aplicações Web mais ricas e com maior integração entre conteúdo on-line e off-line.
Para informações técnicas mais detalhadas sobre o HTML5, consulte a documentação oficial do W3C e a listagem de diferenças entre o HTML5 e sua versão anterior.
Fonte: Infowester