Organizando a página em partes

Quando uma página cresce, não basta ir jogando elementos sem critério. Em algum momento, você precisa pensar em layout.

Ou seja: como a página vai ser dividida em áreas principais.

Exemplo de estrutura

Carregando...

O que cada parte representa?

• <header> cabeçalho;
• <nav> navegação;
• <main> conteúdo principal;
• <section> seção de conteúdo;
• <footer> rodapé.

E o visual?

O HTML organiza a estrutura. O posicionamento mais bonito normalmente vem com CSS.

Mas já deixar a página separada em regiões corretas ajuda muito. Sem isso, o layout vira um monte de blocos sem conversa entre si.