Tableless, Web Semântica e SEO:
Uso Correto das tags HTML

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!!

Receba Novidades

Insira seu email para receber novidades e dicas exclusivas da Agência Mestre!
Divulgue este artigo

14 Comentários para “Tableless, Web Semântica e SEO:
Uso Correto das tags HTML”

  1. Rochester

    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

    Responder
  2. Heron Inouye

    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.

    Responder
  3. Rochester

    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”

    Responder
  4. Cláudio

    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?

    Responder
  5. Heron Inouye

    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

    Responder
  6. Gustavo

    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 ?

    Responder
  7. Augusto

    é uma pena q ainda exista amadores que usem tabelas para layoutar, e pior q isso é usarem ASP com DB ACCESS p/ web … isso sim é groçeiro

    Responder
  8. everson

    Concordo que fazer um site sem tabela é muito melhor, mas limpo e etc… Mas na pratica se o site for bem feito em tabela ele em muitas vezes é mais bem posicionado do que alguns sites em tableless.

    Pesquise no google por “criação de sites” o primeiro da lista é um site todo em tabela. abaixo dele existem outros que são feitos em tableless com validação w3c… masd quem está ali em 1º ? o site de tabela…

    O que vc tem a dizer sobre o que Matt Cutts disse neste video?

    http://www.brasilseo.com.br/videos/matt-cutts/design-para-seo-css-ou-tabelas

    Responder
  9. dhuankles

    acho que isso é importantissimo.. tive um exemplo classico de um site meu que era todo em tabela alem de dificil manutenção nao indexava bem.. então resolvi fazer o site com tablesless.. em uma sema tive um otimo resultado… então isso é importantissimo pq vc facilita a vida dos robores …

    Responder
  10. Daniel Cavalcante Scalisse

    Olá pessoal.

    Concordo sobre o tableless.
    Deve ser usado mesmo para sites de notícias, blogs, e-commerce, entre outros.
    Essa nova técnica permite criar áreas com tamanhos independentes, sem quebrar o lay-out das outras.

    O que não se pode confundir é o tempo de carregamento com o tempo de montagem da página.
    O termo carregar se aplica ao download do html, css, javascript, flash, imagens, entre outros.
    A montagem ocorre quando esses ítens estão disponíveis na memória do micro, e o tempo pode variar conforme a configuração de hardware de cada micro, e navegador.

    Quando se usa table, o lay-out só é exibido quando as tags de fechamento são processadas.
    Já com div, o lay-out vai sendo mostrado conforme as tags são processadas, o que dá a sensação da página ficar mais rápida, mas na verdade o tempo final de download pode ser o mesmo, ou até maior, pois, é necessário mais código css do que se fosse com table.

    Com tableless o tempo de desenvolvimento é maior, o tráfego é maior, porém o resultado vale a pena.

    Agora, para telas de cadastro de sistemas e listagens, que são dados tabulados, é mais econômico e de simples manutenção, usar tables, pois, gera menos tráfego e o tempo de montagem da página não muda tanto como num site, blog, entre outros onde se faz uso bem maior de imagens, e interação do visitante.
    Numa tela de sistema, temos que esperar todos os campos ser carregados, e numa listagem também.

    Trabalhei num projeto de gerenciador de conteúdo da Petrobrás, onde os sites eram todos com tableless, e o sistema para gerir o conteúdo era com table.

    Espero ter contribuído com algo.
    Obrigado.

    Responder

Deixar um comentário

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>