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.
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:
<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:
<video src="video.mov" width="400" height="360" />
<dialog> - junto com as tags <dt> e <dd> criado para formatar um diálogo:
<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>
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 <pbject>;
- noshade e size em <hr>.
Doctype
Com o HTML5 usaremos apenas uma declaração doctype:
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":
Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita:
Finalizando
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: http://www.infowester.com/
Isso aí, dei uma estudada sobre esses tópicos, mas já estava esquecendo pois uso html 5 com pouca frequência, agora irei usá-lo mais :D
ResponderExcluir