<
Menu

Tableless



HTML 5 – Mudanças na estrutura e semântica

Todos os dias sites e mais sites são publicados na internet e nenhum deles com um padrão de nomenclatura de classes e ids.

A Semântica sempre um dos pontos mais importantes do desenvolvimento com Padrões Web. Algumas iniciativas com o Microformats vieram na tentativa de trazer mais semântica ainda para nossos códigos, com o intuito de novas aplicações e oportunidades pudessem utilizar melhor a informação distribuída na web. Acontece que o resto do HTML não foi a bastante tempo modificado. Por exemplo, como você consegue distinguir de forma automática as informações do “header” (cabeçalho) dos sites? Não consegue. Você não consegue por exemplo, de maneira automatizada, identificar o que é um rodapé ou a parte do layout que está exibindo um artigo, por exemplo.

Todos os dias sites e mais sites são publicados na internet e nenhum deles com um padrão de nomenclatura de classes e ids que possamos utilizar para extrair informação de maneira inteligente. O HTML 4.01 é a versão atual da linguagem básica da Web, e não é atualizado a alguns anos. Esses detalhes de semântica não podem ser supridos para sempre por tecnologias como o Microformats. A versão 5 do HTML tende a suprimir essas necessidades e também atualizar pontos antigos do HTML 4, por exemplo, formulários.

Como disse no começo deste post, a estrutura de um site não é óbvia para as máquinas. Não existe nenhum padrão de construção dos elementos para indicar o que é o cabeçalho e o que é o rodapé, por exemplo. No HTML 5, iremos utilizar um padrão de tags que nos ajudará a marcar estas estruturas. Uma estrutura conhecida é mais ou menos assim:

<body>
  <div id="header">...</div>
   <div id="menu">...</div>
   <div class="post">...</div>
   <div id="sidebar">...</div>
   <div id="rodape">...</div>
</body>

Na estrutura acima, utilizei alguns nomes de classes e ids que costumamos utilizar no dia-a-dia. eu mesmo não utilizo a classe POST, uso mais CONTENT ou algo parecido. A estrutura do HTML acabará com isso. A idéia é substituir esse amontoado de DIVS por elementos que se encarreguem dessas funções, um exemplo da estrutura serial esse:

<body>
  <header>...</header>
  <nav>...</nav>
<section>
  <article>
      ...
  </article>
</section>
  <aside>...</aside>
  <footer>...</footer>
</body>
  • O elemento header define o cabeçalho. Nav define o menu ou a navegação do site.
  • Article define uma parte da página que tem uma composição de formulários, textos etc. Por exemplo, pode ser um post de forum, blog, comentários etc.
  • O elemento Section define uma seção do layout em um determinado element. Ele pode conter um header e também um footer se preciso.
  • O elemento aside consiste em envolver informações que tem algo a ver com o conteúdo principal do site. Pode ser um menu lateral, um sidebar padrão com menu, banner, busca etc…
  • Footer define o rodapé do elemento ou do layout.

Entenda que agora, qualquer elemento pode ter seu conteúdo separado por seções com o elemento section. Note também que os elementos podem ter também um header e um footer independentes do resto do layout. Como na imagem.

Exemplo Elemento HEADER

Uma dúvida comum entre os desenvolvedores é como fazer a estruturação e distribuição das tags de títulos (h1 até h6). Por exemplo, se eu utilizei já a tag H1 no logo do site, poderei utilizar para o título do artigo? Se repetirmos muitas vezes as mesmas tags de títulos, a importância que cada título tem sobre o outro se perderá. O Google poderá indexar de forma diferente e etc.
No HTML 5 esse problema ser resolverá, porque cada section que você inicia, você poderá começar novamente uma nova ordem de títulos. Por exemplo:

<header>
  <h1>Logo</h1>
</header>
<article>
    <h1>Título do artigo</h1>
    <p>texto</p>
    <h2>Subtitulo</h2>
    <p>Mais texto</p>
</article>

Dessa forma você conseguirá definir exatamente qual a importância de cada título e os leitores de tela, sistemas de busca e outras aplicações conseguirão fazer uma separação mais eficaz dos elementos textuais.

Entenda que os divs não irão deixar de existir. Você os usará em casos muito específicos, por exemplo, para fazer caixas de destaque:

  <section>
    <div class="destaque">
       <h1>Destaque 1</h1>
       <p>Texto</p>
    </div>
    <div class="destaque">
       <h1>Destaque 1</h1>
       <p>Texto</p>
    </div>
  </section>

Nesse caso estou usando os DIVs apenas por motivos de formatação. Ali não caberia um article, porque o conteúdo não é uma redação de um post, artigo e etc… Também não caberia uma section porque eu já agrupei este conteúdo dentro de uma section pai.

Para saber mais sobre isso, leia: The Elements Of HTML 5.
Irei escrever outros artigos sobre a inserção de vídeo e audio no código e uma série de outros assuntos interessantes sobre HTML 5. E o que você acha disso tudo? Deixe seu comentário!

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://about.me/diegoeis/

Mais posts do autor

