Templates de Layout HTML

Um layout de página é a forma como as principais regiões de uma página — o cabeçalho, a navegação, o conteúdo principal, a barra lateral e o rodapé — são dispostas na tela. Este capítulo mostra como construir um layout de forma moderna: marcar as regiões com elementos semânticos do HTML5, e depois posicioná-las com CSS Flexbox ou CSS Grid. Ao final, você será capaz de montar uma página responsiva com múltiplas colunas do zero.

A estrutura de uma página típica

Quase todo site é construído a partir dos mesmos cinco blocos:

Região	Finalidade	Elemento
Cabeçalho	Logotipo, título do site, banner	`<header>`
Navegação	Menu principal / links	`<nav>`
Conteúdo principal	O conteúdo único da página	`<main>`
Barra lateral	Links relacionados, anúncios, "extras"	`<aside>`
Rodapé	Copyright, contato, links secundários	`<footer>`

Antes do HTML5, essas regiões eram escritas como elementos genéricos <div> com atributos id ou class como <div id="header">. Isso ainda renderiza bem, mas não carrega nenhum significado: um navegador, um leitor de tela ou um mecanismo de busca não consegue distinguir um banner de um rodapé. Os elementos semânticos acima descrevem o que cada região é, o que melhora a acessibilidade e o SEO sem custo adicional. Veja a lista completa em Elementos Semânticos no HTML5.

Um esqueleto semântico de página

Comece com a marcação, antes de adicionar qualquer CSS de layout. Use cada elemento de referência uma vez onde ele naturalmente se encaixa:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Welcome</h2>
      <p>This is the primary content of the page.</p>
    </main>

    <aside>
      <h2>Related</h2>
      <p>Links, ads, or extra information go here.</p>
    </aside>

    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>
  </body>
</html>

Algumas regras que vale lembrar:

Deve haver apenas um <main> por página, e ele não pode estar aninhado dentro de <header>, <nav>, <aside> ou <footer>.
<nav> é para blocos de navegação principais, não para qualquer grupo de links.
<aside> é um conteúdo tangencial ao conteúdo principal — funciona tanto dentro de <main> quanto ao lado dele.

Este esqueleto ainda não tem colunas; tudo é empilhado verticalmente. O layout — transformar esses blocos em colunas — é uma tarefa do CSS, que adicionamos a seguir.

Um layout de duas colunas com Flexbox

