HTML: Layout HTML

Última atualização: 2026-09-08

O layout de uma página web determina sua "aparência" — onde o cabeçalho vai, como a barra de navegação é organizada e como a área de conteúdo e a barra lateral são posicionadas. Um bom layout torna as páginas claras, legíveis e adaptáveis a várias telas.

Tags nesta seção: <div> <header> <nav> <main> <section> <aside> <footer>

1. O Que é Layout HTML

O layout HTML divide uma página web em várias áreas funcionais: cabeçalho, barra de navegação (nav), área de conteúdo principal (main), barra lateral (aside) e rodapé. No início, <div> combinado com CSS era comumente usado para obter o layout:

▶ Exemplo

▶ Experimente

O exemplo acima usa <div> com class e style para implementar um layout clássico "cabeçalho-conteúdo-rodapé", onde a seção do meio é dividida em uma área de conteúdo principal e uma barra lateral. O lado negativo dessa abordagem é que as próprias tags HTML não conseguem expressar o que cada área representa — todas as seções usam <div>, tornando a semântica pouco clara.

2. Layout Semântico

O HTML5 introduziu tags semânticas, substituindo <div> por tags com significado:

<header> — Área do cabeçalho
<nav> — Barra de navegação
<main> — Conteúdo principal
<section> — Seção de conteúdo
<aside> — Barra lateral
<footer> — Área do rodapé

▶ Exemplo

▶ Experimente

💡 Layout Semântico vs. Layout com Div: As tags semânticas são mais amigáveis para os mecanismos de busca (SEO) e para as tecnologias assistivas (leitores de tela). Os mecanismos de busca priorizam a análise do conteúdo dentro de <main>, e os leitores de tela podem pular diretamente para <nav>. O código também fica mais claro — você sabe o que cada área faz apenas olhando os nomes das tags, sem precisar adivinhar pelos nomes das classes.

3. Introdução ao Flexbox

display: flex é um modelo de layout flexível fornecido pelo CSS3 que permite que os elementos filhos se alinhem automaticamente na horizontal ou vertical. Basta definir display: flex no container, e os elementos filhos se "alinham" automaticamente. Aqui está uma barra de navegação horizontal construída com Flexbox:

▶ Exemplo

▶ Experimente

💡 Flexbox e Grid são o núcleo do layout CSS moderno. Flexbox se destaca no arranjo unidimensional (horizontal ou vertical), enquanto Grid se destaca em layouts bidimensionais (controlando linhas e colunas simultaneamente). Recomendamos estudar sistematicamente os tutoriais de CSS após aprender HTML para dominar essas duas ferramentas poderosas.

As propriedades comuns do Flexbox incluem justify-content (alinhamento horizontal), align-items (alinhamento vertical) e gap (espaçamento). A barra de navegação acima usa apenas uma linha — display: flex — para transformar os itens da lista de um arranjo vertical para horizontal, o que é muito conciso.

Tags nesta seção: <div> <header> <nav> <main> <section> <aside> <footer>

❓ Perguntas Frequentes

P Qual é a diferença entre <div> e tags semânticas (<header>, <nav>, etc.)?

R <div> é um container genérico sem significado semântico — apenas envolve conteúdo. Tags semânticas expressam explicitamente o propósito do conteúdo — <header> é cabeçalho da página, <nav> é navegação, <main> é conteúdo principal, <aside> é barra lateral, <footer> é rodapé. Benefícios：1）Código mais legível; 2）Mecanismos de busca entendem melhor a estrutura da página; 3）Usuários de leitores de tela podem pular rapidamente para áreas específicas.

P Quando uso Flexbox vs Grid?

R Flexbox é unidimensional — ideal para dispor elementos ao longo de um único eixo (horizontal ou vertical), como barras de navegação, listas de cards, grupos de botões. Grid é bidimensional — ideal para controlar linhas e colunas simultaneamente, como layouts de página, dashboards, galerias de imagens. Regra simples：se precisa controlar apenas uma linha ou coluna, use Flexbox; se precisa controlar múltiplas linhas e colunas, use Grid. Eles podem ser combinados.

P Como crio um layout de três colunas (esquerda-centro-direita)?

R A abordagem mais simples é Flexbox：defina o container externo como display: flex, dê às colunas esquerda e direita larguras fixas (como width: 200px), e defina a coluna central como flex: 1 para preencher o espaço restante. Código：

<div style="display: flex"><div style="width: 200px">Esquerda</div><div style="flex: 1">Centro</div><div style="width: 200px">Direita</div></div>

. Para design responsivo, use flex-wrap: wrap para colunas empilharem automaticamente.

P Por que devo usar tags semânticas em vez de <div>?

R O valor central das tags semânticas é "código auto-documentado". Benefícios：1）Desenvolvedores que veem <nav> sabem que é navegação, <aside> que é barra lateral — sem precisar adivinhar pelos nomes de classe; 2）Mecanismos de busca dão maior peso às tags semânticas, melhorando SEO; 3）Usuários de leitores de tela podem navegar via tags semânticas (como "pular para conteúdo principal"); 4）Mais fácil de entender a estrutura da página durante manutenção futura.

📖 Resumo

O layout HTML divide as páginas em áreas de cabeçalho, navegação, conteúdo, barra lateral e rodapé
Você pode usar <div> + CSS para obter qualquer layout
Tags semânticas (<header>, <nav>, <main>, <aside>, <footer>) substituem <div>, melhorando a legibilidade e o SEO
display: flex alinha os elementos filhos na horizontal, ideal para barras de navegação, listas de cards e cenários similares

📝 Exercícios

Layout de Página Pessoal: Use tags semânticas para construir uma página pessoal incluindo header (título do site), nav (links de navegação), main (apresentação + seção de portfólio), aside (informações de contato) e footer (aviso de direitos autorais). Use display: flex para tornar a barra de navegação horizontal.
Layout de Três Colunas: Use <div> para implementar um layout de três colunas (esquerda-centro-direita) onde a coluna central é adaptável e as colunas esquerda e direita têm 200px fixos. (Dica: use a propriedade flex do Flexbox para controlar as proporções)

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós