Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

HTML5: Otras etiquetas nuevas

31 Oct 2012 por Luis

Comentarios: 5

HTML5

Como continuación a los artículos de introducción a HTML5 y HTML5: nuevas etiquetas semánticas y estructurales, vamos a revisar el resto de nuevas etiquetas que nos trae esta revisión del lenguaje.

La mayoría de las nuevas etiquetas añaden valor semántico al documento, pero algunas añaden funcionalidades que hasta ahora sólo se podían obtener usando Javascript o Flash.

audio, video y source

Las etiquetas audio y video sirven para reproducir ficheros de audio y vídeo respectivamente, algo que hasta ahora sólo podía hacerse con plugins en el navegador (Flash, Silverlight, ...).

Dentro de estas etiquetas se puede introducir código HTML para que lo muestren los navegadores que no las soportan:

<video src="video.mp4">
	<p>Descarga <a href="video.mp4">el vídeo</a></p>
</video>

La etiqueta source sirve para poder poner formatos de archivo alternativos y así cubrir las especificaciones de los distintos navegadores (los formatos de audio y vídeo que soportan).

Para usar esta etiqueta, no debe ponerse el atributo src y debe ser lo primero que aparezca en su interior.

<video>
	<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40">
	<source src="video.ogv" type="video/ogg; codecs=dirac, vorbis">
	<p>Descarga <a href="video.mp4">el vídeo</a></p>
</video>

El control de audio y vídeo se realiza a través de atributos de la propia etiqueta (controls, autoplay, ...) y de la API de multimedia.

canvas

La etiqueta canvas se usa para crear una zona de la página en la que se pueden generar imágenes de forma dinámica a través de la API de dibujo en canvas.

datalist

La etiqueta datalist se usa para asociar a un input una lista de opciones predefinidas (como una lista de autocompletar).

Se asignaría de esta forma:

<input list="mi-smartphone">
<datalist id="mi-smartphone">
	<option value="iPhone">
	<option value="iPad">
	<option value="Android">
</datalist>

details y summary

La etiqueta details se utiliza para especificar detalles adicionales a un texto (el cual estará dentro de la etiqueta summary) que el usuario podrá ver u ocultar al hacer click en el mismo.

<details>
	<summary>Texto en el que pulsar</summary>
	<p>Este texto se muestra/oculta al pulsar en el texto anterior</p>
</details>

embed

La etiqueta embed se usa para integrar contenido externo (normalmente no HTML) al contenido. Esta etiqueta no era estándar en HTML4, pero era soportada por la mayoría de los navegadores.

figure y figcaption

La etiqueta figure nos permite marcar ilustraciones, diagramas, fotos, ejemplos de código, ... a los que se hace referencia directa en el contenido de la página web. El trozo de contenido así marcado debe ser independiente, es decir, debería poder moverse a otro sitio (por ejemplo a un apéndice) y aún así mantener su significado.

La etiqueta figcaption se usa para poner un título a este trozo de contenido.

La diferencia entre usar figure y usar aside estriba en que figure debe ser parte independiente del contenido de la página, mientras que aside está relacionado con éste, pero no es parte del mismo.

Veamos un ejemplo en el que usaremos figure y figcaption para marcar varias imágenes:

<figure>
	<img src="iphone3.jpg" alt="iPhone 3">
	<img src="iphone4.jpg" alt="iPhone 4">
	<img src="iphone5.jpg" alt="iPhone 5">
	<figcaption>Distintas versiones del iPhone. De izquierda a derecha: iPhone 3, iPhone 4 y iPhone 5</figcaption>
</figure>

keygen

La etiqueta keygen se usa en formularios y genera una clave privada, que guarda en el navegador de forma local, y una clave pública que envía al servidor. Este mecanismo está diseñado para utilizarse con sistemas de gestión de certificados basados en la web.

Internet Explorer no soporta esta etiqueta y Microsoft ha manifestado que no tiene pensado añadirla.

mark

La etiqueta mark se usa para marcar partes del contenido de manera que pueda resaltarse y diferenciarse del resto. Esta etiqueta se diferencia de strong y em en que no añade importancia ni énfasis a su contenido, simplemente lo marca para resaltarlo. En la mayoría de los casos estas palabras no estarían resaltadas originalmente en el contenido, sino que se resaltarían por una acción del usuario (por ejemplo, marcar en los resultados las palabras que coinciden con la búsqueda).

