HTML5: más semántico, más funcional


En el artículo de hoy me gustaría hablarte sobre qué es HTML y qué es HTML5, la estructura básica de una página y las nuevas etiquetas que ha incorporado HTML5 para su trabajo, explicando el funcionamiento y forma de utilización de estas. Las nuevas etiquetas van centradas fundamentalmente en el mejoramiento estructural de las páginas web.

HTML

Siglas de Hyper Text Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Según Wikipedia:

Es un estándar que sirve de referencia para el maquetado de páginas web en sus diferentes versiones, define una estructura básica y un código para la definición de contenido de una página web, como texto, imágenes, entre otros.

HTML5

Es la versión más reciente de HTML, significa Hyper Text Markup Language, versión 5. HTML5 nos permite una mayor interacción entre nuestras páginas web y contenido multimedia (video, audio, entre otros) así como una mayor facilidad a la hora de maquetar nuestro diseño básico. Esta nueva versión se basó en el diseño más común de las páginas web alrededor del mundo para llegar a un estándar de etiquetas que realicen las mismas tareas de manera más semántica.

Estructura

Toda página web hecha con HTML se divide en dos partes fundamentales, conocidas como cabeza (head en inglés) y cuerpo (body en inglés). Además, todas las páginas web comienzan con la etiqueta <html> y terminan con el cierre de la misma.

Cada página web tiene solo una cabecera y un cuerpo. HTML5 no está basado en SGML (Standard Generalized Markup Language o “Estándar de Lenguaje de Marcado Generalizado”), es por ello que no requiere una referencia al DTD (Document Type Definition o “Definición de Tipo de Documento”), por tanto el doctype en esta versión es <!DOCTYPE html>.

Es importante aclarar que el doctype no es una etiqueta HTML, sino una instrucción que informa al navegador la versión de HTML que estamos utilizando. Es por ello que es importante incluirlo al principio de nuestras páginas.

A continuación te muestro una comparación entre la estructura básica de una página con HTML y otra con HTML5:

Estructura básica de una página con HTML y otra con HTML5.

Fig.1 Estructura básica de una página con HTML y otra con HTML5.

Nuevas APIs JavaScript

HTML5 incorpora nuevas Interfaces de Programación de Aplicaciones (API, por sus siglas en inglés), gracias a JavaScript. Las más importantes son:

  • API para hacer Drag & Drop. Mediante eventos.
  • API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
  • API de Geolocalización para dispositivos que lo soporten.
  • API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
  • WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
  • WebWorkers. Hilos de ejecución en paralelo.
  • Estándar futuro. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, memoria, puertos USB, cámaras, micrófonos… Muy interesante, pero con numerosas salvedades de seguridad.

En artículos posteriores te explicaré cómo utilizar cada una de estas APIs.

Las etiquetas

Las etiquetas son la herramienta fundamental, a partir de las cuales, los navegadores interpretan el código y permiten ver todo tipo de recursos, como imágenes, texto, párrafo, entre otros.

Los navegadores vendrían a ser como “traductores” de dichas etiquetas. Con HTML5 se incorporan nuevas etiquetas que nos ahorran el uso de otros productos que se usaban para complementar y hacer con el simple HTML. Debajo te muestro una tabla de las etiquetas eliminadas, y su remplazo en HTML5 (si existe):

Etiquetas eliminadas o reemplazadas por HTML5.

Fig.2 Etiquetas eliminadas o reemplazadas por HTML5.

Entre las etiquetas más importantes creadas en HTML5 se encuentran:

Video

Es una de las etiquetas que más interés causó, ya que permite incrustar videos en la web sin la necesidad de utilizar plugins como Flash. Funciona en Firefox, Chrome, Safari, Opera y en Internet Explorer desde la versión 9.

Esta etiqueta contiene varios atributos como son: src, width, height, controls, preload, autoplay y type. En el atributo src se pone la dirección donde se encuentra el video que queremos reproducir, width y height nos define el ancho y alto del video respectivamente en píxeles, controls nos permite manejar los controles del reproductor, autoplay permite que apenas se cargue la página se reproduzca el video, en caso de no declararlo debemos comenzar manualmente la reproducción del video, y el atributo preload nos carga el video antes de iniciar la reproducción en el buffer.

A continuación te dejo un ejemplo del uso de esta etiqueta y de cómo se visualizaría en el navegador Firefox:

Uso de la etiqueta video de HTML5.

Fig.3 Uso de la etiqueta video de HTML5.

Visualización de la etiqueta video de HTML5 en el navegador.

Fig.4 Visualización de la etiqueta video de HTML5 en el navegador.

Destacar además que los principales formatos de video soportados en la web por los navegadores más populares son webm, mp4 (con códec h264) y ogg, por lo que debes tener esto en cuenta a la hora utilizar videos en HTML5.

Por ejemplo, un video en mp4 que fue codificado con el códec divx no puede ser reproducido en ningún navegador.

 Audio

Es otro de los nuevos elementos que permitirán incrustar un contenido multimedia de sonido en la web. Es una de las novedades más importantes e interesantes de HTML5, ya que permite reproducir y controlar audio sin necesidad de plugins.

Posee los mismos atributos que la etiqueta video, excepto que no hay necesidad de ponerle los atributos, width y height, ya que un archivo mp3 no tiene visualización, los otros atributos cumplen la misma función que en la etiqueta video. A continuación te dejo un ejemplo:

Uso de la etiqueta audio de HTML5.

Fig.5 Uso de la etiqueta audio de HTML5.

Visualización de la etiqueta audio de HTML5 en el navegador.

Fig.6 Visualización de la etiqueta audio de HTML5 en el navegador.

Nav

Define vínculos de navegación. Se usa para marcar una sección del documento cuya función es la navegación por la página web. Esta etiqueta no debe ser usada para marcar todos los grupos de enlaces, únicamente los bloques principales de navegación por la página.

Uso de la etiqueta nav de HTML5.

Fig.7 Uso de la etiqueta nav de HTML5.

Visualización de la etiqueta nav de HTML5 en el navegador.

Fig.8 Visualización de la etiqueta nav.

 

Conclusiones

En este artículo te ofrecí un poco de información acerca de HTML y HTML5, y te mostré algunas de las nuevas etiquetas que incorpora, así como aquellas que desaparecen o son reemplazadas en esta versión.

Destacar que el principal motivo de la inclusión de nuevas etiquetas es lograr un código más semántico y por ende una página web más accesible y descriptiva tanto para los desarrolladores como para los motores de búsqueda y los screen readers.

Un ejemplo concreto lo constituye el uso de la etiqueta nav para “describir” la navegación del sitio. Un motor de búsqueda como Google o un screen reader identificará los enlaces claves del sitio web a partir de esta etiqueta.

Viste además las APIs que están disponibles y algunos ejemplos de su creación y visualización en el navegador utilizado, en este caso, Firefox. Todo esto demuestra de manera sustancial las mejoras que trae esta versión de HTML.

Espero te haya resultado interesante y útil el artículo de hoy. En próximas entradas estaré escribiendo sobre otras etiquetas que se incorporaron en HTML5 y sobre la utilización de las nuevas APIs Javascript. Happy Coding!!!