¿Qué es HTML5?

El logotipo oficial del estándar HTML5

Toda página web está conformada por un código estructurado denominado HTML, que son las siglas de HiperText Markup Language (Lenguaje de Marcado de Hipertexto). Básicamente, este lenguaje cuenta con una serie de instrucciones para indicarle al navegador que estemos utilizando la manera en que la página debe ser representada.

Una de sus principales características es su simplicidad de uso y de aprendizaje, dado que para crear un documento HTML sólo necesitamos un editor de texto simple (como el bloc de notas de Windows) para escribir las etiquetas (o tags) que le darán forma a nuestra página web.

El código HTML da forma a las páginas web

Las etiquetas del lenguaje HTML indican el comienzo y el final de todos los elementos que se muestran en la página, desde las características de los textos (como el tipo de letra, el color o el estilo) hasta los elementos multimedia como imágenes, vídeos y sonidos.

Cabe aclarar que HTML no es un lenguaje de programación, sino de marcado. Esto quiere decir que únicamente le indica al navegador lo que debe mostrar mediante el uso de etiquetas y atributos. Si hubiera algún error en el código, el navegador mostraría el documento tal como lo llegue a interpretar.

Historia de HTML5

El lenguaje HTML ha tenido varias encarnaciones con el pasar de los años. Todas ellas son similares, pero con el paso del tiempo se han ido añadiendo diversas mejoras para hacer frente a nuestro más refinado entendimiento de cuál es la mejor manera de crear una página web.

HTML5 es la versión más reciente del lenguaje y se ha ido convirtiendo poco a poco en el estandar usado por la mayoría de los desarrolladores. Su versión definitiva se publicó a penas en Octubre de 2014, pero ha sido usada y soportada por la mayoría de los navegadores web desde un par de años antes.

Sin embargo, aún abundan los sitios web desarrollados en HTML4 o en su sucesor, XHTML. Además, también existen muchos libros o cursos orientados a ambos estándares del lenguaje, lo cual hace que muchos desarrolladores principiantes se confundan y no sepan cuál de ellos aprender. Vamos entonces a resaltar algunas de las diferencias entre estos estándares para subsanar la confusión.

HTML4 vs XHTML vs HTML5. Principales diferencias.

HTML fue desarrollado en 1990 por Tim Berners-Lee y su versión 4 es la más antigua que sigue en uso. La sintaxis de HTML4 es muy permisiva; por ejemplo, las etiquetas de cierre muchas veces son opcionales. Como ejemplo, en HTML4 los párrafos son cerrados automáticamente cuando se inicua uno nuevo. Es decir, no necesitas terminar un párrafo con una etiqueta de cierre en HTML4.

HTML vs XML vs XHTML vs HTML5... ¿cuál es la diferencia?

Esta sintaxis permisiva era excelente para desarrolladores amateur y hacía que HTML fuera muy fácil de aprender y adoptar. Sin embargo, la sintaxis permisiva no es tan buena si se desea lograr un resultado específico que se vea igual en todos los navegadores, dado que vuelve difícil que un navegador interpreten adecuadamente qué fue lo que el desarrollador quiso decir. Cabe aclarar que todos los navegadores web interpretan HTML de manera ligeramente distinta y, con la gran cantidad de navegadores web en uso en la actualidad, convierte a HTML4 en un lenguaje poco confiable si se usa de manera incorrecta.

Para contrarrestar este problema se introdujo XHTML, una variación del lenguaje HTML que implica el uso de una sintaxis más estricta. La principal diferencia entre HTML y XHTML es que todas las etiquetas, una vez abiertas, deben ser cerradas. También existen algunas restricciones acerca de cuáles etiquetas pueden ser incluidas dentro de otras. Estas restricciones son bastante específicas y muy probablemente no nos encontremos con ellas.

Fuera de esto, todas las etiquetas de XHTML son las mismas que las de HTML4. XHTML es el lenguaje usado por la mayoría de los desarrolladores web profesionales.

HTML5, la nueva versión del lenguaje, toma lo mejor de HTML4 y de XHTML y añade nuevas funcionalidades que reflejan el modo en que usamos la web hoy (especialmente con la explosión en el uso de la web móvil). Con HTML5 los desarrolladores son capaces de hacer cosas mucho más interesantes con los sitios web.

