La nueva versión del lenguaje HTML trae consigo muchas novedades. Como vimos en el artículo Qué es HTML5, el nuevo estándar está compuesto de diversas tecnologías de lo más variado, para suplir todas las necesidades de la Web actual y de los nuevos dispositivos de movilidad.

En esa línea comprensión de lo que es HTML5, cabe destacar que existen varios lenguajes que están siendo actualizados con el nuevo estándar, como HTML, CSS o Javascript. Si tuviésemos una pila de asuntos que representasen cada una de estas novedades, la del propio lenguaje HTML sería la menor, seguida de CSS y luego de Javascript. Sin embargo, hay varias cosas que debemos conocer sobre el lenguaje de etiquetado en esta nueva versión, que están cambiando enormemente la manera en la que se conciben y desarrollan los sitios web actuales.

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.

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

Elementos que dan soporte a nuevas funcionalidades

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.

Nuevos elementos de formulario:
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.

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.

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.

En el próximo artículo veremos unas explicaciones más conceptuales acerca de las etiquetas semánticas y cómo éstas deben cambiar el modo en el que se entiende la composición de una página web.