Hay un revuelo bastante grande en estos días con respecto a la implementación del codec h.264 en la nueva versión del lenguaje básico de internet, debido a que se trata de un códec propietario y el uso de su licencia tiene un coste, cuando la W3C siempre se ha sabido elegir estándares abiertos y gratuitos, para mantener la igualidad y neutralidad en la red.

Y si bien se habla constantemente del flamante HTML5, poco o nada se dice de los cambios que conlleva, sin contar el hecho ya archiconocido por todos de que, justamente, permitirá la reproducción nativa de video. Acá van entonces algunos de los cambios más importantes.

Audio y Video

La reproducción de video -y audio, no hay que olvidar, se lleva a cabo mediante etiquetas como en los siguientes ejemplos:

<video id="video" width="640" height="480" volume=".7" controls autoplay>
  <source src="video.ogg" type="video/ogg"> </source>
</video>

y, en el caso del audio:

<audio>
  <source src="music.oga" type="audio/ogg">
</audio>

Nueva estructura

Tomando en cuenta la utilización que damos a algunos elementos div con identificadores muy comunes, los desarrolladores crearon una nueva estructura de elementos que cambiarán la manera de elaborar el contenido (sobre todo de blogs) y la manera en que los buscadores lo analizan.

Se trata de las etiquetas :

  • article : Una entrada independiente en un blog, sitio o revista.
  • footer : El final de la página, donde se incluyen los modos de contacto, etc.
  • header : No el elemento head, sino la cabecera de una determinada página.
  • nav : Una colección de vínculos a otros sitios o páginas.
  • section : Una sección determinada que incluye su propio encabezamiento.

Mark, Aside y Time

Mark se utilizará para indicar importancia a un determinado texto.

<p>La <mark>etiqueta mark</mark> es utilizada para llamar la atención.</p>

Quizás no hayan reinventado la rueda con esta etiqueta, pero con <aside> podremos definir un bloque semántico que representa una nota o explicación, relacionado con alguna otra parte del contenido.

Por otro lado, han creado una etiqueta 

<time datetime="2010-03-29">Marzo</time>.
<time>09:00</time>

Mejoras en <input type…>

Se han añadido varios nuevos tipos de ingreso de texto, pudiendo especificar si se trata de una url o un email, un entero, una fecha, etc. Algunos ejemplos:

<input type="email">
<input type="url">
<input list="title-list">
<datalist id="title-list">
  <option value="...">
</datalist>

Además, la validación de los datos ingresados también será más sencilla gracias a otras nuevas etiquetas (no comentadas en este artículo).

Cuadro de diálogo

Con la etiqueta <dialog> podemos incluir, valga la redundancia, cualquier tipo de diálogo.

<dialog>
 <dt> Usuario 1:
 <dd> Hola!
 <dt> Usuario 2:
 <dd> Hola! :)
</dialog>

Barra de progreso, canvas y puntuación

Gracias a la etiqueta <progress> podremos incluir el progreso de una tarea cualquiera que se esté ejecutando, mas trabajando en conjunto con JavaScript podremos incluir también una barra de progreso visual.

<progress>
  <span id="objprogress">76</span>%
</progress>

y con <meter> insertamos un valor fraccional de una medida escalar, que seguramente usaremos junto a JavaScript para incluir de manera muy simple el típico gráico de una a cinco estrellas.

Con <canvas>, implementado por primera vez por Apple para sus widgets, podremos dibujar gráficos dinámicos e interactivos.

Finalmente, la etiqueta <device> permitirá al cliente acceder a varios dispositivos, como puede ser una webcam, en tanto con <embed> podemos determinar contenido embebido, como por ejemplo un plug-in. Estos no son sólo más que algunos de los cambios más importantes que trae la quinta versión del lenguaje de marcado HTML, los que quieran continuar profundizando pueden visitar el sitio oficial del W3C.