Tableless, Web Semântica e SEO:
Uso Correto das tags HTML
Publicado por Heron Inouye em 25 de Setembro 2007 | Categoria: Tags SEO
Olá pessoal.
Hoje irei falar sobre um assunto que muito já tem ouvido falar e tentar associar ao nosso escopo:Tableless e SEO.
Antes de mais nada, Tableless não é tecnologia nova nem linguagem de programação. É um modo de desenvolver a sua página, de forma a usar as tags de acordo com a finalidade de cada uma. Por exemplo: muitos desenvolvedores usam a tag <table> para montar o “esqueleto” da página. Na verdade, essa tag deve ser usada somente quando for listar uma tabela (daà o nome tableless). Exemplo:
<table>
<tr><td>Cabeçalho</td><tr>
<tr><td>Menu</td><tr>
<tr>
<td>Conteúdo</td>
<tr>
<tr><td>Rodapé</td><tr>
</table>
Quem nunca começou fazendo site assim que atire o seu mouse no chão. Sim, já fomos pecadores um dia. :p. Mas por que isto é errado? Simples: a estrutura do seu site não é uma tabela com uma lista de itens. Logo, o tableless é um passo à frente na questão de desenvolvimento web.
Técnica de SEO: Os crawlers dao importância à web semântica da sua página. Isso quer dizer que é melhor para o crawler ver uma tag e no seu interior, um conteúdo associado à tag. Exemplos:
Suponha que voce quer listar alguns produtos:
<h2>Marcas de guitarra disponÃveis</h2>
<ul>
<li>Fender</li>
<li>Gibson</li>
<li>Ibanez</li>
</ul>
contém muito mais relevância semântica do que
<b>Marcas de guitarra disponÃveis</b><br />
Fender<br />
Gibson<br />
Ibanez<br />
Outro exemplo, sobre envio de forms:
<form>
blablabla
<input type=”submit” />
</form>
é melhor do que
<form>
blablabla
<img onclick=”enviar_formulario();” />
</form>
Você deve estar pensando: “Mas que frescura! Por que tudo isso?”. Imagine que você está colocando dados numa carta para entrega e coloca assim:
Heron Inouye R.fim do mundo, 001 judas perdeu as botas
São Paulo SP 03131-031
O nosso amigo carteiro vai conseguir entender, mas você estará dificultando o trabalho dele, pois você pos dados em lugares que não deveriam ser postos. Além disso, pode haver problemas de ambiguidade. Se você fizer assim fica melhor:
Heron Inouye
R.fim do mundo, 001
Judas perdeu as botas
São Paulo SP
03131-031
Então, faça um documento certo, com tags certas, e quando ficar feio, use sabiamente o CSS.
Abração pra quem fica!!
Sugerimos a leitura destes outros artigos...
25 de Setembro de 2007 às 8:37 am
Bom post. Uma outra dica é que formularios com onclick são ruins pra acessibilidade
O tema “semântica” é de fato um dos mais produtivos pra web. Uma página semântica otimiza nas buscas, é boa pra acessibilidade, é mais leve, necessita de menos tempo de produção/reconstrução
enfim, uma das melhores coisas que podemos pensar na hora de produzir é nisso
25 de Setembro de 2007 às 10:34 am
Valew Rochester.
Acho que isso ajuda principalmente o programador.
Honestamente, me da agonia ver aquelas 9348098534 tags table tr td e vc nao tem ideia direito da estrutura.
01 de Outubro de 2007 às 3:36 pm
realmente, sem um papel na mão é impossivel saber onde começa e onde termina as coisas em um site desses… só o tempo que se perde entendendo ele..
fora quando há alguma tag sem fechar.. o rolo que dá.. compensa muito mais estudar u pouco e fazer algo mais “limpo”
01 de Outubro de 2007 às 11:04 pm
esta e uma ds melhores materias de seo deste site.
25 de Fevereiro de 2008 às 3:57 pm
Seus comentários não têm nada de semânticos.
Cada um deles tem 4 DIVs e 2 SPANs aninhados. O correto seria você usar listas.
Quando você deixa de usar tabelas e passa a usar DIVs no local, várias delas, milhares, seu tabless não serviu de nada.
Seu botão de envio do formulário também não está nada semântico. Tudo bem que é um input type=”image”, mas o correto seria usar um input type=”submit” e fazer como você disse: “usar sabiamente o CSS”
Concorda?
18 de Março de 2008 às 12:29 pm
Ola Cláudio.
Concordo com a sua primeira e ultima opiniões. Mas com relação à isso, são coisas do wordpress. Não disponho de tempo sequer pra postar e responder aqui direito, imagina de ficar fuçando o código daqui.
Quanto ao esquema de tags divs e tables, se você identar o código, vai notar que o número de tags é menor para as divs, além do que diminui a legibilidade e escalabilidade do código.
abraços
03 de Agosto de 2008 às 12:31 pm
[...] Tableless, Web Semântica e SEO: Uso Correto das tags HTML | Mestre SEO (tags: tableless acessibilidade) [...]
08 de Setembro de 2008 às 4:51 pm
Olá, amigo !! tenho uma duvida bem simples ! se caso eu precise por uma quebra de linha na formatação de um texto !! deixa uma frase em 2 linhas é correto eu usar um para resolver o meu problema ou devo de fato fazer isso com uma formatação de class ?? colocando um blok ou um padding ?