Este artículo solo pretende ser una ligera introducción a HTML5 y va a ser el primero de una serie de artículos sobre este lenguaje en los que aprenderás a dominarlo desde cero y sin ningún conocmiento previo. Paso a paso, como hacemos con todo.
HTML son las siglas de HyperText Markup Language o traducido de forma literal: Lenguaje de Marcas de HyperTexto. HTML5, como se puede deducir de su nombre, es la 5 revisión del estándar creado en 1991 por Tim Berners-Lee y que contenía originalmente 22 elementos. La versión definitiva de HTML5 se publicó en Octubre de 2014.
HTML es el que permite que un navegador sepa lo que esta leyendo y como debe mostrarlo al usuario. De esta forma, los navegadores saben donde deben mostrar el texto, donde va una imagen o donde hay un enlace.
Para escribir páginas web en HTML utilizarás etiquetas rodeadas por los simbolos <,> por ejemplo <head>. Estos elementos tienen dos propiedades básicas: atributos y contenido. La mayoría de elementos necesitan además, una etiqueta de cierre. Para escribir un título, por ejemplo, lo harías así:
<h1>Titulo de tu página</h1>
Para ello, te bastará con un simple editor de texto plano como por ejemplo Gedit y guardar tus documentos con la extensión .html. De momento, no te preocupes mucho por el código, es un lenguaje muy sencillo y en próximos artículos te enseñare a dominarlo para que puedas empezar a hacer tus pinitos en este mundo. También tengo previsto un taller parecido al de wordpress donde crearemos una copia de esta web en HTML y partiendo desde cero.
De momento, sigamos con HTML5 que aún queda alguna cosa por contar.
¿Cuáles son las novedades de HTML5?
Hay muchas, pero para mí, estas son las más destacables:
Archivos Multimedia: HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos <audio> y <video>, ofreciendo así, la posibilidad de incluir contenido multimedia en documentos HTML nativamente.
Del mismo modo, el elemento <canvas> puede utilizarse para dibujar gráficos, realizar animaciones o hacer composiciones de distintas imágenes.
Web Semántica: Con la introducción de etiquetas como header, nav, article o footer, entre otras, la W3C pretende hacer más descriptivo el lenguaje. De esta forma, los desarrolladores por un lado, pueden definir mejor la importancia o la finalidad de cada una de las partes de una página web y por otro lado, se pretende hacer el código más entendible para los buscadores que gracias a la nueva información podrán también detectar mejor que es que en una web.
Los formularios también han sido mejorados con validaciones sin necesidad de Javascript, varios atributos nuevos y se han añadido una buena cantidad de elementos semánticos para los inputs de los mismos.
Como digo, estos dos grupos de novedades, son los más importantes en mi opinión. Que no tiene porque coincidir con la tuya. Pero te animo a que si te interesa el tema y quieres conocer todas las novedades que ha traído consigo el nuevo estándar de HTML5, te pases por la web del W3C (en inglés) para conocer todas las nuevas especificaciones que trae consigo. Si no, no te preocupes porque poco a poco las iremos viendo en WebDesdeCero.
¿Cuáles son las nuevas etiquetas de HTML5?
Como en el apartado anterior, para mí, estas son las más importantes. Que no todas.
- article: esta etiqueta sirve para definir un artículo o una publicación independiente dentro del sitio.
- header, footer: se acabaron los ID en los div. Con HTML5 estos dos elementos ya tienen su propia etiqueta.
- nav: la etiqueta nav sirve para los distintos menús de la página.
- section: funciona de una forma similar a la etiqueta div y permite definir todo tipo de secciones dentro de un documento.
- aside: con esta etiqueta definiremos los hasta ahora conocidos como sidebars.
- audio y video: estas son las dos etiquetas más importantes de HTML5, y permiten acceder de una forma simple y sin dependencia de terceros a archivos multimedia que puede ser reproducido por casi todo tipo de dispositivos.
- embed: con esta etiqueta se puede definir la presencia de aplicaciones externas o contenido interactivo.
- canvas: esta etiqueta nos permite introducir un “cuadro” dentro de un documento, para poder dibujar gráficos por vectores o realizar animaciones, por ejemplo.
La llegada de HTML5 ha permitido que el proceso de escribir código resulte mucho mas simple y lógico. Muchas de estas etiquetas pueden usarse de distintas formas. Por ejemplo, el <header> puede utilizarse para la típica cabecera de la web como hasta ahora, pero también te permite por ejemplo, meterlo dentro de un <article> para definir la cabecera de ese artículo en concreto. Lo mismo pasa con el footer, que los artículos o los sidebars por ejemplo también pueden disponer de él.
A mi personalmente, la llegada de HTML5 me ha devuelto las ganas de «codear» y eso ya vale más que cualquier novedad que os pueda explicar. De un tiempo a esta parte, cada vez está mas extendido el uso de plantillas para todo, yo mismo soy el primero de usarlas por comodidad (y las seguiré usando) pero la llegada de HTML5 fue como una bocanada de aire fresco para mí. Me ha devuelto las ganas de volver a crear cosas desde cero.
En parte, una parte de la culpa de que hoy empiece a escribir esta serie de artículos sobre HTML, es de esta 5a revisión. En breve nos metemos con la prácticas.
¿Y para tí, que cambios ha supuesto HTML5?
