Nova estrutura de código no HTML 5

Nesse post, vou falar sobre a nova estrutura de construção de código que o HTML5 traz. Veja a figura abaixo:

Atualizado em 03/10/2011

Nova estrutura HTML5

o HTML 5 oferece um padrão para a organização do seu site através das seguintes tags:

&#60header&#62: marca o cabeçalho da página. Normalmente é onde se coloca o logo e o menu do site.
&#60footer&#62: representa o rodapé da página. Geralmente é usado para inserir informações de quem fez o site.
&#60article&#62: indica o conteúdo propriamente dito do site, como posts e artigos.
&#60aside&#62: especifica o conteúdo relacionado ao artigo.
&#60nav&#62: contém os links para a navegação.
&#60section&#62: divide a página em blocos de conteúdo. Cada sessão pode conter header, footer, article, aside e nav.

Essas novas tags irão contribuir para melhorar a organização da estrutura da página, tornando-as mais amigáveis para os diversos mecanismos de buscas (SEO).

É importante lembrar que essas novas tags NÃO irão excluir a tag &#60div&#62. Antes, ela continuará sendo usada para funções mais específicas dentro dessas novas tags por exemplo:

Porém, nenhum dos principais navegadores aceitam ainda essa nova organização que o HTML 5 proporciona. Então, é necessário estilizá-las usando o seguinte código CSS:

Veja o seguinte código exemplo de uma estrutura de site em HTML5:

Os seguintes navegadores aceitam essa nova estrutura:

Faça os testes você mesmo e boa sorte!

Confira aqui o Tutorial Completo HTML5 2012

Author Description

dukountra

There are 3 comments. Add yours

  1. 28th julho 2011 | lucas says: Responder
    você tem que acha mais codigos.
  2. 28th julho 2011 | lucas says: Responder
    le gauuuuuuu
  3. 5th abril 2012 | Lucas Ramilho says: Responder
    Achei Super lgl

Join the Conversation