Comentários (75)

  • Luana Samara

    Trabalho com CSS e HTML a quase 3 anos, gostei da nova organização, cada parte no seu devido lugar, irá diminuir o uso de tantas classes e Id’s. POsta como ficará com CSS aplicado.
    Abraços e parabéns pelo o site muito bom

  • http://www.tudocondominio.com.br segurança na rede

    Muito bom

    Esta na hora de atualizar para html 5 e utilizar melhor ocss no controle manutenção dos sites.

  • http://rachaweb.net RachaWeb

    Olha o que eu to vendo e que esse HTML 5 pra quem mexe com XML vai ser parecido…

  • Matheus

    As novas mudanças vão simplificar pacas, a codificação de uma página relativamente grande, querendo ou não, ficava no mínimo um pouco confusa.

    Obrigado pelo post esclarecedor Diego !

  • Pingback: PHP e frameworks Javascript « Else

  • Pingback: HTML 5 – Mudanças na estrutura e semântica « @nikaureliano Blog

  • Bruno

    Na minha opinião o que estão tentando fazer é tornar o HTML em um objeto XML e uma folha de estilos nova seria necessária.

    Acho mais fácil se o XHTML entrasse em acordo com as novas idéias e se montasse as regras.

    Por exemplo, uma funcionalidade interessante seria a capacidade das tags HTML se comunicassem com tags XML.

    Exemplo:
    XML simples
    alunos.xml

    Maria
    26
    3333-3333

    No HTML algo como

    [foreach al in xmlAlunos]

    [end foreach]

    Desta maneira resolveríamos grande parte problemas, fazendo o html cada vez mais dinamico, podendo fazer a comunicação com JS apenas para fazer comunicação com o servidor.

    Os XMLs poderiam ser comsumidos pelo próprio HTML e gerado por uma linguagem de programação.

    Mas isto é só uma opinião, de alguém que não é tão rico quanto a microsoft nem tão influente como os usuários da comunidade livre.

    Fica uma guerra que na verdade quem perde são os desenvolvedores.

  • Bruno

    Na minha opinião o que estão tentando fazer é tornar o HTML em um objeto XML e uma folha de estilos nova seria necessária.

    Acho mais fácil se o XHTML entrasse em acordo com as novas idéias e se montasse as regras.

    Por exemplo, uma funcionalidade interessante seria a capacidade das tags HTML se comunicassem com tags XML.

    Exemplo:
    XML simples
    alunos.xml
    <aluno>
    <nome>Maria</nome>
    <idade>26</idade>
    <telefone>3333-3333</telefone>
    </aluno>

    No HTML algo como

    <xml load=”alunos.xml” id=”xmlAlunos”></xml>

    [foreach al in xmlAlunos]
    <div class=’exemplo’>
    <span class=’nome’>
    <node=”nome” />
    </span>
    </div>
    [end foreach]

    Desta maneira resolveríamos grande parte problemas, fazendo o html cada vez mais dinamico, podendo fazer a comunicação com JS apenas para fazer comunicação com o servidor.

    Os XMLs poderiam ser comsumidos pelo próprio HTML e gerado por uma linguagem de programação.

    Mas isto é só uma opinião, de alguém que não é tão rico quanto a microsoft nem tão influente como os usuários da comunidade livre.

    Fica uma guerra que na verdade quem perde são os desenvolvedores.

  • Pingback: HTML5 Diff | Boas práticas de Desenvolvimento com Padrões Web

  • Pingback: Links sobre HTML 5… « Internet Ideias – Dicas de programação, edição de imagem, internet

  • André Luis

    Muito bom post. Estou começando a me interagir com html 5 e estes exemplos me deram uma visão mais ampla.

  • http://about.me/fabioonet Fábio

    Olá Diego, no primeiro exemplo de estrutura html4 esta fechando um div que não existe . Abraços

  • http://www.softbott.com Marcelo F Bottoni

    Sem dúvida alguma esta evolução do html traz uma maior clareza e possibilita também uma melhor reutilização para os nossos códigos.

  • http://profile.yahoo.com/SGSJRCVJIHCRLPUBCTJPYGPUDA Frederic

    Excelente postagem meu caro.
    Muito interessante.

  • Pingback: Blog Isabel Mitchell – Links sobre HTML 5…

  • http://www.facebook.com/marcoscesarface Marcos César

    Saber construir uma estrutura consistente (semanticamente correta) é mais importante do que se preocupar com quantas tags vão ser utilizadas numa mesma página. Afinal nos esquecemos das regras e estruturação que utilizamos e aprendemos desde a primeira série, para tentar destaque nos mecanismos de buscas. E o que acontece? Falhamos sempre.

  • Marcos

    bom, minha duvida é a seguinte: para criar o corpo da pagina onde terá o conteúdo e o sidebar, normalemtne eu as envolvo com uma div id=”corpo” por exemplo, como essa nova semantica, qual a melhor solução para isso?

  • Lui Almeida

    Ola devo usar div? ou section?

  • jairo

    Gostei bastante, eu apenas gostaria de ver mais detalhes sobre as tags section e article. Ainda não consigo determinar quando usar cada uma delas.

    Mas você jé esclareceu muita coisa, obrigado.

  • Thiago Diniz

    Você usa os 2 por exempo

  • Yohino (Octávio)

    Muito bom, gostaria contactá-lo….

  • Tiago Correia

    Já faz um tempo esse post mas lendo ele e re-lendo meu livro da Smashing, vi que no livro de HTML5 o cara usa a section e o article invertido, nesse post esta assim section -> article e no livro da Smashing o autor usa assim article -> section, qual a maneira correta?

  • Valmyr M.

    Se não me engano article é para artigo , textos etc…
    Section você pode interpretar como uma sessão , ali você pode por os seus header etc …

  • gfhfghgfh

    fghfghgfh