HTML 15/07/2012

Criando um layout básico em HTML5

Nota editorial: Este artigo foi publicado originalmente em 2012. Os exemplos refletem ferramentas e práticas disponíveis naquele período; use-o como material histórico e consulte a documentação atual antes de aplicar as técnicas em um projeto novo.

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 estrutura 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>&nbsp;</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…