English العربية Português 日本語

HTML: Layout HTML

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.

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

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
.nav { background: #333; color: #fff; padding: 10px; text-align: center; }
.nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
.main { flex: 3; padding: 20px; background: #f4f4f4; }
.sidebar { flex: 1; padding: 20px; background: #e4e4e4; }
.footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<div class="header"><h1>Meu Site</h1></div>
<div class="nav">
<a href="#">Início</a>
<a href="#">Sobre</a>
<a href="#">Serviços</a>
<a href="#">Contato</a>
</div>
<div class="container">
<div class="main"><h2>Conteúdo Principal</h2><p>Esta é a área de conteúdo principal da página.</p></div>
<div class="sidebar"><h3>Barra Lateral</h3><p>Coloque anúncios ou links relacionados aqui.</p></div>
</div>
<div class="footer">&copy; 2025 Meu Site</div>
</body>
</html>
▶ 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:

▶ Exemplo

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
nav { background: #333; color: #fff; padding: 10px; text-align: center; }
nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
main { flex: 3; padding: 20px; background: #f4f4f4; }
aside { flex: 1; padding: 20px; background: #e4e4e4; }
footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<header><h1>Meu Site</h1></header>
<nav>
<a href="#">Início</a>
<a href="#">Sobre</a>
<a href="#">Serviços</a>
<a href="#">Contato</a>
</nav>
<div class="container">
<main>
<section>
<h2>Últimos Artigos</h2>
<p>Este é o conteúdo do artigo.</p>
</section>
</main>
<aside>
<h3>Links Relacionados</h3>
<p>Conteúdo da barra lateral.</p>
</aside>
</div>
<footer>&copy; 2025 Meu Site</footer>
</body>
</html>
▶ 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

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
nav ul {
display: flex;
list-style: none;
padding: 0;
background: #333;
}
nav ul li a {
display: block;
padding: 14px 24px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background: #575757;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html>
▶ 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.

❓ 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

📝 Exercícios

  1. 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.
  2. 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)
Web-Tutorial.com

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.

100%