O CSS Flexbox organiza itens ao longo de um único eixo — uma linha ou uma coluna — e é ideal para uma disposição de conteúdo com barra lateral. Envolva <main> e <aside> em um container flex; display: flex os coloca lado a lado, e flex controla como o espaço restante é distribuído.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flexbox two-column layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      header, footer {
        background: #2c3e50;
        color: #fff;
        padding: 16px;
      }
      .container {
        display: flex;
        gap: 16px;
        padding: 16px;
      }
      main {
        flex: 3;            /* main takes 3 shares of the space */
        background: #ecf0f1;
        padding: 16px;
      }
      aside {
        flex: 1;            /* sidebar takes 1 share */
        background: #dfe6e9;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <header><h1>My Website</h1></header>
    <div class="container">
      <main>
        <h2>Main content</h2>
        <p>This column grows to fill most of the width.</p>
      </main>
      <aside>
        <h2>Sidebar</h2>
        <p>A narrower second column.</p>
      </aside>
    </div>
    <footer><p>&copy; 2024 My Website</p></footer>
  </body>
</html>

flex: 3 e flex: 1 fazem as duas colunas dividirem a largura disponível em uma proporção de 3 para 1. Como são proporções, as colunas permanecem fluidas: elas encolhem e crescem com o viewport em vez de ficarem com um número fixo de pixels. Para empilhá-las em telas pequenas, envolva a regra em uma media query:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Um layout completo com CSS Grid

O CSS Grid organiza itens em duas dimensões — linhas e colunas ao mesmo tempo — o que o torna a ferramenta mais adequada para um layout de página inteira. Com grid-template-areas você pode desenhar o layout em texto simples e atribuir cada elemento a uma região nomeada:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Grid page layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 3fr;   /* sidebar : content */
        grid-template-areas:
          "header header"
          "nav    main"
          "footer footer";
        gap: 12px;
        padding: 12px;
      }
      header { grid-area: header; background: #2c3e50; color: #fff; }
      nav    { grid-area: nav;    background: #dfe6e9; }
      main   { grid-area: main;   background: #ecf0f1; }
      footer { grid-area: footer; background: #2c3e50; color: #fff; }
      header, nav, main, footer { padding: 16px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <header><h1>My Website</h1></header>
      <nav>Navigation</nav>
      <main>
        <h2>Main content</h2>
        <p>The header and footer span both columns.</p>
      </main>
      <footer><p>&copy; 2024 My Website</p></footer>
    </div>
  </body>
</html>

A unidade fr significa "uma fração do espaço livre", portanto 1fr 3fr torna a coluna de conteúdo três vezes mais larga que a barra lateral — novamente, uma proporção fluida em vez de uma largura fixa. O mapa visual em grid-template-areas permite que o cabeçalho e o rodapé se estendam por ambas as colunas simplesmente repetindo seus nomes em uma linha.

Flexbox ou Grid — qual devo usar?

Ambos são modernos, bem suportados e frequentemente intercambiáveis, mas têm uma divisão natural de trabalho:

Use Flexbox quando estiver organizando itens em uma direção — uma barra de navegação, uma barra de ferramentas, uma fileira de cartões ou uma divisão de conteúdo com barra lateral.
Use Grid quando precisar de linhas e colunas juntas, como um layout de página inteira (cabeçalho / barra lateral / conteúdo / rodapé) ou uma galeria de imagens.

Um padrão comum e robusto é usar Grid para o esqueleto geral da página e Flexbox para os componentes menores dentro de cada região.

Layouts de largura fixa vs. fluidos

Os exemplos acima são fluidos (também chamados de líquidos): as larguras são expressas como proporções (flex: 3, 3fr) ou porcentagens, de modo que o layout se ajusta para preencher qualquer tela. Esta é a base do design responsivo.

Um layout de largura fixa fixa as regiões em um valor exato de pixels, por exemplo width: 960px ou flex: 0 0 240px para uma barra lateral. Larguras fixas oferecem controle preciso, mas não se adaptam — em um telefone estreito causam rolagem horizontal, e em um monitor largo deixam espaço vazio. Na prática, a maioria dos sites combina os dois: uma barra lateral de largura fixa ao lado de uma coluna de conteúdo fluida, geralmente limitada com max-width para que telas muito largas permaneçam legíveis.

Informação

A abordagem mais antiga para layouts de múltiplas colunas usava a propriedade CSS float junto com valores negativos de margin. Essa técnica é agora considerada legada — é frágil e difícil de manter. Use Flexbox ou Grid para layout; float hoje é principalmente para envolver texto ao redor de uma imagem.

Templates de layout prontos

Se você preferir começar com uma estrutura pronta, a galeria abaixo oferece layouts HTML para download — fixos, fluidos e híbridos, com duas ou três colunas. São uma referência útil, mas as técnicas modernas mostradas acima são a forma recomendada de construir novas páginas.

Esses templates foram construídos com a técnica legada de CSS float e margin negativa. Você pode estudá-los para obter ideias, mas reconstrua a estrutura com as abordagens de Flexbox ou Grid mostradas acima para um resultado mais fácil de manter e responsivo por padrão.

Personalizando um template

Depois de escolher uma estrutura de que goste, aqui estão formas comuns de torná-la sua:

Substitua o texto de exemplo e adicione suas próprias imagens.
Ajuste a marcação semântica para corresponder ao seu conteúdo.
Aprofunde a marcação com nosso tutorial de HTML.
Reestilize o layout com nosso tutorial de CSS.
Adicione interatividade com nosso tutorial de JavaScript.

Prática

Quais elementos semânticos do HTML5 são comumente usados para estruturar o layout de uma página?

Prática

Qual técnica CSS é mais adequada para um layout de página bidimensional completo com linhas e colunas?

CSS GridCSS float com margens negativasTabelas HTMLA tag <center>