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

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

Segunda-Feira, 25 de Janeiro de 2010 às 11:28

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 que novas aplicações e oportunidades pudessem utilizar melhor a informação distribuída na web. Acontece que o resto do HTML não foi há 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.

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 há 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 artigo, 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>
  </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: 

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <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.

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>
  <section>
    <h1>Título do artigo</h1>
    <p>texto</p>
    <h2>Subtitulo</h2>
    <p>Mais texto</p>
  </section>
</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>

Fonte: Tableless

Tags:

Qual a sua opinião?

Comente e interaja!



Ainda sem comentários, comente!