Conoce las principales versiones del lenguaje HTML y sus diferencias con el actual HTML5

Incluso si no has estudiado formalmente este lenguaje, debes haber escuchado un poco sobre HTML, principal lenguaje que se emplea en la web. Todo sitio web hace uso de HTML, así que en tu día a día tienes contacto con este popular lenguaje y tal vez no lo habías notado.

HTML es un lenguaje que ya tiene más de 20 años desde su creación y, que como es de esperarse, ha ido evolucionando en base a las nuevas tecnologías que han surgido. En este artículo te explicamos brevemente qué significa HTML, hacemos un breve repaso de su historia y por último nombramos las principales diferencias que posee esta versión con su más reciente revisión: HTML5.

¿Qué es HTML?

HTML son las siglas de HyperText Markup Language que en español puede ser traducido como “lenguaje de marcado de hipertexto”. Este es el lenguaje que se emplea para estructurar y crear páginas web, por esta razón es uno de los lenguajes de marcado más populares en la actualidad. Se utiliza en conjunto con otras tecnologías como CSS y JavaScript, en ocasiones con otros lenguajes de programación como PHP o Python.

HTML, como cualquier otro lenguaje de marcado, funciona en base a etiquetas. Esta característica permite que sea un lenguaje sencillo de aprender para muchas personas pues las etiquetas provienen del inglés y son bastante explicativas por sí solas. HTML en su mayoría, utiliza tanto etiquetas de apertura como cierre que se encuentran encerradas en corchetes angulares (<,>) de tal manera que una etiqueta HTML luciría de la siguiente manera:

<title>Título de la página</title>

Más adelante, en otro apartado hablaremos sobre las etiquetas en HTML y HTML5.

Inicios del lenguaje HTML

Los inicios de este lenguaje se remontan a los años 80 en el que el físico Tim Berners-Lee, trabajador de la CERN (Organización Europea para la Investigación Nuclear) buscaba una nueva forma de “hipertexto” para compartir documentos.

Hipertexto hace referencia a los sistemas que permiten organizar y enlazar fragmentos textuales o gráficos entre sí, de tal forma que los usuarios pueden acceder a la información de forma no secuencial, sino a través de los elementos relacionados.

En esa época, para poder vincular documentos electrónicos se podían usar hipervínculos o un lenguaje de etiquetas llamado SGML (traducido al español como Lenguaje de Marcado Generalizado Estándar). De hecho, en principio Tim Berners-Lee concibió HTML como un derivado o subconjunto del lenguaje SGML.

Ya en 1991 se contaba con el primer documento formal que describía HTML. A este documento se le dio el nombre “HTML Tags” que en la actualidad todavía puede ser revisado a modo de referencia. En este mismo año, Tim Berners-Lee estaría desarrollando el primer navegador web y pondría en línea las primeras páginas web que describían este ambicioso proyecto que cambiaría la vida de millones de personas.

Versiones antiguas y actuales de HTML

Como ya mencionamos, la versión inicial de HTML surgió en 1991. Es de esperarse que un lenguaje tan útil haya sido actualizado y modificado a lo largo de los años. En la actualidad, el lenguaje se encuentra en su quinta versión y se han eliminado y añadido etiquetas y otras funciones que comentaremos más adelante. De momento, repasaremos brevemente las diferentes versiones y organismos que se han hecho cargo de la estandarización del lenguaje.

La primera versión de este popular lenguaje surge en 1993. En esta época, la IETF (Internet Engineering Tasking Force) estaba cargo del proyecto y ya se tenía un borrador para definir HTML como un estándar. De forma paralela ya se estaba desarrollando lo que podría ser el sucesor de HTML, un lenguaje llamado HTML+, pero el proyecto no tuvo éxito. Tras el fracaso de HTML+, en 1995, surge HTML 2.0, considerada el primer estándar oficial de este lenguaje. Las especificaciones de esta versión estuvieron a cargo de un grupo denominado “HTML Working Group”, creado por el IETF. Esta primera versión no soportaba tablas y la declaración explícita de los elementos body, html y head era opcional.

