Estrutura da página
A estrutura básica de uma página consiste nos elementos mencionados até aqui. Eles mantém entre si uma hierarquia que deve ser respeitada na construção da página. Assim, pode-se criar um arquivo base para a construção de todas as páginas de um site, modificando apenas os seus metadados.
Exemplo:
A estrutura do site
Embora você possa simplesmente pular essa etapa e começar a criar páginas avulsas, é interessante que toda a estrutura do site seja planejada com antecedência. O processo de design do site deve levar em consideração qual o objetivo do site, o público alvo, quantas páginas serão necessárias para atingir o objetivo e, por fim, qual a estrutura de links deve ser utilizada. Partindo dessa última, pode ser criado uma espécie de organograma de como o seu site será desenvolvido.
Mais do que a estrutura de navegação, pode ser detalhado nessa etapa de "sketch" (esboço) do site como ficarão organizados os arquivos adicionais, como imagens, arquivos CSS, de scripts e outros. A partir daí pode-se partir para o design das páginas efetivamente.
A estrutura das páginas
Essa etapa muitas vezes ocorre simultaneamente ao desenvolvimento da aparência (skin) do site. A partir de um design pré concebido pode-se criar a estrutura da página, ou, ao contrário, pode-se definir a estrutura para a partir dela criar um design.
A imagem acima representa uma estrutura básica de uma página. Pode-se notar o logotipo como a primeira divisão acima, o menu logo abaixo, seguido pelas duas áreas principais de conteúdo (secundário - resumo do blog, forum e propagandas; e principal - esse texto), e finalmente, o rodapé da página. Nesse caso também foi adicionada uma outra divisão com os links para a página anterior e para a próxima página, de modo que você não precise usar a rolagem para navegar até a próxima página. Uma outra div engloba todas as anteriores para efetuar um posicionamento no centro relativo da tela (altere as dimensões da janela do seu navegador e veja o que acontece).
Divisões
As divisões são os elementos em bloco que estruturam a página, após serem definidas, parte-se para a criação das mesmas, com as suas dimensões, alinhamento, e aparência. Por muito tempo as tabelas foram utilizadas para esse fim, no entanto as tabelas são destinadas a organizar dados tabulares, e não fornecer estrutura para uma página. Com o advento do XHTML, as divisões (div) conquistaram o merecido espaço como elementos estruturais da página.
Exemplos:
Dentro do elemento div pode-se adicionar qualquer conteúdo que se queira, incluindo outra div, textos, imagens, links, vídeos, etc. A principal característica desse elemento é que pode-se utilizá-lo para posicionar precisamente os elementos em uma página. Acesse o código-fonte dessa página e repare na estrutura criada pelas div para posicionar os anúncios ao lado, esse bloco de texto e o rodapé ao fim da página.
Comentários
Os comentários são textos que passam determinadas informações ao leitor do código da página, não sendo exibidos pelo navegador. São muito utilizados em páginas de estrutura complexa para informar ao webdesigner ou programador a que corresponde um determinado bloco de código.
Exemplo: