Estrutura do HTML5

"Olá pessoal, 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.
<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!"

Comentários

Postagens mais visitadas