Até agora aprendeste a criar páginas com cabeçalho, corpo e rodapé usando marcadores semânticos e estilos simples.
Nesta aula vais aprender a usar o marcador div para organizar e dividir as páginas em áreas bem definidas, controlando a sua dimensão, cor e posição com CSS.

O div é um dos marcadores mais importantes no HTML, pois permite criar blocos que agrupam conteúdos — como o cabeçalho, o menu, a área principal e o rodapé.

Estrutura básica de uma página com

Explicação passo a passo

• #header → representa o topo da página (título ou logótipo).

• #menu → é o espaço das hiperligações de navegação.

• #content → contém o conteúdo principal (texto, imagens, tabelas, etc.).

• #footer → fica no final da página com informações complementares.

Cada div é estilizado no CSS através do seu ID (#header, #menu, etc.), o que permite dar cores, margens e tamanhos diferentes a cada parte da página.

Dica

Pensa no div como “caixas” que compõem a tua página.
Com o CSS, decides a cor, o tamanho e o posicionamento de cada caixa.