Time, Meter y Progress

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.