Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

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:

<audio>

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

<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).

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.

<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.

<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:

<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:

<footer>

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

<header>

En el sitio contrario, esta etiqueta define la cabecera.

<meter>

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

<nav>

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

<progress>

Representa el grado de progreso de una tarea:

<video>

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

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

Leer entrada anterior
Descarga

Cerrar