Olá, pessoal!

Fiquei feliz pela aceitação do artigo anterior e os bons debates que acabaram por surgir. Hoje darei início a uma coisa mais prática e menos teórica sobre o HTML5.

A primeira coisa que irei abordar são tags para organização e otimização em mecanismos de buscas (SEO), o que muda na estrutura de um site com os novos padrões de HTML.

Caso tenham alguma dúvida ou queiram conversar sobre o assunto, podem me encontrar no Twitter ou entrar em contato pelo meu site. Bem, vamos lá…

Estrutura Básica

Quando damos início à construção de um site em tableless, na estrutura básica, normalmente são utilizadas DIVs principais, como: topo/head, menu, conteudo/content/home/post, rodape/footer, coluna/sidebar/lateral e etc…

Exemplo que costumo usar:

<div class="topo">
</div>
<div class="menu">
</div>
<div class="conteudo">
</div>
<div class="rodape">
</div>

Costumo sempre usar a nomenclatura em português, para facilitar manutenções futuras por outros profissionais.

Com o HTML5, estas DIVs não serão mais necessárias. Teremos tags específicas para separarmos o nosso layout por partes. Que são elas: Header,  Article, Nav, Section, Footer e Aside.

As DIVs ficarão encarregadas apenas para posicionamento de conteúdo dentro de cada sessão e não mais para toda estrutura.

Exemplo de como ficará uma estrutura básica:

<header>
   <h1>Logotipo da Empresa</h1>
</header>
<nav>
   <ul>
      <li>Página Inicial</li>
      <li>Portfolio</li>
      <li>Contato</li>
   </ul>
</nav>
<article>
   <section>
      <h1>Nome da Notícia<h1> - Postado por <h2> Nome do Autor </h2>
      <p><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio quam,dictum in sagittis a,cursus
 sit amet enim. Nunc ante dolor, condimentum ut mattis eget, fringilla non urna. Nam ultricies
 dolor ac felis scelerisque rhoncus. Nunc varius velit ac nulla aliquet at ullamcorper tellus vehicula.
 Nulla tincidunt velit non tellus scelerisque vehicula. Praesent pellentesque aliquet arcu quis mattis.</span></p>
     <div class="fotos">
         <img class="fotoprincipal" src="imagem.jpg" />
         <ul>
            <li><img src="thumb01" /></li>
            <li><img src="thumb02" /></li>
            <li><img src="thumb03" /></li>
         </ul>
     </div>
   </section>
</article>
<aside>
   <h1>Conheça a Empresa</h1>
   <p><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio quam, dictum in.span></p>
   <h1>Assine Nossa Newsletter</h1>
   <p><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio quam, dictum in.span></p>
</aside>
<footer>
   <h2>Copyright  - Todos os Direitos Reservados</h2>
   <h1> Nome do Site </h1>
</footer>

Agora, vamos entender melhor o que fizemos:

• Header: topo/cabeçalho do nosso site. Como padrão, hoje ele costuma ter o logotipo da empresa e informações normalmente fixas.
• Nav: vem de navegação, seria para onde você pode ir/vir. Seria bacana se tivesse algum modo de vincular o link no elemento NAV com algum ARTICLE específico, fazendo no próprio HTML o comando de “menu ativo”, não acham? Pelo que pesquisei e testei, não é possível. Mas vamos ver em futuras atualizações.
• Article: seria o nosso conteúdo dinâmico, content/post. Dentro dele teríamos o conteúdo daquela página, dividido em sessões.
• Section: as sessões dentro do Article, por exemplo, dentro da home temos sessões de: Notícias, Eventos, Galeria de fotos. É importante ressaltar que cada section pode ter um footer e um header próprio.
• Aside: uma terceira coluna, com informações complementares ao conteúdo dentro do Article.
• Footer: o rodapé do nosso site, onde normalmente vão os Copyrights, quem fez e menu secundário.

Veja nesta ilustração como seria dividido hoje um site com estas tags:

Observações importantes:

– Tags seqüenciais, como por exemplo de Títulos (h1, h2, h3, h4, h5 e h6) se adequarão automaticamente dentro de cada section, header, footer, nav e semelhantes. Sempre houve a preocupação com estas tags, agora você pode tratá-las a partir de cada sessão, e tanto o navegador como o mecanismo de busca irão se virar para fazer uma leitura correta do site, dando uma ordem de importância certa para os títulos.

– As DIVs não irão ‘sumir’, serão usadas mais para alinhamentos internos, como demonstrei no exemplo anterior, com a div “FOTOS”. Servindo para posicionar os conteúdos dentro dos elementos principais.

Dúvidas, medos e preocupações

Na teoria são tudo mil maravilhas, mas e na prática? Serão novas TAGs para nos preocuparmos na hora de fazer um site crossbrowser.

Como será o comportamento destas tags? Elas aceitarão comandos de alinhamento, margens, bordas e etc? Alguns IEs mais antigos lêem de forma diferente alguns elementos, não aceitam HOVER, nem espaçamentos em alguns outros. Espero que isso não ocorra com estas tags e que sejam flexíveis em questão de estilização e posicionamento, em todos os browsers.

Já até imagino sites assim:

<div class="alinhamentoMenu">
    <nav>
    </nav>
</div>

Ou:

<nav>
    <div class="bordaMenu" style="width:100%; height:100%">
    </div>
</nav> 

Fazendo isso para corrigir problemas em alguns browsers. Espero realmente que isso não ocorra e que estas TAGs funcionem como devem funcionar.

Chega de milhares de DIVs para organização, dependendo de quem estruturou fica uma bagunça, ainda mais quando tem ajustes nos projetos, que o nome de cada DIV não condiz mais com sua função. Agora teremos o site devidamente separado!

Espero que tenham gostado do artigo, dentro de alguns dias falaremos sobre formulários em HTML5!

Vale a pena um agradecimento especial para a HostDime, que tem me dado um apoio gigantesco para produção destes artigos e apoiado o uso de novas tecnologias no mercado.