Este artigo pretende ensinar a você, caro leitor, como criar um layout padrão para o seu site, utilizando HTML5. Vou assumir que você já conhece o básico de HTML, portanto vamos direto para a criação do layout usando as novas tags semânticas do HTML5.
Essa é a estrututa básica do nosso layout. Se você abrir este arquivo no navegador o layout ficará “corrido” na tela pois ainda não fizemos a estilização da estrutura (ver exemplo).
<!DOCTYPE html> <html> <head> <title>Layout em HTML 5</title> </head> <body> <header><h1>Cabeçalho</h1></header> <section> <nav> <h5>Menu</h5> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </nav> <article> <h2>Conteúdo</h2> </article> </section> <footer><p>Rodapé</p></footer> </body> </html>
Incluindo o estilo da nossa página, o nosso layout já começa a “tomar forma” (ver exemplo).
<!DOCTYPE html> <html> <head> <title>Layout em HTML 5</title> <style> nav {background: #eee; float: left; width: 30%;} article {background: #555; float: left; width: 70%;} </style> </head> <body> <header><h1>Cabeçalho</h1></header> <section> <nav> <h5>Menu</h5> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </nav> <article> <h2>Conteúdo</h2> </article> </section> <footer><p>Rodapé</p></footer> </body> </html>
Aqui percebemos um “problema”. O nosso rodapé fica preso ao conteúdo, ao lado do menu. Para corrigir isso, incluímos uma div no nosso código, dividindo o rodapé do corpo do layout. Vale ressaltar que, apenas, incluir a div não resolverá o problema, temos que inserir o atributo “clear: both” na estilização dessa div para que a mágica aconteça. Abaixo o código com a correção (ver exemplo).
<!DOCTYPE html> <html> <head> <title>Layout em HTML 5</title> <style> nav {background: #eee; float: left; width: 30%;} article {background: #555; float: left; width: 70%;} div {clear: both;} </style> </head> <body> <header><h1>Cabeçalho</h1></header> <section> <nav> <h5>Menu</h5> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </nav> <article> <h2>Conteúdo</h2> </article> </section> <div> </div> <footer><p>Rodapé</p></footer> </body> </html>
Pronto, seu layout está pronto. Você pode brincar um pouco mais, mudando as cores das tags, aplicando margin, padding, etc…
Experimente e poste o seu resultado nos comentários.