Ya en 1996, las especificaciones del lenguaje HTML pasan a manos de W3C (World Wide Web Consortium), organismo sin fines de lucro cuyo principal propósito es generar recomendaciones y estándares que aseguran el crecimiento de la World Wide Web. A pesar de que para esa fecha ya había surgido HTML 3.0, nunca se estandarizó por lo que la segunda versión del lenguaje se publica en 1997 y se denomina HTML 3.2. Es la primera recomendación HTML publicada por la W3C y se incorporaron tecnologías recientes en aquel entonces como los applets de Java y texto que fluye alrededor de las imágenes. En un inicio, esta versión incluiría también fórmulas matemáticas, pero finalmente se omitieron estas funciones y surgió en su lugar otro lenguaje llamado MathML que tiene poco uso en la actualidad.

La siguiente versión, HTML 4.0 sería lanzada en 1998 que incluiría una serie de novedades como la posibilidad de incluir scripts en las páginas web, añadir hojas de estilos CSS, inclusión de tablas complejas así como mejoras generales en los formularios y la accesibilidad de las páginas. Un año más tarde se publica HTML 4.0.1, una revisión y actualización del lenguaje HTML 4.0 que no incluye funciones nuevas.

Pasarían cinco años antes de que la W3C iniciara un debate sobre el futuro de HTML. Sin embargo, para esa fecha muchos miembros de la W3C estaban más interesados en el desarrollo de XML, por lo que se dio preferencia a este proyecto. Ese mismo año, en el 2004, Apple, Mozilla y Opera, preocupados por la falta de iniciativa de W3C en referencia a HTML formaron una asociación denominada WHATWG (Web HyperText Application Technology Working Group) cuya actividad principal fue el desarrollo de HTML5 como el nuevo estándar del lenguaje. En el 2007, debido a las actividades de investigación de esta organización y las importantes empresas que la conforman, W3C retomó el proyecto HTML5 y se unió al grupo de trabajo de WHATWG. Diez años después de la fundación de esta organización se publicaría el más reciente estándar de HTML denominado HTML5.

¿Por qué es importante HTML5?

HTML5 es la quinta revisión del lenguaje HTML. Posee dos variantes de sintaxis, la clásica HTML y la nueva XHTML. Aunque HTML5 ha traído bastantes novedades, uno de sus mayores beneficios es la adición de nuevas etiquetas que permiten la creación de una estructura para la web semántica.

La web semántica hace referencia a un entorno web dotado de significado en donde se facilite la lectura de contenido para los usuarios y también en donde las máquinas puedan procesar esta información, es decir, sería un espacio en donde la información tiene un significado definido, tanto para humanos como para ordenadores. La idea detrás de la web semántica es la creación de documentos “inteligentes” que permitan búsquedas inteligentes. Al dotar de contenido semántico las páginas web actuales no sólo pueden almacenar información, sino también entender e interpretar dicha información.

El principal promotor de esta visión es Tim Berners-Lee, creador también de la WorldWideWeb y que ve la iniciativa no como una nueva web, sino como una extensión de la web actual que conocemos.

Adicionalmente al gran valor que posee la web semántica, tanto para usuarios, empresas y motores de búsqueda podemos mencionar también como una gran novedad del HTML5 el uso de APIs, las cuales mencionaremos en el siguiente apartado.

Principales novedades de HTML5 y diferencias con HTML

Como ya hemos mencionado, una de las mayores novedades que ofrece HTML5 es que es símbolo de un paso más cerca hacia una web más humana: la web semántica. A través de útiles nuevas etiquetas, HTML5 permite crear una estructura más organizada para cualquier página web. Algunas de las nuevas etiquetas que podemos ver en HTML5 son las siguientes:

• <article> para añadir una pieza de contenido independiente como una entrada de blog o una noticia en un diario en línea
• <canvas> para mostrar gráficos renderizados en tiempo real
• <dialog> para representar conversaciones
• <header> para referirse a la cabecera de la página
• <footer> para referirse al pie de página de la página
• <nav> para referirse a la zona donde se ubica la navegación
• <audio> y <video> para contenido multimedia como podcasts, música y videos respectivamente

En total se han introducido 23 etiquetas nuevas para promover la búsqueda de una web semántica. Pero eso no es todo, también se han añadido nuevos atributos para los diferentes elementos que se encontraban vigentes desde HTML 4.0.1. Mencionamos algunos de ellos:

• autofocus para <input>, <select>, <textarea> y <button> que tiene como objetivo indicar el elemento que será el centro al cargar la página
• form para <input>, <output>, <select>, <textarea>, <button>, <label>, <object> y <fieldset> de tal forma que todos estos elementos pueden ser asociados con un formulario
• placeholder para <input> y <textarea> que sirve para indicar el tipo de información que de ingresar un usuario
• required para <input>, <select> y <textarea> permite indicar los campos obligatorios que debe rellenar el usuario en un formulario

