HTML5

HTML 5 no es simplemente una nueva versión del lenguaje de marcación HTML, sino una agrupación de diversas especificaciones concernientes a el desarrollo web. Es decir, HTML 5 no se limita sólo a crear nuevas etiquetas, atributos y eliminar aquellas marcas que están en desuso o se utilizan inadecuadamente, sino que va mucho más allá.

Así pues, HTML 5 es una nueva versión de diversas especificaciones, entre las que se encuentran:
HTML 4
XHTML 1
CSS Nivel 2
DOM Nivel 2 (DOM = Document Objetc Model)

A la par, HTML 5 pretende proporcionar una plataforma con la que desarrollar aplicaciones web más parecidas a las aplicaciones de escritorio, donde su ejecución dentro de un navegador no implique falta de recursos o facilidades para resolver las necesidades reales de los desarrolladores. Para ello se están creando unas APIs que permitan trabajar con cualquiera de los elementos de la página y realizar acciones que hasta hoy era necesario realizar por medio de tecnologías accesorias.

Estas API, que tendrán que ser implementadas por los distintos navegadores del mercado, se están documentando con minuciosidad, para que todos los Browsers, creados por cualquier compañía las soporten tal cual se han diseñado. Esto se hace con la intención que no ocurra lo que viene sucediendo en el pasado, que cada navegador hace la guerra por su parte y los que acaban pagándolo son los desarrolladores y a la postre los usuarios, que tienen muchas posibilidades de acceder a webs que no son compatibles con su navegador preferido.

Resulta que HTML 5 está formado por muchos módulos distintos, cuyo grado de especificación está en niveles dispares. Por tanto, muchas de las características de HTML 5 están ya listas para ser implementadas, en un punto de desarrollo que se encuentra cercano al que finalmente será presentado. Otras muchas características están todavía simplemente en el tintero, a modo de ideas o borradores iniciales.

De hecho, las versiones más nuevas de casi todos los navegadores, incluido el polémico Internet Explorer 8, implementan algunas de las características de HTML 5. Claro que, para que una web se vea bien en todos los sistemas, hay que utilizar sólo aquellas partes que funcionan en todos los navegadores, por lo que a día de hoy, pocas son las utilidades realmente disponibles del lenguaje, si queremos hacer un sitio web compatible. No obstante, en el peor de los casos, podemos empezar a usar a nivel experimental estas características, aunque sólo sea para frotarnos las manos en espera de incorporarlas realmente en nuestras prácticas de desarrollo habituales.

Cuáles son las novedades de HTML 5HTML 5 incluye novedades significativas en diversos ámbitos. 

Como decíamos, no sólo se trata de incorporar nuevas etiquetas o eliminar otras, sino que supone mejoras en áreas que hasta ahora quedaban fuera del lenguaje y para las que se necesitaba utilizar otras tecnologías.
Estructura del cuerpo: La mayoría de las webs tienen un formato común, formado por elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en nuevas etiquetas que representarán cada uno de las partes típicas de una página.
Etiquetas para contenido específico: Hasta ahora se utilizaba una única etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como audio, vídeo, etc.
Canvas: es un nuevo componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin. Puedes conocer más sobre este nuevo elemento en el manual de canvas que estamos creando en DesarrolloWeb.com
Bases de datos locales: el navegador permitirá el uso de una base de datos local, con la que se podrá trabajar en una página web por medio del cliente y a través de un API. Es algo así como las Cookies, pero pensadas para almacenar grandes cantidades de información, lo que permitirá la creación de aplicaciones web que funcionen sin necesidad de estar conectados a Internet.
Web Workers: son procesos que requieren bastante tiempo de procesamiento por parte del navegador, pero que se podrán realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la página. Para ello se dispondrá también de un API para el trabajo con los Web Workers.
Aplicaciones web Offline: Existirá otro API para el trabajo con aplicaciones web, que se podrán desarrollar de modo que funcionen también en local y sin estar conectados a Internet.
Geolocalización: Las páginas web se podrán localizar geográficamente por medio de un API que permita la Geolocalización.
Nuevas APIs para interfaz de usuario: temas tan utilizados como el "drag & drop" (arrastrar y soltar) en las interfaces de usuario de los programas convencionales, serán incorporadas al HTML 5 por medio de un API.
Fin de las etiquetas de presentación: todas las etiquetas que tienen que ver con la presentación del documento, es decir, que modifican estilos de la página, serán eliminadas. La responsabilidad de definir el aspecto de una web correrá a cargo únicamente de CSS.Como se puede ver, existirán varios API con los que podremos trabajar para el desarrollo de todo tipo de aplicaciones complejas, que funcionarán online y offline. Quizás se entienda mejor por qué HTML 5 es un proyecto tan ambicioso y que está llevando tanto tiempo para ser elaborado.

¿Cuando estará listo HTML5?

Cuándo estará listo HTML 5 Según informan en la página de la organización WHATWG, HTML 5 se prevé esté listo como especificación de implementación recomendada en el 2012. ¿Quiere esto decir que vamos a tener que esperar hasta 2012 para aprovechar las ventajas de HTML 5? realmente no es justamente así, puesto que algunos navegadores ya implementan muchas de las características del moderno lenguaje.
HTML5 estará terminado en 2014. Así lo ha asegurado Philippe Le Hegaret, responsable del área de HTML para el W3C, asegurando que la especificación HTML5 no estará terminada por completo hasta el segundo trimestre del 2014. “Empezamos a trabajar en HTML5 en 2007 (…) Tenemos el objetivo de desarrollar HTML5 en siete años“.  Si queremos hacer un web totalmente compatible deberemos esperar un poco más.


Cuáles son las etiquetas nuevas del lenguaje HTML5, con una breve descripción sobre su utilidad y clasificación.


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 HTML5Ya 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.
Nota: 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.
Elementos que dan soporte a nuevas funcionalidadesExisten 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.
Nota: En DesarrolloWeb.com existen diversos talleres de HTML5 que explican diversos usos de las etiquetas AUDIO y VIDEO, que podemos leer si nos pasamos por el Taller de HTML5.

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.
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. Para aprender a diseñar en un CANVAS os recomendamos la lectura del Manual del Elemento Canvas del HTML5.

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.