hCard para niños

hCard es como una etiqueta especial que se añade a la información de personas o empresas en una página web. Imagina que tienes una tarjeta de contacto con el nombre, dirección y teléfono de alguien. hCard ayuda a que los ordenadores entiendan esa información de la misma manera que tú la entiendes.

Está basado en un formato llamado vCard, que es un estándar para tarjetas de contacto electrónicas. hCard usa un lenguaje de internet llamado XHTML para añadir estas etiquetas especiales.

¿Por qué es importante hCard?

Cuando ves información en una página web, como un nombre y una dirección, tú sabes qué es cada cosa. Pero un ordenador solo ve texto. Sin hCard, el ordenador no sabe si "Guillermo García" es un nombre o si "Calle falsa, 1" es una dirección.

hCard añade un "significado" a la información. Esto permite que programas especiales, como los de tu navegador web, puedan reconocer y usar esos datos de forma inteligente.

¿Cómo funciona hCard?

hCard funciona añadiendo clases especiales (como etiquetas) a las partes de la información. Por ejemplo, una etiqueta para el nombre, otra para la calle, otra para la ciudad. Así, el ordenador puede identificar cada dato.

Ejemplos de hCard en acción

Vamos a ver cómo se ve la información con y sin hCard.

Información sin hCard

Así es como se vería la información de contacto en una página web sin usar hCard. Tú la entiendes, pero para un ordenador es solo texto sin un significado específico.

<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

Añadiendo etiquetas hCard

Ahora, mira cómo se ve la misma información cuando le añadimos las etiquetas de hCard. Para ti, el resultado es el mismo. Pero para un ordenador, ¡es una gran diferencia! Ahora sabe que "Guillermo" es un nombre y "Calle falsa 1" es una dirección.

<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

Organizando la información con hCard

Podemos organizar la información de una forma aún más clara para los ordenadores, usando elementos que tienen un significado propio, como una lista. Esto ayuda a que los programas entiendan mejor cada parte 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

hCard para organizaciones y lugares

hCard no solo sirve para personas, también se puede usar para empresas o lugares. Aquí vemos un ejemplo con la información de la Fundación Wikimedia, que es la organización detrás de Wikipedia. Incluye su dirección y hasta su ubicación geográfica.

<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>

                        
                        <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, EE. UU.

Work

+1-415-839-6885

Work

info@wikimedia.org

Ubicación:

• N 37° 47.216
• W 122° 23.979

¿Para qué sirve hCard en tu navegador?

Si usas un navegador web como Google Chrome o Firefox y tienes una extensión o "plugin" para microformatos, podrás ver cómo hCard es útil. Estos programas pueden detectar automáticamente la información de contacto en una página web.

Así, los microformatos como hCard permiten que tu ordenador "entienda" los datos y los use de una manera especial. Por ejemplo, podría ofrecerte guardar esa información directamente en tu lista de contactos.

Véase también

En inglés: HCard Facts for Kids