Existen una gran cantidad de atributos, tanto para viejas como nuevas etiquetas. Este conjunto de nuevas etiquetas y atributos abren una serie de posibilidades para desarrolladores pues tienen la capacidad de incrementar la experiencia de usuario e interactividad del sitio web.

HTML5 introduce además nuevas APIs. API son las siglas de Application Programming Interface y se puede definir como un conjunto de subrutinas, especificaciones y métodos que ofrece cierta biblioteca para ser utilizado por otro programa. Es así que las APIs permiten hacer uso de funciones o infraestructura ya existente en otro programa, ahorran así tiempo y recursos al evitar programar todo desde el inicio.

Las APIs para HTML5 están escritas en JavaScript y permiten realizar una serie de tareas que a menudo son más utilizadas y útiles en dispositivos móviles. Como ya hemos mencionado HTML5 introduce nuevas APIs que nombramos a continuación:

• Drag and Drop. Esta es una característica común que muchas interfaces de servicios y plataformas poseen. Consiste en arrastrar un objeto o elemento y moverlo a una nueva ubicación. Puede realizarse en HTML mediante eventos.
• Geolocation. Función para averiguar la posición geográfica del usuario, una alternativa a otros métodos más exactos GPS o inexactos como captura de dirección IP. La API sólo devuelve las coordenadas del usuario. Aunque la geolocalización puede ser implementada por los desarrolladores, su utilización debe ser aprobado por los usuarios ya que viola normas de privacidad.
• Local Storage. Al implementarlo, las aplicaciones web son capaces de almacenar datos de forma local dentro del navegador del usuario. Es una opción más segura, con mayor capacidad de almacenamiento que las usuales cookies en donde la información no se transfiere al servidor.
• App Cache. Función para acceder a una aplicación web sin necesidad de conectarse a internet. Como su nombre indica se hace uso de la copia caché de dicha aplicación para poder acceder a ella la próxima vez. Esta característica no sólo permite acceder a aplicaciones web sin conexión a internet, sino que mejora la velocidad al reunir recursos almacenados en caché.
• WebWorkers. Hace referencia a un código JavaScript que corre en segundo plano, sin afectar el rendimiento de la página. De forma usual, cuando un script se ejecuta en una página HTML, la página no responde hasta que el script ha sido procesado pro completo. Con el uso de los WebWorkers, el script se sigue ejecutando, pero no se pierde la capacidad de interacción con otros elementos de la página.

Existen muchas otras APIs compatibles con HTML5 que muchas plataformas emplean en la actualidad como es el uso de WebSockets, por ejemplo. Estas APIs se utilizan tanto en las versiones para ordenadores como móviles de una gran cantidad de sitios web. Como has podido apreciar, las APIs permiten añadir una capa de funcionalidad a las páginas web, de esta manera la experiencia de usuario en un sitio web se hace mucho más interactiva y entretenida.

Pero HTML5 no solo introduce nuevos elementos, sino que también elimina etiquetas como <applet>, <basefont>, <big>, <frame>, <s>; atributos como name en <map>, nohref en <area>, scheme en <meta>, target en <link>, entre otros ahora son elementos obsoletos y no forman parte de las especificaciones para HTML5. Adicionalmente se han modificado algunos elementos para una mayor coherencia con el sistema de etiquetas de HTML5, por ejemplo <blockquote> ahora permite el uso de citas en <footer> y <cite>, <small> se utiliza para comentarios adicionales escritos en letra pequeña, entre otros.

Todos los cambios introducidos en HTML5 han sido realizados para que exista una mejor organización y coherencia con las etiquetas ya existentes, sin dejar de lado las nuevas tecnologías y la visión de una web semántica.

En conclusión…

Aunque se podrían mencionar una a una las novedades que introduce HTML5 y nombrar todas las etiquetas, atributos y elementos que son nuevos o han sido modificados en la versión de HTML5, se puede resumir que el gran aporte de HTML5 ha sido la adición de elementos que permiten el uso de una web semántica que beneficia a los usuarios. Asimismo, se añade mayor interactividad mediante la etiquetas <canvas> y el uso de diversas APIs que se trasladan a la perfección a versiones web móviles pues permiten realizar una serie de tareas como acceder a la cámara, transformar imágenes y videos e incluso incorporar funciones de geolocalización.