Das comparações com o desenvolvimento web nenhuma é tão eficaz quanto a da construção civil, afinal estamos construindo coisas.

O desenvolvedor web, o cara que programa, que mete a mão na massa – ou no código – é, obviamente, o pedreiro.  Um pedreiro de luxo, é verdade, mas continua pedreiro. Um peão. E assim como um peão o desenvolvedor web pode ser chamado para muitas coisas – os bicos ou freelas – que vão desde uma troca simples de azulejos – ou uma alteração num formulário de contato – até uma reforma total da cozinha – ou a construção de uma nova área do site.

Nesse aspecto não podemos esquecer que, assim como o pedreiro não é decorador, desenvolvedor web não é webdesigner. O pedreiro até dá pitaco no azulejo, na cor da tinta, mas quem estudou pra isso não foi ele (eu sei que o pedreiro não estudou nem pra ser pedreiro, mas você entendeu).

Se estiver fazendo um freela e precisar de um layout profissional chame um profissional. Layouts envolvem diagramação, equilíbrio de cores, hierarquias de elementos que, se você não estudou, você vai simplesmente ignorar e o resultado pode ser desastroso. Convide um designer para participar do projeto nem que seja para te dar consultoria ou para te mandar uma ideia inicial. Não fica caro e enriquece o seu trabalho, além de – se você trabalhar direitinho – o designer te chamar quando precisar de um desenvolvedor.

Outro ponto interessante é que, em construções decentes, sabe-se onde queremos chegar. Sites que não são bem planejados desde o começo têm uma estrutura difícil de entender e, por consequencia, difícil de navegar. Se estiver com um problema grande pra resolver nesse sentido é legal pedir ajuda pra alguém da área de arquitetura de informação.

Entretanto existem algumas diferenças na comparação com a construção civil como, por exemplo, o acumulo de funções. Não raro assumimos a função de engenheiro e pedreiro ao mesmo tempo, cobramos preços bem diferentes dos pedreiros (eu cobro, você não?!). Também passamos facilmente de pedreiros a engenheiros, mas quando precisamos temos que colocar nosso capacete de peão e ir lá mexer a massa.

Se você é um desenvolvedor Web que faz o seu dever de casa, já deve estar cansado de saber que o HTML/XHTML serve para estruturar o conteúdo de uma página Web. Sendo assim, você usa elementos como p para parágrafos, h1, h2, h3, h4, h5 e h6 para títulos, ol para listas ordenadas, entre outros igualmente populares. No entanto, existem alguns outros elementos com tanto valor semântico quanto estes, mas que são bem menos conhecidos. Veja alguns destes abaixo:

address

O elemento address define um conteúdo como uma informação de contato do autor ou dono da página Web.

  Avenida Expedicionário José Amáro, número 500, Apartamento 13, Vila São Luís,
  Duque de Caxias/RJ.

del

Tem a função de marcar um texto que foi removido da página.

<p>
  O Jogo Final Fantasy XIII é a continuação da famosa saga de RPG da Square
  ,sendo o seu lançamento exclusivo para o Playstation 3.
</p>

ins

Especifica um texto que foi inserido no documento, sendo muitas vezes usado em conjunto com o elemento del, como forma de corrigir uma informação anterior.

  <p>
    A atual versão do Rails é a 2.22.3.2.
  </p>

abbr

O elemento abbr serve para marcar um texto que é a forma abreviada de uma frase ou de uma expressão composta, ou seja, ele marca abreviações. Adicionalmente, é bom utilizar o atributo title neste elemento para especificar a palavra ou frase inteira que está sendo abreviada. Além disso, é válido mencionar que este elemento não é suportado pelo Internet Explorer 6.

  <p>
    O <abbr title = "EXtensible HyperText Markup Language">XHTML</abbr> deve ser
    usado para estruturar o conteúdo.
  </p>

acronym

Este elemento tem a função semântica de identificar acrônimos, que são um tipo especial de abreviação, onde cada letra do acrônimo corresponde à primeira letra de uma das palavras da expressão ou frase abreviada.

<p>
  Para definir a apresentação de uma página Web você deve usar o
  <acronym title = "Cascading Style Sheets">CSS</acronym>.
</p>

cite

Define o autor ou a fonte de uma citação, podendo, e devendo, ser usado em conjunto comos elemento q e blockquote, que identificam a citação em si.

<p>
  Conforme Martin Fowler disse:
</p>

<blockquote>
  <p>
    Any fool can write code that a computer can understand.
    Good programmers write code that humans can understand.
  </p>
</blockquote>

dl, dt e dd

Estes elementos são usados para criar listas de definição em uma página Web, sendo muito usados, por exemplo, para a criação de FAQs. O elemento dl representa a lista em si, enquanto os elementos dt e dd representam o termo a ser definido e a sua definição, respectivamente.

<dl>
  <dt>Ruby</dt>
  <dd>Linguagem de script orientada a objetos e criada por Yukihiro Matsumoto.</dd>

  <dt>Ruby on Rails</dt>
  <dd>Framework Web desenvolvido com a linguagem de programação Ruby</dd>

  <dt>ActiveRecord</dt>
  <dd>Um dos principais sub-frameworks do Ruby on Rails</dd>
</dl>

dfn

O elemento dfn é utilizado para marcar um termo que está sendo definido, sendo que pode-se usar o atributo title para resumir a sua definição. A diferença entre o dfn e uma lista de definição, é que o primeiro é utilizado para marcar uma definição isolada no texto, enquanto o segundo agrupa várias definições em uma lista.

<p>
  O <dfn title = "Framework Ruby">Merb</df> é um framework Web escrito em Ruby.
</p>

Conclusão

Existem muitos elementos no XHTML/HTML além daqueles que são amplamente conhecidos, e uma vez que estes elementos adicionais são mais precisos quanto à semântica do seu conteúdo, não há porquê não usá-los. Dessa forma, suas páginas Web ficarão mais corretas semanticamente, o que significa uma maior acessibilidade.

Além disso, não se limite aos elementos extras mostrados aqui, uma vez que a idéia deste post era apenas mostrar através de exemplos que quase sempre há um elemento mais preciso para marcar o seu conteúdo. Portanto, quando tiver dúvidas se está usando o elemento correto em sua página Web, pesquise pare descobrir se não há uma opção mais adequada.

Por fim, embora alguns destes elementos possuam um estilo padrão definido pelo browser, a regra de ouro continua valendo, ou seja, para definir a apresentação deles você deve usar o CSS.