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 e cellspacing em <table>;height em <td> e <th>;width nos elementos <hr>, <table>,
<td>, <th> e <pre>;hspace e vspace em <img>
e <object>;noshade e size 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
