Nuevas etiquetas en HTML 5
La versión HTML5 supone una modificación profunda de la versión anterior (HTML 4). Según parece es la última versión del lenguaje, es decir no habrá un HTML6, HTML7 etc. El lenguaje pasa a llamarse HTML. Y supone un cambio en profundidad.
Hasta ahora las etiquetas servían para describir como se coloca o muestra un contenido (<div>, <b>, <strong>) o cual es su función (<a href>, <form>). La versión actual extiende la interpretación de las etiquetas, ahora todas tienen un significado semántico, es decir, indican el papel que juegan en la página.
Por Ejemplo: un texto entre las etiquetas <strong> </strong> no solo se ve en negrita para destacarlo visualmente, sino que también indica que se trata de un texto importante en el contenido.
O un elemento <nav> significa que su contenido se debe interpretar como un menú de navegación o una serie de enlaces.
Recuerda que todas las actualizaciones de este lenguaje se pueden seguir en WHATWG
Tabla resumen de etiquetas
Etiquetas | Descripción |
---|---|
<article> | Representa una parte independiente del contenido de un documento, como una entrada de blog o un artículo de periódico. |
<aside > | Representa una pieza de contenido que solo está ligeramente relacionada con el resto de la página. |
<audio> | Define un archivo de audio. |
<canvas> | Esto se utiliza para representar gráficos de mapa de bits dinámicos sobre la marcha, como gráficos o juegos. |
<command> | Representa un comando que el usuario puede invocar. |
<datalist> | Junto con el nuevo atributo de lista para la entrada, se puede usar para hacer cuadros combinados |
<details> | Representa información adicional o controles que el usuario puede obtener a pedido |
<dialog> | Elemento para facilitar la interactividad con el ususario. Amplía las funcionalidades de <alert> |
<embed> | Define contenido interactivo externo o complemento. |
<figure> | Representa una pieza de contenido de flujo independiente, normalmente referenciada como una sola unidad del flujo principal del documento. |
<footer> | Representa un pie de página para una sección y puede contener información sobre el autor, información de derechos de autor, etcétera. |
<header> | Representa un grupo de ayudas introductorias o de navegación. |
<hgroup> | Representa el encabezado de una sección. |
<keygen> | Representa el control para la generación de pares de claves. |
<mark> | Representa una secuencia de texto en un documento marcada o resaltada con fines de referencia, debido a su relevancia en otro contexto. |
<meter> | Representa una medida, como el uso del disco. |
<nav> | Representa una sección del documento destinada a la navegación. |
<output> | Representa algún tipo de resultado, como un cálculo realizado a través de secuencias de comandos. |
<progress> | Representa la finalización de una tarea, como la descarga o la realización de una serie de operaciones costosas. |
<ruby> | Junto con <rt> y <rp> permiten marcar anotaciones Ruby. |
<section> | Representa un documento genérico o una sección de aplicación |
<time> | Representa una fecha y/u hora. |
<video> | Define un archivo de vídeo. |
<wbr> | Representa una salto de línea opcional. |
Formularios | Descripción |
---|---|
datalist | Lista de opciones para entrada en inputs |
keygen | Generación de claves y envios de claves públicas |
output | Mostrar un resultado, utilizado por scripts |
Campos Input | Descripción |
---|---|
color | Selector de color, que podría estar representado por una rueda o un selector de muestras |
date | Selector de fecha del calendario |
datetime-local | Visualización de fecha y hora, sin configuración ni indicación de zonas horarias |
datetime | Visualización completa de fecha y hora, incluida una zona horaria. |
El tipo de entrada debe ser un correo electrónico. | |
month | Selector de un mes dentro de un año dado |
number | Un campo que contiene solo un valor numérico |
range | Selector numérico dentro de un rango de valores, normalmente visualizado como un control deslizante |
search | Término a suministrar a un motor de búsqueda. Por ejemplo, la barra de búsqueda en la parte superior de un navegador. |
tel | El tipo de entrada debe ser número de teléfono. |
time | Indicador y selector de hora, sin información de zona horaria |
url | El tipo de entrada debe ser tipo URL. |
week | Selector de una semana dentro de un año dado |