menu y command

La etiqueta menu representa una lista de comandos que se pueden ejecutar. El menú puede ser una barra de tareas, un menú contextual (el que sale por ejemplo al pulsar el botón derecho del ratón) o una simple lista.

Para marcar estos comandos puede usarse la etiqueta command. Esta etiqueta se usa para marcar acciones que el usuario puede realizar. Su utilidad estriba en que podemos usarla en múltiples partes de la página web (enlaces, botones, menús, ... a través del atributo command) y, desactivando el comando, se desactivará en todas sus apariciones.

Para que command se pueda activar debe estar dentro de una etiqueta menu. Fuera de esa etiqueta sólo será una marca que podrá utilizarse como atajo de teclado.

Ejemplo:

<menu type="toolbar">
	<command id="align-left" label="Izquierda" onclick="setAlign('left')">
	<command id="align-center" label="Centrado" onclick="setAlign('center')">
	<command id="align-right" label="Derecha" onclick="setAlign('right')">
</menu>
...
<input type="button" command="align-left" value="Alinear a la izquierda">

meter

La etiqueta meter se usa para marcar medidas, siempre que estas sean parte de una escala con valores mínimos y máximos. No se debe usar para marcar valores no acotados (que no tienen mínimo y/o máximo). Puede usarse para marcar cosas como: espacio en disco usado, porcentaje de votos, ...

Los navegadores representan esta etiqueta como una barra horizontal que se rellena según el valor dado.

output

La etiqueta output se usa para marcar el resultado de un cálculo o de una acción del usuario.

El ejemplo clásico es el de una calculadora de sumas:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
	<input name="a" type="number" step="any"> +
	<input name="b" type="number" step="any"> =
	<output name="o"></output>
</form>

progress

La etiqueta progress se usa para añadir una barra de progreso de una tarea. Para hacer que la barra cambie de forma dinámica ("progrese") deberemos usar Javascript.

ruby, rp y rt

La etiqueta ruby sirve para marcar anotaciones ruby en lenguajes ideogramáticos (como el chino o el japonés) que sirven como guía para la pronunciación.

El texto que va a ser objeto de anotación va dentro de la etiqueta ruby, acompañado de las anotaciones marcadas con la etiqueta rt. También se puede añadir la etiqueta rp para marcar los paréntesis alrededor de la anotación (para los navegadores que no soportan estas etiquetas; los que la soportan no muestran el contenido de rp).

Ejemplo:

<ruby>草泥馬<rp>(</rp><rt>Cǎo Ní Mǎ</rt><rp>)</rp></ruby>

time

La etiqueta time se usa para marcar fechas y horas en un formato que entiendan los ordenadores. Dicha fecha puede ser el contenido de la etiqueta o puede ir en el atributo datetime con lo cual el contenido puede ser cualquier cosa.

<time>2012-10-31</time>
<time datetime="2012-10-31">Miércoles, 31 de Octubre del 2012</time>

wbr

La etiqueta wbr representa un lugar en el que se puede hacer salto de línea dentro de una palabra. Sirve para que el navegador pueda "partir" palabras muy largas si es necesario.

Comentarios

5 comentarios. Comentar.

1. Anónimo el 28 Dic 2012 a las 06:23:45

muy buena

2. Anónimo el 03 Sep 2013 a las 19:11:02

exelente.

3. Luis Gamez el 16 Nov 2013 a las 13:31:02

Muy bueno, pero veo un "inconveniente" al poner un video en html5 y es que dándole al bontón derecho te deja la opción de descargar dicho video. ¿Se podría Luis evitar esto?.

Gracias y muy buena contribución.

4. Luis el 18 Nov 2013 a las 11:09:20

Hola Luis Gamez.

Gracias por participar en el blog.

Utilizar otras técnicas (Flash, ...) hace más difícil descargar el vídeo, pero no imposible. Estoy seguro de que sabrías descargarte cualquier video de Youtube.

De todas formas, si estás interesado en cómo complicarle al usuario la descarga del video, puedes ver alternativas en este enlace (en inglés en Stack Overflow): http://stackoverflow.com/a/9756909

Un saludo.

5. daniel el 03 Ago 2015 a las 23:25:54

no funciona la etiqueta TIME

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?