Nuevos elementos en HTML5

Hace ya un tiempo, redacté una entrada que tuvo bastante éxito sobre los elementos que desaparecerán en breve de HTML. Muy relacionada con ésta os traigo esta nueva entrega, que podría ser la cara inversa a la anterior: Nuevos elementos en HTML5. Comencemos.

<article>

En español artículo. Se usa para definir de forma independiente, contenido autónomo. Puede ser contenido especificado de forma independiente del resto del sitio. Puede representar una tema de un foro, un artículo de un periódico o una entrada de un blog entre otros.

<aside>

Esta etiqueta se usa para identificar contenido aparte del contenido en el que se enmarca, pero con el que está relacionado. Veamos un ejemplo:

<p>Hemos visitado el Zoo de Córdoba esta tarde.</p>
  <aside>
  <h4>Zoo de Córdoba</h4>Se trata de un parque zoólogico...
</aside>

<audio>

Esta etiqueta nos permite introducir audio en nuestro sitio. Usamos la etiqueta <source> para definir posteriormente la ruta y el tipo de éste:

<audio controls="controls">
  <source src="fichero.ogg"  type="audio/ogg" />
  <source src="fichero.mp3"  type="audio/mp3" />
</audio>

<bdi>

Esta etiqueta nos permite aislar una parte del texto, de forma que éste pueda ser formateado en una dirección diferente al resto del texto del documento. Es útil cuando introducimos texto como un nombre de usuario, por ejemplo, dentro de otro que puede variar su sentido de lectura (por ejemplo árabe o los idiomas orientales).

Su nombre de usuario es:  <bdi> carazo</bdi>

Imaginad que el texto estuviera en japonés y se leyera de derecha izquierda, el nombre de usuario debería quedar inalterado, por lo que deberíamos usar <bdi>.

<canvas>

Es una de las etiquetas más famosas de HTML5. Se trata de un contenedor donde se permite el dibujo. Éste, suele hacer con JavaScript.

<canvas id="dmCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('dmCanvas');
var dm=canvas.getContext('2d');
dm.fillStyle='#FF0000';
dm.fillRect(0,0,80,100);
</script>

<command>

Define un comando (puede ser un botón, un botón de selección mútiple, checkbox, o de selección simple, radiobutton) que el usuario puede invocar. Un comando puede ser parte de un menú contextual, una barra de herramientas, o formar parte de un menú usado el elemento <menu>, o puede ponerse en cualquier parte de la página para definir un  atajo de teclado.

<menu>
<command type="command" label="Guardar"  onclick="guardar()">Guardar</command>
</menu>

<datalist>

Especifica una lista de opciones predefinidas para un elemento <input>. Se usa para proporcionar la característica de autocompletado a los elementos de este tipo. Los usuarios verán una lista, que se va rellenando de forma automática conforme ellos escriben sugiriéndole diferentes opciones. Un ejemplo de uso sería el siguiente:

<input list="browsers"/>
<datalist id="browsers">
<option value="Internet  Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

<embed>

La idea de esta etiqueta es normalizar las inclusiones de contenidos de aplicaciones externas vía plugins en nuestro sitio, para integrar un fichero SWF de Flash se haría como se indica a continuación:

<embed src="flash.swf"/>

<footer>

Define el pie de página de un documento. Se puede tener más de un pie de página.

<footer>Linux Hispano - Software libre</footer>

<header>

En el sitio contrario, esta etiqueta define la cabecera.

<header>
<h1>Bievenidos al sitio</h1>
<p>Somos un grupo de...</p>
</header> 
<p>Resto del sitio...</p>

<meter>

Define una medida escalar, dentro de un rango conocido. No confundir con la etiqueta <progress> que ahora comentaremos.

<meter value="2" min="0"  max="10">2 de 10</meter><br/>
<meter value="0.6">60%</meter>

<nav>

Define un bloque donde se enmarcan diferentes enlaces de navegación.

<nav>
  <a href="/inicio/">Inicio</a>  |
  <a href="/acerca/">Acerca de</a> |
  <a href="/contacta/">Contacta</a> |
</nav>

<progress>

Representa el grado de progreso de una tarea:

<progress value="22"  max="100"></progress>

<video>

Casi todos los navegadores la soportan ya. Es una etiqueta equivalente a <audio> pero en este caso sirve para emitir vídeo.

<video width="320"  height="240" controls="controls">
  <source src="fichero.mp4"  type="video/mp4" />
  <source src="fichero.ogg"  type="video/ogg" />
</video>

Este artículo está basado en el original en inglés New Elements of HTML 5 and Not Supported Early Elements de Designing Mall.