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.