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">

 

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 <á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.
&lt;audio src=&quot;musica.mp3&quot;&gt;
Seu navegador não suporta o elemento de áudio.
&lt;/audio&gt;

 

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:
&lt;audio src=&quot;musica.mp3&quot; autoplay=&quot;autoplay&quot;&gt;
Seu navegador não suporta o elemento de áudio.
&lt;/audio&gt;

 

  • controls: especifica
    se deve ou não exibir os controles de áudio (play, stop, pause,
    etc).
&lt;audio src=&quot;musica.mp3&quot; controls=&quot;controls&quot;&gt;
Seu navegador não suporta o elemento de áudio.
&lt;/audio&gt;

 

  • A tag <dialog> define
    um diálogo ou conversa, como o próprio nome já diz.

&lt;dialog&gt;
&lt;dt&gt;Pedro&lt;/dt&gt;
&lt;dd&gt;Oi Lyvia como vai você?&lt;/dd&gt;
&lt;dt&gt;Lyvia&lt;/dt&gt;
&lt;dd&gt;Vou bem e você?&lt;/dd&gt;
&lt;dt&gt;Pedro&lt;/dt&gt;
&lt;dd&gt;Tudo ótimo!&lt;/dd&gt;
&lt;/dialog&gt;

 

  • Tag <details>:
    utilizada para descrever detalhes de um documento, ou de trechos
    dele.
&lt;details&gt;Este poema foi escrito por Luis Fernando Veríssimo.&lt;/details&gt;

 

  • Porfim, a tag <figure>.
    Ela é utilizada pra inserir uma legenda relacionada a uma imagem,
    vídeo, áudio, objeto, etc.

&lt;figure&gt;
&lt;img src=&quot;imagem.jpg&quot; alt=&quot;imagem&quot; title=&quot;imagem&quot; /&gt;
&lt;legend&gt;Figura 1. Este texto tem relação com a imagem acima.&lt;/legend&gt;
&lt;/figure&gt;

 

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!

Deixe sua resposta