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!!
![ChatGPT – O Guia Definitivo [2024]](https://www.agenciamestre.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2022/12/chatgpt-270x173.png.webp)
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
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.
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”
esta e uma ds melhores materias de seo deste site.
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?
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
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 ?
Não gosto de usar o termo tableless. O melhor é usar Web Standards!
O uso correto das tags html causa uma grande diferença nos resultados de pesquisa.
é 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
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
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 …
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.