No mundo editorial sabe-se bem que o texto situado no começo de um artigo é crucial para captar o interesse do leitor e conseguir que o texto inteiro seja lido. Na web é ainda mais importante captar o interesse do visitante, visto que o comportamento destes é ainda mais impaciente e volátil. Os buscadores não são como os leitores que possamos ter, mas também prestam mais atenção no conteúdo que situamos na parte superior da página, portanto será duplamente importante colocar acima o texto mais representativo da página.

Os motores de busca indexam o conteúdo das páginas desde o princípio do código HTML até o final, de modo que, no princípio da lista de palavras-chave, ficam os textos encontrados no início da página. De alguma maneira, os textos do princípio têm mais presença que os do final.

Ocorre muitas vezes que o design das páginas web contém uma estrutura em colunas que faz com que no princípio do código da página fiquem as palavras-chaves contidas no cabeçalho e na coluna da esquerda. O texto que mais deveria interessar aos buscadores está situado na coluna central, mas dentro do código HTML, muitas vezes aparece primeiro algum texto que não é tão representativo.

Como colocar o código no início

A folhas de estilo em cascata podem nos ajudar bastante a otimizar o código de uma página, para que tenham muito mais peso os conteúdos que realmente têm importância. Ademais, graças à construção com CSS não é muito difícil conseguir que o corpo da página fique antes no código que a barra da esquerda.

Realmente podemos utilizar um código como este:

<div id="conteiner">
<div id="corpo">
<h1>Titulo</h1>
Texto importante da página
</div>
<div class="lateralesquerda">
Links...
<br>
Mais links
<br>
outros links..
</div>
</div>

Neste código, poderíamos atribuir à camada "corpo" uma margem à esquerda e fazer com que flutue à direita. Logo, a "lateralesquerda" teria outra largura e apareceria à esquerda, deixando o corpo à direita. Além disso, colocaremos dentro de um contêiner para que os conteúdos fiquem projetados sobre um espaço fixo.

O CSS seria o seguinte:

#conteiner{
   width:700px;
}
#corpo {
   width:530px;
   float:right;
}
#lateralesquerda{
   width:160px;
}

Se utilizarmos tabelas, também poderemos fazer com que o código fique ao princípio. Simplesmente colocaremos uma tabela com duas filas e duas colunas, onde a coluna do corpo terá um rowspan=2.

Algo como isto:

<table cellspacing="2" cellpadding="2" border="1">
<tr>
   <td></td>
   <td rowspan="2">corpo</td>
</tr>
<tr>
   <td>lateral</td>
</tr>
</table>

O espaço da lateral ficará à direita e o corpo à esquerda, embora tenhamos escrito ao princípio do código.