Dicas de Desenvolvimento Web
Sempre que você precisar exibir os detalhes de contato de um indivíduo ou uma organização, você pode usar um conjunto especial de class, atributos HTML definidos em um microformato conhecido como hCard.
O QUE SÃO MICROFORMATOS?
Existem VÁRIOS tipos de microformatos, cada um é projetado para fornecer formas padronizadas para representar a informação, com o objetivo de torná-lo legível por máquina (permitindo que seja usado por programas que acessem este tipo de dados). Outros exemplos incluem hCalendar para eventos de calendário, hReview para avaliações e hRecipe para receitas de cozinha.
O QUE É hCARD?
O hCard fornece um conjunto padronizado de valores para o class, atributo HTML, usado para transmitir informações de contato, como nomes, endereços, números de telefoneS, endereços de e-mail, nomes de organização (como locais de trabalho). Ele é baseado em vCard, que é um formato popular para informações de contato usadas em software como o Microsoft Outlook e o catálogo de endereços da Apple.
Vejamos um exemplo para um funcionário da HTML e CSS Pro, onde um conjunto de <span> e <div>, elementos HTML, foram envolvidos em torno do nome e endereço, e cada um deles usa uma class, atributo HTML, para indicar que tipo de informação contém esse elemento:
<div class="vcard">
<span class="fn">Luiz Augusto Vieira</span>
<div class="org">HTML e CSS Pro</div>
<a class="email" href="mailto:contato@htmlecsspro.com">
contato@htmlecsspro.com
</a>
<div class="adr">
<div class="street-address">Av. Paulista</div>
<span class="locality">São Paulo</span>,
<span class="region">SP</span>,
<span class="postal-code">014556-000</span>
<span class="country-name">Brasil</span>
</div>
</div>
USANDO hCARD!
Isso mostra apenas alguns dos campos possíveis que você pode usar em um hCard – outros exemplos incluem endereços de e-mail, nomes de mensagens instantâneas, aniversários, fotos, endereços de casa, trabalho e números de telefone e etc.
Você pode ver a gama completa de campos disponíveis para hCard aqui: https://microformats.org/wiki/hcard-cheatheet
Existe uma ferramenta útil para criar detalhes de contato formatados hCard aqui: https://microformats.org/code/hcard/creator
Você pode usar o CSS para controlar a apresentação desses elementos de qualquer maneira que você escolher, por padrão esses elementos não são exibidos de maneira diferente.
Você também pode acessar o link a seguir, para maiores informações sobre o hCard aqui: https://microformats.org/wiki/hcard