Microformatos: añadir significado al HTML

4min

El HTML de por si, nos proporciona cierto significado, cierta carga semántica, a través de sus etiquetas: H1 es un título, blockquote es una cita, etc.

Pero, ¿se podría decir que “algo” es una dirección, una fecha, un…? Ahora si gracias a los microformatos.

Los microformatos no son un nuevo lenguaje, aprovechan las etiquetas y atributos estándar del (X)HTML para asignar información semántica a porciones de código. Para ello, hacen uso sobre todo de los atributos id y class.

Con solo cambiar la manera de marcar el (X)HTML de las páginas web, se puede conseguir, que ciertos datos se puedan usar más allá  del navegador y contribuir así a la creación de nuevos servicios en combinación con los datos de los demás.

Si sabemos reconocer un evento con su fecha dentro de una página, es muy sencillo integrar esa información en un calendario personal, por ejemplo.

Los microformatos permiten recoger datos de forma sencilla y poder volcarlos a otras aplicaciones.

Recogiendo algunas definiciones, podemos decir que los microformatos son un “atajo rápido” para la Web Semántica.

Siguiendo las convenciones reconocidas por Microformats.org podemos hacer minibloques con significado dentro de una página web y pueden ser reutilizados por otros sitios o aplicaciones. Estos bloques facilitan a los usuarios, compartir, mover, coger… dichos datos. Ofreciendo datos de carácter personal, organización y eventos.

En el ejemplo siguiente, podemos ver un minibloque con datos personales como los que pueden constituir una tarjeta de visita:

<div class='contacto'>
	<p><a href='https://www.arsys.es'>Juan Pedro Gutierrez</a></p>
	<p class='empresa'>Arsys Internet S.L.</p>
	<p><a href='mailto:webmaster@arsys.es'>webmaster@arsys.es</a></p>
	<p>Chile 54 - Logroño, La Rioja. 26007 España</p>
	<p>+34 902 11 55 30</p>
</div>

Este código es correcto, y podemos entender que significado tiene cada etiqueta. Con los microformatos, simplemente se estandariza la forma en que lo decimos.

Podemos aprovechar los atributos class y reciclar el código para hacer que esos datos puedan ser usados de forma sencilla por otros usuarios… y construir un microformato hCard.

<div id='hcard-Juan-Pedro-Gutierrez' class='vcard'>
	<a class='url fn n' href='/blog'>
		<span class='given-name'>Juan</span>
		<span class='additional-name'>Pedro</span>
		<span class='family-name'>Gutierrez</span>
	</a>
	<div class='org'>Arsys Internet S.L.</div>
	<a class='email' href='mailto:webmaster@arsys.es'>webmaster@arsys.es</a>
	<div class='adr'>
		<div class='street-address'>Chile 54</div>
		<span class='locality'>Logroño</span>,
		<span class='region'>La Rioja</span>,
		<span class='postal-code'>26007</span>
		<span class='country-name'>España</span>
	</div>
	<div class='tel'>+34 902 11 55 30</div>
</div>

Además de a los contactos, a los vCard, podemos aplicar microformatos a otros muchos tipos de contenido: contactos (hCard), eventos (hCalendar), votaciones, (vote-links), críticas (hReview), curricula (hResume), etiquetas (rel-tag), licencias (rel-license), en un blog (hAtom), listados e índices de documentos (XOXO), redes sociales (XFN)…

Aunque su uso no está todavía demasiado extendido, es fácil ver las posibilidades que nos dan los microformatos. Un ejemplo práctico es el buscador sobre contenido con licencia Creative Commons desarrollado por Yahoo . Para indexar estos contenidos, identifica aquellos marcados con la etiqueta rel-license.

Gracias a los microformatos ya podemos construir una comunidad en la que podamos intercambiar datos de interés de forma automática y sencilla.

Alberto Blanch

Productos relacionados: