hCard

hCard es un microformato destinado a marcar los datos de cualquier persona o entidad añadiendo un contenido semántico a los mismos y permitiendo de esta forma que tanto máquinas como personas puedan procesarlos y entenderlos.

Está basado en el estándar vCard y mantiene las mismas propiedades utilizando código XHTML.

Ejemplos

El siguiente ejemplo es lo que tendríamos en código XHTML sin marcado semántico con hCard, como podemos ver una persona lo entendería perfectamente pero no una máquina, que simplemente podría procesarlo:

<p>
        <strong>Guillermo García</strong><br />
        Calle falsa, 1<br />
        una ciudad, un país<br />
        989-99-99-99
</p>

Resultado

Guillermo García
Calle falsa, 1
una ciudad, un país
989-99-99-99

Aplicando microformatos

El siguiente ejemplo aplicaría el microformato, como se observa para el humano el resultado es idéntico pero una máquina ahora si podría comprender la información que está procesando.

<div class="vcard">
        <strong class="fn n">
                <span class="given-name">Guillermo</span> <span class="additional-name">García</span>
        </strong><br />
        <p class="adr">
                <span class="street-address">Calle falsa 1</span><br />
                <span class="locality">una ciudad</span>, <span class="country-name">un país</span>
        </p>
        <p class="tel">989-99-99-99</p>
</div>

Resultado

Guillermo García

Calle falsa 1
una ciudad, un país

989-99-99-99

Aplicando microformatos y elementos semánticamente

Por último, esta sería una versión más semántica aún ya que utiliza elementos con sentido, con significado, como lo sería una lista de propiedades del contacto:

<ul class="vcard">
        <li class="fn n">
                <strong class="given-name">Guillermo</strong>
                <strong class="additional-name">García</strong>
        </li>
        <li class="adr">
                <span class="street-address">Calle falsa 1</span><br />
                <span class="locality">una ciudad</span>, 
                <abbr class="region" title="Una región">UR</abbr>, 
                <span class="postal-code">94301</span>, 
                <abbr class="country-name" title="Un país">UP</abbr>
        </li>
        <li class="tel"><strong class="type" title="Teléfono del trabajo">Work</strong>: <span class="value">989-99-99-99</span></li>
</ul>

Resultado

• Guillermo García
• Calle falsa 1
  una ciudad, UR, 94301, UP
• Work: 989-99-99-99

Más semántico aún

O incluso con más sentido aún usando una lista de definiciones, en este caso definiciones de los atributos del contacto, aunque en el caso de una dirección el elemento más semántico sería <address>
Vamos a usar a Wikimedia Foundation Inc. como ejemplo:

<dl class="vcard">
        <dt class="fn n org"><strong>Wikimedia Foundation Inc.</strong></dt>
        <dd><address class="adr">
                <span class="street-address">149 New Montgomery Street</span>, (3.ª planta)<br />
                <span class="locality">San Francisco</span>, 
                <abbr class="region" title="California">CA</abbr>, 
                <span class="postal-code">94301</span>, 
                <abbr class="country-name" title="Estados Unidos">E.E.U.U.</abbr></address>
 
                <dl>
                        <dt class="tel type" title="Teléfono del trabajo">Work</dt> <dd class="tel value">+1-415-839-6885</dd>
                        <dt class="email type" title="Correo electrónico del trabajo">Work</dt> <dd class="email">info@wikimedia.org</dd>
 
                        <!-- Si añadimos Geodatos extra quedaría así: -->
                        <dt>Ubicación:</dt>
                        <dd class="geo">
                                <ul class="geo">
                                <li class="latitude" title="37.786928"><abbr title="Norte">N</abbr> 37° 47.216</abbr></li>
                                <li class="longitude" title="-122.399647"><abbr title="Oeste">W</abbr> 122° 23.979</li>
                                </ul>
                        </dd>
                </dl>
        </dd>
</dl>

Resultado

Wikimedia Foundation Inc.

149 New Montgomery Street, (3.ª planta)
San Francisco, CA, 94301, E.E.U.U.

Work

+1-415-839-6885

Work

info@wikimedia.org

Ubicación:

• N 37° 47.216
• W 122° 23.979

Conclusión

Si usas un navegador web como Google Chrome (o Chromium) o Firefox junto a algún plugin para microformatos, podrás comprobar, dependiendo del plugin, que están disponibles las tarjetas de contacto automáticamente con solo acceder a esta página.
Por lo tanto, los microformatos han permitido que una máquina (el ordenador con el software del navegador) pueda entender dichos datos y procesarlos para un uso determinado; en este caso la obtención de una tarjeta de contacto.

Enlaces externos

• Microformats.org, sitio web de los Microformatos por Tantek Celik y Dan Cederholm entre otros.