Nociones básicas sobre HTML5
Equipo editorial de IONOS8 mins
Desde los comienzos de Internet, HTML (Hypertext Markup Language) se ha posicionado como el lenguaje estándar para la estructuración, la conexión y la puesta a disposición, independientemente de la plataforma, de contenidos en la World Wide Web. A pesar de ello, el desarrollo de este lenguaje se volvió improductivo tras la publicación de HTML 4.01 en diciembre de 1999, al contrario de lo que ocurrió con Internet, que siguió evolucionando. Navegar por la red ya no es lo que era a finales del milenio. Además de textos e imágenes, también existen elementos multimedia que convierten a Internet en lo que es hoy –influenciado por el creciente interés por las ofertas móviles.
En los últimos años, el uso moderno de Internet ha superado con creces al lenguaje de hipertexto. Las páginas web actuales se apoyan en multitud de plugins para satisfacer las exigencias de programadores, editores y consumidores, de ahí que surjan incompatibilidades y fallos de seguridad y, en este sentido, la quinta versión de HTML tiene la responsabilidad de acabar con ello. El 28 de octubre de 2014, el consorcio World Wide Web (W3C) presentó a HTML5 como el nuevo lenguaje de WWW. Sin embargo, gran parte de las empresas gestoras de páginas web siguen apostando por la versión anterior o por otros estándares más antiguos como XHTML, aunque puede que la situación cambie en un futuro próximo.
Sobre el desarrollo de HTML5
La quinta versión de HTML es diferente a la anterior al tratarse de un producto implementado por dos grupos de desarrolladores que trabajan de forma paralela. Cuando el consorcio W3C suspendió el proyecto HTML tras la publicación de la versión 4.01 y se concentró, en su lugar, en el desarrollo de XHTML, surgió un descontento generalizado en numerosas organizaciones acerca del nuevo curso que había adoptado el comité de estandarización. El lento desarrollo de los estándares web a través de W3C se convirtió en la pesadilla de las empresas de software y de los proveedores de navegadores. Como respuesta a la nueva organización de W3C, se fundó la comunidad de trabajo Web Hypertext Application Technology Working Group (WHATWG), que se dedicó al desarrollo de los estándares HTML e impulsó la incorporación de aplicaciones. En 2004, y para sorpresa de W3C, WHATWG presentó la primera propuesta para HTML5. Solo dos años después, W3C volvió a encomendar a un grupo de trabajo propio el desarrollo de HTML con base en la versión de WHATWG. En 2009, W3C dio a conocer que no participaría en el desarrollo de XHTML. En su lugar, se concentró en la elaboración de la especificación de HTML5 en cooperación con WHATWG.
¿Por qué HTML5?
Mientras que en los comienzos de Internet las páginas web tan solo servían para representar contenidos, hoy en día la interacción con la oferta online se sitúa en el centro del debate. Las personas que visitan dichas páginas web ya no son entendidas como recipientes pasivos, sino que quieren que se las denomine usuarios. Los administradores web responden con formularios de contacto interactivos, con funciones de comentarios o con la integración de los medios sociales, aunque a ello también se suman los juegos online a los que se puede acceder directamente desde el navegador. Sin embargo, en el caso de HTML 4.01 solo se puede acceder a ese tipo de funciones a través de plugins externos.Es en este contexto donde el nuevo estándar web HTML5 muestra su fortaleza. Junto a las clásicas etiquetas HTML entre paréntesis angulares, la estructura de HTML5 se caracteriza por marcas específicas (véase abajo), elementos multimedia y también interfaces de programación de aplicaciones (Application Programming Interfaces, API), que están disponibles junto a JavaScript. Los plugins de proveedores privados como Adobe Flash son parte del pasado. Con HTML5 los programadores pueden trabajar sin depender de las empresas de software y, así, tienen la capacidad de desarrollar páginas web seguras y accesibles. Los siguientes datos ponen de relieve las últimas novedades de HTML5 y muestran una selección de los elementos más importantes.
Nuevos elementos HTML
Una innovación revolucionaria que incluye HTML5 es la introducción de nuevos elementos semánticos. Mientras que HTML 4.01 preveía una estructuración a grandes rasgos a través de diversos elementos <div>, las etiquetas <section>, <nav>, <article>, <aside>, <header>, <footer> o <main> ofrecen la posibilidad de definir en este nuevo lenguaje el tipo de contenido de cada elemento.
| Etiqueta | Función |
|---|---|
| <section> | Define una sección de un documento HTML5. |
| <nav> | Define una sección como barra de navegación. En general, en dicha etiqueta se incluyen referencias a páginas subordinadas. |
| <article> | Marca una sección como contenido independiente dentro de un documento HTML5. |
| <aside> | Define una sección como contenido no relacionado con el contenido principal. |
| <header> | Define una sección como cabecera. Esta incluye logotipos, el título de la página web y la navegación. |
| <footer> | Define una sección como pie de página. En general, esta alberga datos de contacto o de copyright. |
| <main> | Marca una sección como contenido principal de una página web y solo se puede utilizar una vez en un documento HTML5. |
Los elementos semánticos de las secciones de las páginas web tienen una gran ventaja, ya que simplifican a los motores de búsqueda el rastreo de documentos HTML. Dichos buscadores prefieren los contenidos bien estructurados, por lo que los administradores de páginas web que facilitan al crawler la interpretación de los documentos HTML5 (mediante las correspondientes etiquetas) tienen más posibilidades de obtener un buen posicionamiento en la lista de resultados.
Integración multimedia
El lenguaje HTML hace posible que la integración de archivos de vídeo y audio sea tan sencilla como lo es la de imágenes. Para ello se utilizan los elementos <audio> y <video>, gracias a los cuales ya no es necesario el desvío de los mismos mediante el uso de plugins.
| Etiqueta | Función |
|---|---|
| <audio> | Marca un archivo como archivo de audio. |
| <video> | Marca los vídeos incluyendo las pistas sonoras. |
Interfaces de programación
Con HTML5 los programadores tienen a su disposición una serie de elementos JavaScript que se integran en los documentos de dicho lenguaje en forma de API (interfaces de programación de aplicaciones). La siguiente tabla muestra una selección de los respectivos elementos de HTML5 que facilita a los programadores la tarea de cumplir con los diversos requisitos en las páginas web modernas.
| API | Función |
|---|---|
| Canvas | El elemento Canvas permite a los programadores definir un área determinada de un documento en HTML5 para integrar mapas de bits dinámicos mediante JavaScript. Junto a las líneas, los rectángulos y las circunferencias el elemento favorece la integración de curvas de Bézier, gradaciones de color, gráficos en formato PNG, GIF y JPEG, así como de transparencia y de texto. Un uso clásico de <canvas> es la integración de diagramas, aunque también es posible la integración de aplicaciones complejas y hasta de juegos online. |
| Drag and Drop | La API “Drag and drop” (arrastrar y soltar) hace posible desplazar los objetos en un documento HTML5 o entre dos páginas web.. |
| Aplicaciones Offline | A través de Aplicaciones Offline se puede acceder a aplicaciones web en páginas HTML5 cuando no haya conexión a Internet. Esto es especialmente importante para el uso de smartphones. Para ello, se puede cargar una aplicación con todo el contenido necesario en el caché de la aplicación. |
| Geolocalización | La geolocalización es una API de JavaScript que posibilita conocer la ubicación actual de los visitantes de las páginas web. Por norma general, cuando un visitante carga una página con la API de geolocalización se le preguntará si quiere permitir el acceso a su ubicación. |
Trabajar con HTML5
En Internet existen infinidad de tutoriales de HTML5 para poder acceder más rápidamente a los nuevos estándares web. En la página web Mozilla Developer Network se puede encontrar una amplia selección de recursos para desarrolladores web. En general, las versiones actuales de los editores web más habituales soportan HMTL5, por lo que no será necesario adquirir un editor HTML5 especial. Como ocurre con cada estándar web oficial, W3C también pone a disposición el validador para HTML5 Validator, con el que se podrá evaluar la conformidad de los documentos HTML. La validación del marcado de HTML de una página web se convierte en un factor importante para garantizar la calidad.
