Estrutura do HTML5
Olá pessoal,
Resolvi escrever sobre
o HTML5, a nova versão do HTML que promete revolucionar a
navegabilidade na web. O HTML passou vários anos sem atualizações,
o que é mortal para uma tecnologia em tempos de internet.
Finalmente, ele se renova e abre horizontes para navegadores modernos
e recursos multimídia.
Há pouco tempo
grandes nomes como Youtube e Vimeo anunciaram testes com o HTML5,
dando largada a uma corrida de padronização. Ainda assim, são
poucos os browsers que suportam a nova semântica do HTML.
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">
[/sourcecode]
No
HTML5, o DOCTYPE ficou infinitamente mais simples:
[sourcecode language=”html”]
<!DOCTYPE HTML>
[/sourcecode]
Então
a estrutura do HTML5 ficará assim:
<!DOCTYPE HTML>
<html>
<head>
<title>Título do documento</title>
</head>
<body> Conteúdo </body>
</html>
[/sourcecode]
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
[sourcecode language=”html”]
<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>
[/sourcecode]
HTML5
[sourcecode language=”html”]
<header></header>
<nav></nav>
<article></article>
<footer></footer>
[/sourcecode]
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 <áudio>
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.
[sourcecode language=”html”]
<audio src="musica.mp3">
Seu navegador não suporta o elemento de áudio.
</audio>
[/sourcecode]
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:
[sourcecode language=”html”]<audio src="musica.mp3" autoplay="autoplay">
Seu navegador não suporta o elemento de áudio.
</audio>
[/sourcecode]
- controls: especifica
se deve ou não exibir os controles de áudio (play, stop, pause,
etc).
[sourcecode language=”html”]<audio src="musica.mp3" controls="controls">
Seu navegador não suporta o elemento de áudio.
</audio>
[/sourcecode]
- A tag <dialog> define
um diálogo ou conversa, como o próprio nome já diz.
[sourcecode language=”html”]
<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>
[/sourcecode]
- Tag <details>:
utilizada para descrever detalhes de um documento, ou de trechos
dele.
<details>Este poema foi escrito por Luis Fernando Veríssimo.</details>
[/sourcecode]
- Porfim, a tag <figure>.
Ela é utilizada pra inserir uma legenda relacionada a uma imagem,
vídeo, áudio, objeto, etc.
[sourcecode language=”html”]
<figure>
<img src="imagem.jpg" alt="imagem" title="imagem" />
<legend>Figura 1. Este texto tem relação com a imagem acima.</legend>
</figure>
[/sourcecode]
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!