ANEXO HTML5
Nuevas etiquetas de HTML5 y
etiquetas que desaparecen ©
ADRINFOR S.L.
Índice
Nuevas etiquetas de HTML5 y etiquetas que desaparecen 3
Un vistazo a la recomendación de W3C 3
Etiquetas que desaparecen 3
Nuevas etiquetas que aparecen 5
Explicación y ejemplos de las nuevas etiquetas 7
Ejercicios 22
Ejercicio: Crear una encuesta con las nuevas etiquetas de HTML5 22
Pasos a seguir 22
Solución del Ejercicio 23
2/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Nuevas etiquetas de HTML5 y etiquetas que
desaparecen
Un vistazo a la recomendación de W3C
Como todos sabemos, HTML5 es un estándar que está todavía en proceso. Para mirar el estado del
mismo y consultar las novedades que van apareciendo podemos acceder al apartado en el que W3C tiene
la recomendación. Aunque no sea un listado estandarizado, podemos consultar el borrador de etiquetas
de HTML5, y el de atributos. El último estándar de HTML que está completo es el HTML 4.01, y por
tanto el último que tiene un listado de etiquetas y atributos totalmente estandarizado. Para consultar ese
listado de etiquetas podemos hacerlo desde aquí, y el de atributos desde aquí. Por lo tanto, partiendo del
listado de etiquetas de ese último estándar, vamos a ir viendo que etiquetas desaparecen en HTML5 y
que otras nuevas aparecen.
Cuando aparece una nueva versión de un estándar, el objetivo no es acabar con todo lo que contiene el
anterior, y dejar en desuso todas las aplicaciones que estaban basadas en el anterior, sino que se intenta
mejorar y completar las versiones anteriores pero siendo compatibles entre sí. Por eso, cuando hablamos
de que hay etiquetas que desaparecen, no quiere decir que dejan de funcionar de inmediato, sino que se
desaconseja su uso a partir de esta última actualización. No tendría sentido, que aplicaciones antiguas
dejasen de funcionar de repente.
¡IMPORTANTE!
Debemos tener en cuenta que HTML5 esta todavía en proceso y que no esta
estandarizado por completo.
Etiquetas que desaparecen
Por tanto, partiendo del estándar HTML 4.01 las etiquetas que desaparecen en HTML5, o mejor dicho,
que se desaconseja su uso a partir de HTML5, son las siguientes:
3/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Etiqueta HTML Definición
<acronym> Etiqueta que define un acrónimo, palabras clave que dan
información a los navegadores o motores de búsqueda. (Utilizar
<abbr>)
<applet> Etiqueta que sirve para incrustar un applet en nuestra página.
(Utilizar <object>)
<basefont> Etiqueta que establece el valor predeterminado del formato de la
fuente de todo el texto del documento. (Utilizar CSS)
<big> Etiqueta que hace destacar el texto haciéndolo más grande
respecto del que tiene al lado. (Utilizar CSS)
<center> Etiqueta que alinea el texto o contenido en el centro de la página.
(Utilizar CSS)
<dir> Etiqueta que define una lista de directorios. (Utilizar <ul>)
<font> Etiqueta que establece el formato de la fuente de algún elemento
en concreto. (Utilizar CSS)
<frame> Etiqueta que define marcos o páginas más pequeñas dentro de
nuestra página.
<frameset> Etiqueta que define el conjunto de marcos o páginas más pequeñas
dentro de nuestra página.
<isindex> Etiqueta que crea un control de entrada de texto. (Utilizar <input>)
<noframes> Etiqueta que contiene el contenido a mostrar en caso de que el
navegador no soporte Frames.
<strike> Etiqueta que muestra el texto tachado. (Utilizar <del>) (Utilizar
CSS)
<tt> Etiqueta que establece texto de teletipo. (Utilizar CSS)
Como vemos, muchas de las etiquetas que desaparecen, están relacionadas con el formato de la página.
En HTML5, y podríamos decir que desde anteriores versiones también, se tiende a centralizar todo lo
referente al formato de página en CSS, mediante el cual estructuraremos y daremos formato a todos y
cada uno de los elementos de nuestra página.
Respecto a los Frames, hace tiempo ya que se viene desaconsejando su uso por las dificultades que
presentan a la hora de gestionar el contenido Web. La estructuración de la página se hace con elementos
transparentes como son los DIVs y el posicionamiento lo gestiona CSS. Como veremos en el siguiente
tema, HTML5 presenta nuevas etiquetas que facilitan este trabajo.
Atención :
Con esto, no queremos decir que todas estas etiquetas vayan a dejar de funcionar de
manera inmediata, sino que lo irán haciendo de manera gradual. De momento, se
desaconseja su uso.
4/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Nuevas etiquetas que aparecen
Por otro lado, y ahora también partiendo del estándar HTML 4.01, hay muchas etiquetas que aparecen
nuevas a partir de HTML5. Vamos a clasificarlas en diferentes grupos, y vamos a ir viendo cómo se
trabaja con ellas poco a poco.
Las siguientes etiquetas se utilizan para la estructuración de la página Web , las veremos más a
fondo en el siguiente tema.
Etiqueta HTML Definición
<header> Etiqueta que define un encabezado de un documento o
sección.
<nav> Etiqueta que define una sección de vínculos de navegación.
<section> Etiqueta que define una sección de un documento.
<article> Etiqueta que define un artículo.
<aside> Etiqueta que define contenido aparte del contenido de la
página.
<footer> Etiqueta que define un pie de página de un documento o
sección.
Las siguientes etiquetas se utilizan en los formularios, las veremos más a fondo en los
siguientes temas.
Etiqueta HTML Definición
<datalist> Etiqueta que especifica una lista de opciones predefinidas
para los controles de entrada.
<keygen> Etiqueta que define un campo generador de par de claves.
<output> Etiqueta que define el resultado de un cálculo.
Las siguientes etiquetas se utilizan para agregar elementos multimedia de vídeo y audio en
nuestra Web, las veremos más a fondo en los siguientes temas.
Etiqueta HTML Definición
<video> Etiqueta que define un vídeo o una película.
<audio> Etiqueta que define el contenido de sonido.
<track> Etiqueta que define las pistas de texto para <video> y
<audio>.
<source> Etiqueta que define los recursos de medios múltiples para
<video> y <audio>.
5/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
La siguiente etiqueta es la de canvas que la veremos más a fondo en el tema que le corresponde.
Etiqueta HTML Definición
<canvas> Etiqueta que define un lienzo para dibujar los gráficos, sobre
la marcha, a través de secuencias de comandos
(normalmente JavaScript).
Las siguientes etiquetas vamos a ir viéndolas a continuación.
Etiqueta HTML Definición
<bdi> Etiqueta que aísla una parte del texto que pueda ser
formateada desde fuera. (Bi-Direccional Isolation)
<command> Etiqueta que define un botón de comando que un usuario
puede invocar.
<details> Etiqueta que define los detalles adicionales que el usuario
pueda ver u ocultar.
<embed> Etiqueta que define un contenedor para una aplicación
externa o de contenido interactivo (un plug-in).
<figcaption> Etiqueta que define un título para un elemento <figure>.
<figure> Etiqueta que especifica contenido autónomo, como
ilustraciones, diagramas, fotos, listas de códigos...
<hgroup> Etiqueta que agrupa un conjunto de elementos <h1> a <h6>
cuando un título tiene varios niveles.
<mark> Etiqueta que define el texto marcado o resaltado.
<meter> Etiqueta que define una medida escalar de forma gráfica.
<progress> Etiqueta que representa un progreso de forma gráfica.
<rp> Etiqueta que define lo que se muestra en los navegadores
que no son compatibles con anotaciones de rubí.
<rt> Etiqueta que define una explicación o pronunciación de los
caracteres rubí (para la tipografía del Este de Asia).
<ruby> Etiqueta que define una anotación de rubí (para la tipografía
del Este de Asia).
<summary> Etiqueta que define un título visible para un elemento
<details>.
<time> Etiqueta que define una fecha u hora.
<wbr> Etiqueta que define una posible ruptura de una palabra larga.
6/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Atención :
La mayoría de estas nuevas etiquetas están ya en funcionamiento en los principales
navegadores, pero algunas de ellas solo están disponibles para alguno de ellos como
iremos viendo.
Explicación y ejemplos de las nuevas etiquetas
Atención :
Como veremos en todos los ejemplos y ejercicios del curso, la etiqueta DOCTYPE para
HTML5 es la siguiente: <!DOCTYPE html>
Etiqueta bdi
Esta etiqueta, como su propio nombre indica (Bi-Direccional Isolation) aísla una parte del texto que
puede tener una orientación diferente a la del resto del documento, por ejemplo, contenido en otro
idioma que se escriba de derecha a izquierda. Este elemento es útil al integrar contenido generado por
usuarios con una direccionalidad desconocida.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
¡IMPORTANTE!
Esta etiqueta esta en funcionamiento en los siguientes navegadores:
Ejemplo
Si utilizamos el siguiente código:
7/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
El resultado en el navegador sería el siguiente:
Vemos como hemos puesto las etiquetas bdi justo donde introducimos el nombre de usuario.
Normalmente, este nombre lo escribirá el usuario y no sabremos a ciencia cierta qué direccionalidad
tiene. Por tanto, colocamos estas etiquetas, para que aísle cualquier contenido de direccionalidad
desconocida.
En la versión anterior...
Hasta que esta etiqueta se agregó a HTML5, este trabajo se hacia desde CSS.
Etiqueta command
Esta etiqueta define un botón de comando que el usuario puede invocar. Puede aparecer como un
botón, casilla de verificación o botón de radio. Es decir, es un elemento al cual le podemos asignar
una función que se ejecutará cuando ocurra el evento que la invoca. Esta etiqueta no está en
funcionamiento todavía, únicamente funciona en Internet Explorer 9 y no con todas sus opciones.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
type: Define el tipo de comando 'command', 'radio' o 'checkbox'.
checked: Solo para los tipos 'radio' y 'checkbox', indica que el elemento estará seleccionado.
disabled: Para indicar que el comando esta desactivado.
icon: Para indicar que imagen representara al comando.
label: Especifica el nombre del comando que verá el usuario.
radiogroup: Nombre del grupo de comandos que se activará cuando este se active. Solo
cuando el tipo es 'radio'.
8/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
¡IMPORTANTE!
Esta etiqueta esta en funcionamiento en los siguientes navegadores:
Ejemplo con la etiqueta command
Etiqueta summary
Esta etiqueta define el encabezado visible de la etiqueta <details>.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Etiqueta details
Es un elemento interactivo que se abre para mostrar más detalles cuando el usuario lo solicite.
Aparece una flecha para mostrar u ocultar el contenido de esta etiqueta.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
open: Especifica si los datos deben estar visibles para el usuario. Si no se lo especificamos,
por defecto aparecerán ocultos.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Ejemplo
Si utilizamos el siguiente código:
9/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
El resultado en el navegador sería el siguiente:
Vemos cómo hemos creado dos elementos details, el primero con el atributo open y el segundo sin él.
En el primer caso, vemos como la flecha aparece hacia abajo, y el contenido del elemento visible. En
el segundo caso, la flecha aparece hacia la derecha, y el contenido oculto. Si hacemos clic sobre las
flechas, se oculta o se muestra el contenido según cuál sea su estado. En ambos casos, el elemento
summary aparece visible al lado de las flechas, en forma de encabezado de dichos detalles.
Etiqueta embed
Este elemento permite incorporar un elemento creado con otras aplicaciones, por lo general los plug-
ins. Por ejemplo vídeo, audio, algún elemento flash o cualquier otro tipo de elemento.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
height: Especifica la altura del elemento que vamos a embeber.
src: Especifica la dirección del elemento que queremos embeber.
type: Especifica el tipo MIME del elemento que vamos a embeber.
width: Especifica la anchura del elemento que vamos a embeber.
10/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
¡IMPORTANTE!
Esta etiqueta esta en funcionamiento en los siguientes navegadores:
Ejemplo
Si utilizamos el siguiente código:
El resultado en el navegador sería el siguiente:
Vemos cómo hemos insertado dos elementos mediante la etiqueta embed, un elemento de flash y un
segundo elemento de video.
11/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Etiqueta figcaption
Este elemento contiene una leyenda de la figura de un elemento <figure>.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Etiqueta figure
Esta etiqueta representa cualquier contenido autónomo como ilustraciones, diagramas, fotos, listas de
códigos... opcionalmente con una leyenda utilizando la etiqueta <figcaption>. Todo lo que contiene el
elemento <figure> es un único elemento. De esta manera, se nos facilita mucho el trabajo de poner un
comentario o cualquier otro contenido a pie de foto, trabajo que hasta ahora no resultaba nada
cómodo.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Ejemplo
Si utilizamos el siguiente código:
12/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
El resultado en el navegador sería el siguiente:
Vemos cómo hemos insertado un elemento figure que contiene una imagen. Mediante el elemento
figcaption, podemos incluir cualquier contenido a forma de leyenda, en este caso hemos introducido
una lista. Todo ello forma un único elemento.
Etiqueta hgroup
Este elemento se utiliza para agrupar un conjunto de elementos <H1>-<H6> cuando el título tiene
varios niveles tales como subtítulos, títulos alternativos, o frases.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
13/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Ejemplo
Si utilizamos el siguiente código:
El resultado en el navegador sería el siguiente:
14/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Vemos como hemos agrupado las etiquetas h1, h2 y h3 en tres grupos diferentes mediante la etiqueta
hgroup. De esta manera, podemos asignar formatos diferentes para cada grupo sin que afecte a los
demás. En este caso, aparece tres veces la etiqueta h1, pero al estar en grupos diferentes el formato es
diferente. El formato se lo hemos aplicado mediante la etiqueta style.
Etiqueta mark
Este elemento sirve para marcar o resaltar contenido de un documento con el fin de referenciarlo
debido a su importancia en otro contexto.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Ejemplo
Si utilizamos el siguiente código:
15/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
El resultado en el navegador sería el siguiente:
Vemos como el texto que esta limitado por la etiqueta mark, está resaltado.
Etiqueta meter
Este elemento define una medición escalar dentro de una gama conocida, o un valor fraccionario de
manera gráfica. No debe ser utilizada para indicar el progreso (como en una barra de progreso) ya que
para ello se utiliza la etiqueta <progress>.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
form: Identificador del formulario al que pertenece el elemento.
high: Especifica el intervalo que se considera que es un valor alto.
low: Especifica el intervalo que se considera que es un valor bajo.
max: Especifica el valor máximo de la medida.
min: Especifica el valor mínimo de la medida.
optimum: Especifica cuál es el valor óptimo para el indicador.
value: Especifica el valor por defecto para el indicador.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
16/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Ejemplo
Si utilizamos el siguiente código:
El resultado en el navegador sería el siguiente:
Vemos como tenemos tres elementos meter, el primero, en color verde, con un valor intermedio, el
segundo y el tercero, de color amarillo, con valores que son considerados límite, y que vienen
marcados por los atributos low y high. Es decir, siendo el máximo valor 60, hemos marcado los
límites en 10 por abajo y 50 por arriba, por lo tanto, cualquier valor inferior a 10 o superior a 50
aparecerá en amarillo.
Etiqueta progress
Este elemento muestra una barra de progreso.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
form: Identificador del formulario al que pertenece el elemento.
max: Especifica el máximo de la barra de progreso.
value: Especifica el valor en el que se encuentra el progreso.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
17/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Ejemplo
Si utilizamos el siguiente código:
El resultado en el navegador sería el siguiente:
Vemos como tenemos tres elementos progress, es decir, tres barras de progreso. Lo único que cambia
entre ellas es, el valor máximo, marcado por el atributo max, y el estado del proceso, marcado por el
atributo value. En el siguiente vídeo vamos a ver un ejemplo más completo con esta etiqueta.
Ejemplo con la etiqueta progress
Etiquetas ruby, rt y rp
Etiqueta ruby, rt y rp
La etiqueta <ruby> especifica una anotación de rubí (Las anotaciones rubí se utilizan para la
tipografía del Este de Asia).
Esta etiqueta <ruby>se utiliza junto con las etiquetas <rt> y <rp>: el elemento <rt> que da
información acerca de la pronunciación, y el elemento opcional <rp> que define lo que se mostrará en
los navegadores que no soportan las anotaciones de rubí.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
18/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Ejemplo
Si utilizamos el siguiente código:
El resultado en el navegador sería el siguiente:
Vemos como la ayuda fonética que viene dada por la etiqueta rt, aparece sobre el símbolo. El
contenido de la etiqueta rp solo será visible si el navegador no soporta anotaciones rubí, pero siempre
que la etiqueta este disponible en él.
Etiqueta time
Esta etiqueta define una fecha o una hora. Puede ser utilizada como una forma de codificar las fechas
y horas en una forma legible por máquina. Por ejemplo, mostramos las palabras 'San Fermín', pero
detrás de ese texto estará almacenada la fecha de dicho evento (7 de Julio), de esta forma los motores
de búsqueda pueden producir resultados más inteligentes de búsqueda.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
datetime: Contiene la fecha u hora que se especifica. De lo contrario, la fecha u hora está
dada por el contenido del elemento.
19/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
pubdate: Indica que la fecha u hora en el elemento <time> es la fecha de publicación del
documento.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Etiqueta wbr
Etiqueta wbr
Esta etiqueta marca el punto donde una palabra muy larga puede ser cortada por el navegador. De esta
manera evitamos que se hagan cortes de palabras en lugares que no deseamos.
Los atributos que podemos utilizar para esta etiqueta son:
Atributos globales.
¡IMPORTANTE!
Esta etiqueta está en funcionamiento en los siguientes navegadores:
Ejemplo con la etiqueta wbr
20/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Los atributos globales son comunes en todas las etiquetas que hemos visto, y son los
siguientes:
accesskey: Para crear un atajo de teclado y acceder al elemento con él.
class: Clase a la que pertenece el comando.
contenteditable: Para hacer que el contenido sea editable desde el propio
navegador.
contextmenu: Contiene el nombre del menú que será menú contextual del
elemento.
dir: Especifica la direccionalidad del elemento de texto.
draggable: Para permitir que el elemento sea arrastrable.
dropzone: Para convertir el elemento en zona donde se puede arrastrar otro
elemento.
hidden: Para convertir el elemento en oculto.
id: Definir el identificador para el elemento.
lang: Especifica el idioma principal del contenido del elemento.
spellcheck: Para permitir la corrección automática, se usa cuando el elemento
es editable o cuando se puede escribir en él.
style: Atributo para definir el estilo del elemento.
tabindex: Para controlar cuando se focaliza el elemento. El nombre viene de la
tecla tabulador. Muy común en los formularios.
title: Define el título del elemento.
translate: Para definir si se traduce o no el elemento cuando se traduce la
página desde el navegador.
Muchos de estos atributos irán apareciendo a lo largo del curso y los veremos más a
fondo, pero si queremos más información sobre ellos, podemos encontrarla aquí.
21/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Ejercicios
Ejercicio: Crear una encuesta con las nuevas etiquetas
de HTML5
40
Vamos a crear una página donde podamos votar la respuesta a una pregunta y ver los resultados de la
misma, así como el estado del proceso de la votación. Lo que tenemos que conseguir es más o menos lo
que aparece en la siguiente imagen:
Pasos a seguir
1. El progreso de la votación lo marca una barra de progreso, y el máximo de votos es 100.
2. Al hacer clic en la flecha se despliegan los detalles que vemos en la imagen.
3. Para realizar el voto, cada respuesta tiene un botón definido para ello.
22/23
Nuevas etiquetas de HTML5 y etiquetas que desaparecen
4. Los resultados se muestran gráficamente al final, como vemos en la imagen.
5. Cada vez que se vote, deberemos hacer todas las actualizaciones necesarias. Creando para ello
una función de JavaScript.
6. Si ya se han realizado 100 votos, la página mostrará una alerta y no hará ninguna actualización.
Solución del Ejercicio
Crear una encuesta con las nuevas etiquetas de HTML5
23/23