HTML5 es la quinta versión del lenguaje HTML, regulado por el World Wide Web Consortium (3WC). Desde sus inicios en 1991, ha sufrido varias revisiones, pero ninguna lo suficientemente profunda como para asegurar la convergencia en el desarrollo web.
HTML5 apunta más alto que nunca y, desde que en 2004 se constituyó el Web Hypertext Application Technology Working Group para favorecer su desarrollo, sus integrantes y colaboradores trabajan con las expectativas de ofrecernos una versión práctica y adaptada a las necesidades reales de la Web del siglo XXI. Actualmente se halla en fase borrador, pero ya podemos encontrar numerosos recursos y algunas páginas desarrolladas con este estándar. ¿Es el momento de pensar en la migración? Cuando menos, es la hora de conocer la próxima realidad.
El actual borrador de HTML5 define un único lenguaje que puede ser desarrollado en sintaxis HTML o XML. En este artículo, nos centraremos fundamentalmente en el desarrollo de páginas en HTML, aunque con alguna referencia a elementos XML. También es importante apuntar que es compatible con documentos HTML4 y XHTML1, con la excepción de algunas características específicas del primero, como las instrucciones de procesamiento o la desaparición de los marcos.
A lo largo de este práctico aplicaremos las novedades de HTML5 al proceso de creación de una página web personal básica. Os recordamos que, hasta que el lenguaje se consolide, podéis experimentar problemas de compatibilidad con los navegadores. Si queréis conocer de antemano qué características soporta vuestro navegador favorito, os recomendamos que visitéis la página www.html5test.com. En PC Actual hemos utilizado las últimas versiones de Mozilla Firefox y Google Chrome para visualizar los ejemplos de código que os proponemos.
NIVEL:AVANZADO
Paso 1. La estructura HTML5 básica
A la hora de enfocar un proyecto de desarrollo web, uno de los momentos cruciales es enfrentarse al fichero en blanco. A pesar de que los frameworks nos ahorran mucho trabajo sucio, no está de más volver de vez en cuando a los orígenes y aplicar técnicas de supervivencia del desarrollador frente al código puro y duro. Por tanto, abriremos nuestro bloc de notas e iremos experimentando con las novedades de HTML5.
Es útil recordar que es insensible a mayúsculas y minúsculas, aunque las buenas prácticas del programador no aconsejan su mezcla indiscriminada. La extensión de nuestro fichero para esta quinta versión seguirá siendo .htm o .html.
La primera novedad es que HTML5 nos lo pone más fácil desde la primera línea: el nuevo doctype queda reducido a <!doctype html>. Puede incluso ser memorizado, algo impensable en versiones anteriores. En cuanto al resto, la estructura general de nuestro documento no difiere mucho respecto a lo que ya conocíamos: utilizaremos las etiquetas <head> y <body> para la cabecera y el cuerpo, respectivamente.
Paso 2. Organización del espacio del site
El siguiente paso para crear nuestra web es definir su aspecto general. Veremos qué etiquetas debemos utilizar para organizar la división del espacio de nuestra página. En versiones anteriores de HTML, nos veíamos obligados a recurrir al uso y abuso de la etiqueta <div> y sus atributos, id y class, para llevar a cabo esta tarea. HTML5 da un paso más hacia la web semántica definiendo una serie de elementos para delimitar nuestras secciones.
A la hora de construir una web típica utilizaremos la etiqueta <header> para la información de la cabecera (logo, texto introductorio...), <nav> para los menús de navegación, <section> y <article> para organizar los contenidos principales, <aside> para los contenidos secundarios, como anotaciones laterales o espacios publicitarios, y la etiqueta <footer> para incluir la información a pie de web (año, autor, información legal, etc.).
Es importante resaltar que podemos utilizar varias veces estas etiquetas en una página. Por ejemplo, podemos definir una etiqueta <header> que contenga una imagen con nuestro banner y otra como encabezamiento de una sección.
Crea en tu documento la división que desees y sustituye las antiguas etiquetas <div> por estas. No se trata de un capricho. Además de aportar claridad al código, las etiquetas semánticas cumplen una importante función: simplifican el análisis web que realizan los motores de búsqueda.