Design Coding

...
inspirar-se mas não copiar
strong vs b
...

Há uma lista de elementos HTML que estão mal representados na generalidade da marcação usada actualmente na web. Vários destes elementos têm maior valor semântico que o que actualmente é aplicado, mas com o aumento da popularidade do design orientado pelo CSS com os elementos HTML a serem usados para o que foram concebidos julgo que seria bom expôr estes elementos indicando em que situações seriam úteis. Um desses elementos é o elemento address:

<address>

O marcador <address> foi concebido para conter informação sobre endereços, assinatura e autoria. Números de telefone, fax, endereços físicos, endereços de correio electrónico, ICQ/Gtalk... ou qualquer outros dados de contacto em linha e fora dela são todos válidos. Normalmente os elementos <address> encontram-se no topo ou na parte de baixo do documento.

Utilização:

<address>

O Nome da entidade
<br />

Rua do Mistério, 126
<br />

1025 Lisboa
<br />

Telefone: 21 000 0000
<br />

Fax: 21 00 0001


</address>

Para quê? Posso fazer o mesmo com um marcador <div>

Os elementos agrupados com um <div> não têm valor semântico excepto se lhes for atribuída uma identificação ou classe. Então porquê criar uma <div class="contacto"> quando já há um elemento que o pode fazer?

Exemplo:

address {
  background-color: #dfd;
  padding: 4em 0 4em 4em;
  font-style: normal;
}

...

<address>
<a href="http://aindaapensar.blogspot.com">Carlos</a>
<br />

NaoSeTrataDeNenhumaInstituição
<br />

Rua da Estória, 23424
<br />

1025 Lisboa

O resultado:

Carlos


NaoSeTrataDeNenhumaInstituição


Rua da Estória, 23424


1025 Lisboa