Padrões Web, semântica da Web e Web Semântica

Existe uma confusão sobre a conceituação de Web Semântica, entre dois conceitos que por vez brigam entre si: o mais conhecido é o proposto por Tim Berners-Lee, que define a Web Semântica como um ambiente onde “a informação é dada com um significado bem definido, permitindo melhor interação entre os computadores e as pessoas” (BERNERS-LEE et al, 2001). O outro pode ser definido como “semântica da Web”, e trata da forma como escrevemos nossos códigos, utilizando a tag correta no contexto correto para a qual ela foi criada.

Ambos os conceitos são muito semelhantes: buscam facilitar a organização da informação para a sua manipulação por máquinas, mas… Com exceção dos bots das máquinas de busca e alguns poucos agentes, escrever seu código corretamente não irá fazer com que seus sites e sistemas sejam reconhecidos automaticamente por estes. Um conceito não exclui o outro, e são até complementares (ambos tratam de padrões e buscam a interoperabilidade), mas no fim das contas são completamente diferentes entre si nos objetivos finais e nas técnicas de desenvolvimento. Assim, aqui usarei sempre a nomenclatura Padrões Web, e estou dizendo sobre o desenvolvimento de front-end de aplicativos Web, para evitar confusões entre semântica Web e Web Semântica (ou Web 3.0). Para saber mais sobre Web Semântica, acesse o site oficial do assunto do W3C, ou confira outros artigos publicados neste blog.

Por que codificar seguindo boas práticas?

Ao desenvolver dentro dos Padrões Web, a organização e a função dos elementos XHTML é um dos fatores essenciais na codificação. Cada elemento da página exerce uma função (como título, parágrafo, formulário, divisor, lista etc.), definindo assim um “significado” para cada parte do layout.

É muito importante que os elementos estejam marcados corretamente, e é útil por uma série de motivos como:

Reduzir o custo e a complexidade do desenvolvimento e manutenção;
Aumentar a acessibilidade e a interoperabilidade;
Permitir a indexação eficiente do conteúdo pelos motores de busca;
Reduzir o tamanho dos arquivos e o tempo de renderização do navegador;

Entre diversos outros. Na medida em que formos avançando no guia, você verá que é muito mais lógico desenvolver de acordo com os padrões do que utilizar milhares de gambiarras com tabelas.

O que são os Padrões Web (Web Standards)?

Padrões Web (ou Web Standards, em inglês) são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C, destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos. Prevê o desenvolvimento em camadas (informação, formatação e comportamento), e possui inúmeras vantagens: uniformidade, simplicidade, liberdade, separação de estrutura e apresentação, facilidade de criação e manutenção, acessibilidade, extensibilidade, estabilidade etc. A lista é crescente, e só é percebida pelo desenvolvedor na medida em que ele os utiliza no seu dia-a-dia.

Eis como fica um trecho de código HTML desenvolvido com tabelas:

<table cellspacing="0" cellpadding="0" width="500">
  <tr>
    <td width="200"><a href="produto.php?id=1">TV LCD 22</a></td>
    <td><font color="FF0000">R$ 599,99</font></td>
  </tr>
  <tr>
    <td width="200"><a href="produto.php?id=2">TV LCD 40</a></td>
    <td bgcolor="#333333"><font color="FF0000">R$ 999,99</font></td>
  </tr>
  <tr>
    <td width="200"><a href="produto.php?id=3">TV LCD 45</a></td>
    <td><font color="FF0000">R$ 1199,99</font></td>
  </tr>
  <tr>
    <td width="200"><a href="produto.php?id=4">TV Plasma 45</a></td>
    <td><font color=“FF0000”>R$ 1299,99</font></td>
  </tr>
</table>

E o mesmo trecho equivalente nos Padrões Web:

<ul>
  <li>
    <a href="produto.php?id=1">TV LCD 22</a> - R$ 599,99
  </li>
  <li>
    <a href="produto.php?id=2">TV LCD 40</a> - R$ 999,99
  </li>
  <li>
    <a href="produto.php?id=3">TV LCD 45</a> - R$ 1199,99
  </li>
  <li>
    <a href="produto.php?id=4">TV Plasma 45</a> - R$ 1299,99
  </li>
