Maratona HTML5 parte 1

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> - conjunto de links que formam a navegação, links relacionados ao conteúdo da página; <aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).
Estrutura de uma p�gina escrita em HTML 5

Estrutura de uma p�gina escrita em HTML 5

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.

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.

Pronto galera esso espero que gostem, a seguir vem a 2 parte da maratona onde ensinarei para vocês a criar animação com HTML5, sem precisar de plugin... Flws.

19 de jul. de 2012