Criando um layout básico em HTML 5

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>&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…

Experimente e poste o seu resultado nos comentários.

Leave a Reply Cancel reply