Introducción a la web semántica en HTML5

Como ya sabéis, en HTML tenemos una gama bastante limitada de elementos para construir la estructura de nuestros sitios web. Tenemos elementos para construir listas, párrafos, abreviaciones, enlaces, tablas, divisiones… Pero no tenemos nada para construir noticias, historias o recetas por ejemplo.

Otros lenguajes de marcas como XML nos ofrecen la posibilidad de crear todos los elementos que necesitemos. Así que si necesitamos un elemento receta solo tenemos que crearlo. El único problema es que también tendremos que crear un parseador que sepa lo que el elemento receta significa. En HTML tenemos una serie de elementos limitados a nuestra disposición. Esos elementos, están implementados en los navegadores que saben interpretarlos. Si pudiésemos crear nuestros propios elementos, sería un absoluto caos.

HTML provee de un mecanismo que facilita a los diseñadores web el añadir más nivel de semántica a través del atributo class que nos permite etiquetar instancias específicas de un elemento como un tipo o clase especial de ese elemento. Los navegadores no entienden lo que añadimos en el atributo class así que no afecta lo más mínimo en el renderizado de la página. Efectivamente, las clases no solo sirven para el CSS y para el JavaScript, si las clases siguen una convención adecuada en sus nombres, pueden ser usadas para más cosas

Microformatos

Los microformatos son un paquete de convenciones acordadas por la comunidad. Estos microformatos utilizan el atributo class de HTML para tapar algunos de sus agujeros más evidentes:

• hCard para detalles de contactos

• hCalendar para eventos

• hAtom para noticias y similares

• ...

Como existe un consenso en la comunidad sobre que nombre de clases usar, ahora existen parseadores y extensiones para los navegadores que son capaces de trabajar con esos patrones específicos. Si quieres saber más acerca de ellos puedes echarle un ojo a su wiki.

Los microformatos no pretenden solucionar cada posible caso de uso. Están diseñados con la filosofía de cubrir el ochenta por ciento de los casos usando el viente por ciento del esfuerzo ( a esto se le conoce como la fórmula 80/20 ) . Algunos desarrolladores opinan que HTML necesita ser infinitamente extensible por lo que la fórmula 80/20 no es suficiente porque se debe proveer de una solución en todos los casos y no en la mayoría.

Existen tecnologías como RDFa que es un conjunto de extensiones propuestas por la W3C para introducir mayor semántica en los documentos HTML y que utiliza namespaces que hacen posible la introducción de infinidad de formatos:

<p property="talformato:descripcion">....</p>

El asunto de usar namespaces ha iniciado un intenso debate en la comunidad puesto que alguna gente opina que el uso de namespaces traerá consigo una posible desestandarización y añade una capa de complejidad totalmente innecesaria pudiendo utilizar las clases para ello.

Mark

HTML5 introduce un conjunto nuevo de elementos inline solo que ya no se llaman elementos inline sino text-level semantics o semántica a nivel de texto en la lengua del imperio. Uno de ellos es la etiqueta mark.

Cuando realizamos una búsqueda en ciertos sitios, los elementos encontrados en la página aparecen remarcados para facilitar su localización. Eso se ha estado haciendo con etiquetas span con alguna suerte de clase que produce el efecto deseado, y es correcto, pero no es semántico. Podemos utilizar em o strong pero eso tampoco sería muy semántico porque no queremos añadir importancia ni énfasis a la palabra buscada, solo queremos remarcarla de alguna forma.

Es ahi donde entra en escena la nueva etiqueta mark:

<h1>Resultados de la búsqueda de la palabra 'poyaque'</h1>
<ol>
    <li>El señor de los <mark>poyaque</mark>s...</li>    
    <li>el cliente y su temido <mark>poyaque</mark></li>
</ol>

No le hemos dado ninguna relevancia a la palabra, tan solo la hemos marcado. Si estás usando un navegador que soporte HTML5 podrás verlo en funcionamiento en el siguiente ejemplo:

Time

Uno de los microformatos más populares es hCalendar porque soluciona un problema muy común; permitir a los usuarios añadir eventos a sus calendarios. El único problema con hCalendar es que sirve para describir fechas y horas de forma que pueda ser entendido por una máquina. Sin embargo, los humanos tenemos la fea costumbre de describir las fechas con cosas como 17 de Julio del 2011 o el próximo domingo pero los parseadores esperan recibir una fecha en formato ISO: YYYY-MM-DDThh:mm:ss por ejemplo.

La comunidad desarrolló algunas elegantes soluciones para esto como por ejemplo la de usar la etiqueta abbr:

<abbr class="dtstart" title="2011-07-17">
    17 de Enero del 2011
</abbr>

En HTML5 este problema lo solventamos con la nueva etiqueta time:

<time class="dtstart" datetime="2011-07-17">
    17 de Enero del 2011
</time>

El elemento time puede ser usado para fechas, horas o una combinación de ambas:

<time datetime="21:00">9pm</time>
<time datetime="2011-09-12">12 de Septiembre del 2011</time>
<time datetime="2011-09-12T13:30">12 de Septiembre del 2011 a las 1:30pm</time>

Meter

El elemento meter puede ser usado para marcar medidas definiendo que tales medidas son parte de una escala con unos valores máximos y mínimos. Existe también un atributo min así como high, low y optimum con los que se puede jugar. También puedes ocultar el valor actual:

<meter low="-10" high="100" min="12" max="50" optimum="26" value="25">
    Tú lo que quieres es que me coma el tigre es que me coma el tigre...
</meter>

Mira que bonico, y que semántico:
25 litros de cerveza llevo soplados oiga

Progress

Mientras que meter es bueno para describir algo que ya ha sido medido, el elemento progress nos permite marcar un valor que está en proceso de cambio:

Tu perfil está un <progress min="0" max="100" value="70"></progress> 70% completado, añade una foto desnudo/a.

Esto queda precioso:
Tu perfil está un 70% completado, añade una foto desnudo/a.

Obviamente se puede utilizar una API JavaScript para modificar los valores al vuelo:

<p>Progress: <progress id="p" max="100" value="0"></progress> <span>20</span>%</p>
<script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
</script>

Por el momento esto es todo por hoy sobre las novedades en cuanto a web semántica se refiere porque como pasaba con los Web Forms, no me cabe todo en un único post. En la segunda entrega hablaré sobre los nuevos elementos de estructuración del contenido.

En Genbeta Dev | Introducción a HTML5