Al momento de escribir estas líneas, la mayoría de los navegadores web son compatibles con HTML5, pero para salir de dudas sobre la compatibilidad del navegador en uso, se puede someter a un test visitando el sitio http://html5test.com/.

Nuevas características de HTML5

A continuación se listan algunos de los cambios más significativos que introduce HTML5 para los desarrolladores web:

• Nuevas etiquetas para estructurar nuestro sitio. Las nuevas etiquetas incorporadas se refieren a las distintas partes que conforman un sitio web y son: <header>, <nav>, <article>, <section>, <aside> y <footer>.

Las nuevas etiquetas proveen estructura a una página web

• Gráficos con Canvas. Con el nuevo elemento "Canvas" contamos con una herramienta que nos permite generar elementos gráficos en nuestro sitio web. En combinación con Javascript, el canvas es una potente herramienta que puede usarse para incluir imágenes personalizadas, gráficas estadísticas y hasta videojuegos.

El elemento canvas de HTML5 en acción

• Controles de audio y video. Con las nuevas etiquetas <audio> y <video> podemos incluir elementos multimedia en nuestros sitios sin necesidad de programas adicionales (como Flash Player). HTML5 nos permite incluir estos elementos potenciados con un control de reproducción que es posible personalizar y adaptar a nuestro gusto.

Los reproductores de audio y video de HTML5 pueden personalizarse

• Geolocalización. HTML5 utiliza esta función para ubicar desde dónde se conecta un usuario haciendo uso ya sea de la red WiFi o del GPS del dispositivo movil desde el cual se accede a un sitio web. Esto permite crear aplicaciones que utilicen esta ubicación para ofrecer interesantes funciones al usuario.

La geolocalización es una de las más interesantes adiciones a HTML5

• Web sin conexión. Mediante el uso de mecanismos de almacenamiento local, los sitios desarrollados en HTML5 pueden funcionar aún cuando no se cuente con una conexión a internet activa.
• Etiquetas de formulario. Los formularios son un importante componente de la mayoría de los sitios web, pues sirven como plataforma para que los usuarios introduzcan información que podemos procesar. Con HTML5 vemos incorporadas importantes mejoras respecto a los formularios, como funciones de autofocus o validaciones sobre los controles, las cuales anteriormente debían hacerse mediante Javascript o algún lenguaje del lado del servidor.

HTML5 y CSS3

HTML5 trabaja en conjunto con las llamadas hojas de estilo en cascada o CSS (Cascading Style Sheets) y entre ambos tratan de definir los nuevos estándares para el desarrollo web tanto para escritorio como para dispositivos móviles.

CSS es un lenguaje que sirve para definir la presentación de un documento estructurado y escrito en HTML5. La idea detrás de CSS es que pueda separarse la estructura de un documento de su presentación. La información relativa al estilo de un documento web puede ser definida en un documento separado o en el mismo documento HTML5. Usando el lenguaje CSS puede definirse, por ejemplo, el color de los textos que se presentarán en la página web, los tipos de letra, las alineaciones, los colores de fondo, la posición de los distintos elementos del documento web, etc.

La revisión más reciente de este lenguaje es CSS3.

HTML5 y Javascript

Javascript, al igual que CSS, es una de las herramientas más utilizadas para extender la capacidad que ya de por sí tiene HTML5. Se trata de un lenguaje de programación que interpreta el navegador y que se usa en gran manera para implementar mejoras en la interfaz de usuario y páginas web dinámicas. Mientras que HTML5 se encarga del contenido y la estructura de la página y CSS3 se encarga de la apariencia o presentación de la misma, Javascript se encarga de los comportamientos que tendrá la página, como mostrar alertas o ventanas de aviso a los usuarios, validar un formulario, ocultar o mostrar elementos de la página cuando se haga clic en un botón, etc.

La interacción entre HTML5, CSS3 y Javascript puede ilustrarse de la siguiente manera:

Como vemos, desarrollar un sitio web moderno requiere del aprendizaje y dominio de al menos estas tres poderosas herramientas, que en conjunto nos permitiran crear sitios web atractivos y, sobre todo, funcionales.

Si bien el estandar HTML5 a penas está en pañales, su potencial es bastante grande y a penas estamos viendo el comienzo de su expansión.

Espero que este artículo les haya dado una mejor idea de qué es el lenguaje HTML5 y sirva como una introducción para un aprendizaje más completo y profundo del desarrollo web moderno.