Etiquetas nuevas en HTML5

Novedades en HTML de HTML5

Ya dentro del lenguaje HTML específicamente, las novedades que nos trae en su versión 5 son una serie de etiquetas útiles en la web actual, algo bien sencillo de aprender y de aplicar a los sitios web, así como el propio lenguaje de marcación es también sencillo de asimilar. Las podemos clasificar en dos partes:

Etiquetas que nos traen soporte a nuevas funcionalidades: es decir, aquellas que nos sirven para extender el HTML, dando soporte a asuntos como el vídeo o el sonido, lienzos donde diseñar dibujos, etc.

Etiquetas que componen la web semántica: algunas etiquetas que realmente no proponen nuevas funcionalidades, sino que sirven para componer sitios indicando qué son los bloques de código de una web, en lugar de cómo se deben representar.

Podríamos definir otras clasificaciones o incluso subgrupos en cada uno de los anteriores items, pero de momento está bien para aclarar cuáles son las novedades clave que trae HTML5.

Dentro de cada grupo tenemos multitud de nuevas etiquetas que comentaremos brevemente a continuación.

Existen numerosas novedades dentro del HTML5 que se han representado por etiquetas o elementos de diversa índole. Algunas etiquetas son realmente nuevas y otras como EMBED ya existían y se han incorporado al estándar.

Etiquetas para Multimedia: Algunos elementos nuevos servirán para integrar contenido multimedia, pues sabemos que cada día esos nuevos tipos de información están más presentes en la Web.

AUDIO: Para insertar sonido dentro de una web.

VIDEO: Para insertar clips de vídeo.

EMBED: Para embeber contenido externo de otro tipo, como el traído de diversos plugins que se comercializan actualmente o se comercializarán en el futuro.

SOURCE: Permite especificar varias fuentes diferentes cuando se insertan elementos en AUDIO y VIDEO.

TRACK: Permite especificar varias pistas de sonido o vídeo para los elementos AUDIO y VIDEO.

En el caso del HTML5 y los formularios tenemos que destacar que no solamente se han creado nuevas etiquetas, sino que se ha añadido soporte a las existentes anteriormente. De momento estas son las nuevas etiquetas que nos ofrece.

METER: Para trabajar con medidas y escalas.

PROGRESS: Implementa barras de progreso.

DATALIST: Extensión para crear campos con funcionalidad de autocompletar.

KEYGEN: Genera claves pública y privada para encriptación.

OUTPUT: Realizar y mostrar cálculos matemáticos.

Nota: Para ver descripciones más detalladas sobre este asunto recomendamos la lectura del artículo Nuevos elementos de formularios en HTML5.

Pero hablando de novedades en formularios, no debemos dejar de remarcar que HTML5 también trae diversos nuevos usos de INPUT, que nos sirven para especificar qué tipo de información concreta queremos introducir en ellos. Ello proporciona utilidad especial a esos campos INPUT, pensando también en los dispositivos móviles y la forma con la que tratan dichos campos. Todo eso se explica con detalle en el artículo Las mejoras de los elementos INPUT de HTML5.

Dibujos completos en HTML5, lienzo de CANVAS:

Luego tenemos una utilidad nueva que merece la pena verla por separado, puesto que nos va a transformar la manera con la que se experimentará la web. Se trata de un lienzo en donde se puede dibujar cualquier cosa e incluso hacer animación compleja.

CANVAS: Una etiqueta que genera un lienzo en la página donde realizar cualquier tipo de diseño, soporta dibujo de todo tipo de formas, degradados, imágenes, etc.

Nota: La etiqueta CANVAS del HTML simplemente delimita un área de la página donde se puede dibujar, pero para realizar esos dibujos se tiene que utilizar el lenguaje Javascript, a través del API de Canvas. 

Elementos para la web semántica

Como decíamos, la segunda clasificación de las nuevas etiquetas del HTML5 está relacionada con lo que se llama la "web semántica". Vamos a dedicar otros artículos a estudiar en profundidad esta web semántica y por qué es importante utilizarla ya mismo en nuestros proyectos, pero de momento veamos a continuación una lista de elementos que han sido agregados al HTML para especificar qué son y no cómo se deben mostrar en la página.

Secciones dentro de una página:

Algunas de las nuevas etiquetas nos sirven para decir qué secciones contiene una página.

ARTICLE: Especifica un artículo, es decir, una unidad de contenido.

SECTION: Es una sección dentro de un documento.

HEADER: La cabecera de una página.

FOOTER: El pie de página o informaciones que formen el pie de una sección.

ASIDE: Es una parte de la web que muestra contenido accesorio, generalmente colocado en un panel lateral.

NAV: con el que colocar el navegador principal de una página web.

Otros tipos de informaciones:

Hay otras muchas etiquetas que nos sirven para definir qué es el contenido que se escribe dentro.

BDI: Define una parte del texto que debe ser entendido aparte de la línea de contenido que se esté escibiendo.

MENU: una lista de opciones que formen parte de un menú.

COMMAND: Uno de los elementos o botones de un menú de opciones.

DETAILS: Detalles o información suplementaria que se puede ver u ocultar por el usuario.

SUMMARY: Encabezamiento para detalles especificados en DETAILS.

FIGURE: es un contenido que ilustre el artículo, como fotos, diagramas, ilustraciones, etc.

FIGCAPTION: El pie o explicación de un FIGURE.

HGROUP: Un grupo de encabezamientos, útil cuando se tiene diversos bloques de encabezamientos del mismo nivel H1, H2...

MARK: Un texto o información que es remarcable.

TIME: Para escribir una fecha, una hora o ambas.

WBR: Define un posible salto de línea.

Fuentes.

Artículo:  "Cuáles son las etiquetas nuevas del lenguaje HTML5, con una breve descripción sobre su utilidad y clasificación." Publicado en https://www.edureka.co/ por Miguel Angel Alvarez el 30 de mayo de 2012. Consultado el 24/11/2020.

URL: https://desarrolloweb.com/articulos/nuevas-etiquetas-html5.html