HTML 5
O HTML5 oferece uma experiência web totalmente diferente para usuários e, embora exista um longo caminho para ser finalizado, muitos navegadores importantes – com exceção do Internet Explorer 8 – como o Opera, Google Chrome, Safari 4 e o Firefox 3.5 já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.
Vamos construir uma estrutura básica e falar sobre cada uma delas.
A primeira modificação nota-se no DOCTYPE.
Antes, tínhamos vários tipos de DOCTYPE: Strict, Transitional ou Frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
No HTML5, o DOCTYPE ficou infinitamente mais simples:
<!DOCTYPE HTML>
Então a estrutura do HTML5 ficará assim:
<!DOCTYPE HTML>
<html>
<head>
<title>Título do documento</title>
</head>
<body>Conteúdo</body>
</html>
No HTML atual, não há um padrão para a leitura das máquinas do que é um cabeçalho, uma seção, menu ou rodapé. O que geralmente diferencia são as IDs das DIVs. No HTML5 esta padronização existe.
Vejam a diferença:
HTML 4.01
<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>
HTML5
<header></header>
<nav></nav>
<article></article>
<footer></footer>
Vejam que a estrutura já tem um padrão.
Explicando:
A tag <header> define uma introdução ao documento.
A tag <nav> define uma seção de navegação. Se você possuir botões Anterior e Próximo no seu documento, deve ser inserido dentro da tag <nav>.
A tag <article> define conteúdo externo. Pode ser uma notícia, artigo, texto qualquer ou qualquer outro conteúdo.
A tag <footer> define um rodapé do documento. Geralmente contém nome do autor, data que foi escrito o documento etc.
Agora que nós vimos as tags básicas, vamos dar uma olhadinha em outras super legais:
<aside> é utilizado para representar conteúdo que está relacionado com outro conteúdo dentro de um contexto (<article>). Um exemplo fácil para assimilação são as citações. Se há uma citação em um texto que deve ser destacado, pode-se utilizar o <aside> para destacar certa frase ou citação. Fora do contexto ele é interpretado como conteúdo secundário, não relacionado com o conteúdo em questão.
Resumindo: Se você utiliza o <aside> dentro de uma tag <article> você relaciona a citação com o conteúdo do article, caso contrário, com o tema da página em geral.
A tag <audio> define um som. Pode ser música, som, podcast, etc. Qualquer conteúdo dentro da tag de áudio será um texto alternativo caso o navegador utilizado não suporte a tag.
<audio src="musica.mp3">
Seu navegador não suporta o elemento de áudio.</audio> A tag <áudio> possui alguns atributos importantes:
src: especifica a localização do ficheiro de áudio.
autoplay: especificação de execução automática do arquivo após carregamento. Exemplo:
<audio src="musica.mp3" autoplay="autoplay">
Seu navegador não suporta o elemento de áudio.</audio> controls: especifica se deve ou não exibir os controles de áudio (play, stop, pause, etc).
<audio src="musica.mp3" controls="controls">
Seu navegador não suporta o elemento de áudio.</audio> A tag <dialog> define um diálogo ou conversa, como o próprio nome já diz.
<dialog>
<dt>Pedro</dt>
<dd>Oi Lyvia como vai você?</dd>
<dt>Lyvia</dt>
<dd>Vou bem e você?</dd>
<dt>Pedro</dt>
<dd>Tudo ótimo!</dd>
</dialog>
Tag <details>: utilizada para descrever detalhes de um documento, ou de trechos dele.
<details>Este poema foi escrito por Luis Fernando Veríssimo.</details>
Porfim, a tag <figure>. Ela é utilizada pra inserir uma legenda relacionada a uma imagem, vídeo, áudio, objeto, etc.
<figure>
<img src="imagem.jpg" alt="imagem" title="imagem" />
<legend>Figura 1. Este texto tem relação com a imagem acima.</legend>
</figure>
Utilizando a tag legend, você adiciona a legenda à imagem.
Claro que existem outras tags e atributos, porém resolvi falar apenas das principais, pois há muito mais além de cada elemento. Vou falar de cada uma detalhadamente em artigos separados! 
Viram só? Não é tão complicado! Pelo contrário, é bem facinho! Com isso, espero que futuramente os browsers se alinhem a um padrão único de leitura e acompanhem essa padronização, sem que os desenvolvedores necessitem de hacks (leia-se gambiarras) para que os sites funcionem em todas as plataformas!
Espero que eu tenha ajudado!
Até a próxima!
———————————————-
Autor: Michel Martins – Gerente de e-commerce do CPT Cursos Presenciais, programador e professor de cursos tecnológicos da Gigabyte Cursos. Graduando em Comércio Eletrônico pela Univiçosa, é apaixonado por tecnologia e gosta de saber de tudo um pouco.
michelmfreitas@gmail.com
Post original em:
http://imasters.uol.com.br/artigo/16050/
———————————————-
Desenvolvimento WEB | admin | 
2 de março de 2010 23:30 | 
Comments (0)
Subscribe