</ul>

Imagine agora o HTML acima programado em PHP para acessar uma tabela em um banco de dados qualquer:

<table cellspacing="0" cellpadding="0" width="500">
<? foreach ($produtos as $produto) { ?>
  <tr>
    <td width="200">
      <a href="produto.php?id=<?=$produto[0];?>">
        <?=$produto[1];?>
      </a>
    </td>
    <td bgcolor="#333333">
      <span> - R$ <?=$produto[2];?></span>
    </td>
  </tr>
<? } ?>
</table>

Veja o mesmo código nos Padrões Web:

<ul>
<? foreach ($produtos as $produto) { ?>
  <li>
    <a href="produto.php?id=<?=$produto[0];?>">
      <?=$produto[1];?>
    </a>
    - R$ <?=$produto[2];?>
  </li>
<? } ?>
</ul>

Compare os códigos na programação final. O segundo é infinitamente mais legível, ocupa menos espaço em bytes e requer muito menos processamento do computador (e olha que o código em HTML nem está tão “sujo” assim…). Precisa falar mais?

A semântica dos elementos

Como foi dito anteriormente, a função de cada elemento no XHTML é um dos fatores essenciais na codificação. Cada um deles tem um propósito específico e, além de não fazer sentido, é completamente errado seu uso para outros propósitos. O caso clássico é o das tabelas: durante muito tempo (até hoje na verdade, não me canso de ver sites e aplicativos usando e abusando de tabelas) elas foram utilizadas como suportes para o layout.

Existe um grande motivo para que tal bizarrice: a clássica incompatibilidade e limitação dos navegadores na renderização de layouts complexos. Mas isso foi há mais de década atrás, quando o Nestcape dominava o mercado e a Microsoft nem dava muita bola para o novo meio. O HTML era somente uma linguagem simples de publicação de documentos, e poucos pensaram que a Web se transformaria no meio de comunicação multimídia que hoje conhecemos.

A estrutura de elaboração do HTML consiste em instruções no conteúdo do documento, através de marcas de início e fim (tags) definindo trechos do conteúdo, mediante as quais se determina a formatação do texto, imagens e demais elementos que o compõem. O HTML se esgotou justamente por conta da confusão que faz na elaboração de seus documentos, não distinguindo os dados de marcação da própria informação contida no documento.

Nesses tempos heróicos, o uso de tabelas não só era massivo, como também incentivado, como podemos conferir na “pérola” a seguir:

As tabelas são parte integrante do HTML. Ao definir uma grade de linhas e colunas, pode-se alinhar sistematicamente os itens. O exemplo mais simples de uma tabela é colocar o material em duas ou mais colunas. (GOLDING; WHITE, p.125).

Em 1997 fazia muito sentido codificar com tabelas, até porque não havia outro jeito mesmo. Que atire a primeira pedra quem tem mais de 10 anos de desenvolvimento Web e não usou NENHUMA tabela para montar layouts. Mas, fazê-lo em 2011 mostra uma extrema ignorância, para não dizer coisa pior.

Referências bibliográficas:

FERRAZ, Ronaldo. Construindo sites com Padrões Web. Disponível em: http://kb.reflectivesurface.com/br/artigos/sitesComPadroesWeb. Acesso em 25 mar. 2010.

FERREIRA, Elcio. Produtividade Web 2.0: como ser produtivo desenvolvendo para Web. Disponível em: http://visie.com.br. Acesso em 5 jun. 2008.

GOLDING, Mordy; WHITE, Dave. Guia de cores para Web Designers. São Paulo: Quark, 1997.

WASP. The Web Standards Project. Disponível em: http://www.webstandards.org. Acesso em 25 mar. 2010.

WORLD WIDE WEB CONSORTIUM. XHTML2 Working Group Home Page. Disponível em: http://www.w3.org/MarkUp. Acesso em 10 mar. 2010.

Leia também:

W3C HTML Working Group Publishes New Drafts (blogs.msdn.com)
World Wide Web Consortium Must Seize High Ground on Web Standards Earlier, Says New CEO Jeffrey Jaffe (xconomy.com)
Microsoft bolsters Web-accessible data plan (news.cnet.com)