Después de muchos años sin tener novedades importantes por el lado de HTML, y con la versión 4.01 como un estándar estable y (demasiado) duradero, HTML5 propone una muy interesante renovación en el lenguaje de metaetiquetas que hace posible que podamos ver páginas web en nuestro navegador.
A continuación veremos cinco de las principales ventajas de utilizar HTML5 en nuestros proyectos web.
1. Nuevas etiquetas semánticas
Podemos mejorar la estructura de las páginas con etiquetas específicas. HTML5 propone una nueva forma de plantear la manera en que estructuramos una página web. Para lograr esto, HTML5 incorporar etiquetas específicas que nos permiten definir:
– Encabezados de la estructura de la página con la etiqueta <header>, la cual no debemos confundir con la etiqueta del documento <head>. Para entender esta diferencia, debemos recordar que la etiqueta <head> se utiliza para colocar «metainformación» que no es “visible” en la representación de la página, sino que tiene otra finalidad (brindar información a los buscadores, mostrar titulo en la barra del navegador, etc.). Por su parte, <header> es realmente el encabezado del documento representado, donde se puede mostrar, por ejemplo, el logo de nuestra marca.
– Barras de navegación. La etiqueta <nav> nos brinda la posibilidad de definir el espacio de la barra de navegación de la página. Está claro que esa opción nos permitrá colocar botoneras, que utilicen HTML + CSS o bien otras tecnologías, como pueden ser AJAX o Flash (entre otras). Aquí también podemos utilizar un include si trabajamos con PHP o con ASP.
– Secciones es otra de las etiquetas que nos permite estructurar nuestro sitio. Con la etiqueta <section>, podremos especificar las secciones generales de nuestra página.
– Con el crecimiento de los sitios de noticias y blogs, se ha extendido la necesidad de definir uno o varios artículos en una página y esto podremos lograrlo ahora con HTML5 utilizando la etiqueta <article>.
– El contenido relacionado, que puede ubicarse en uno de los laterales de la página, ahora puede ser mostrado utilizado con la etiqueta específica <aside>.
– Si necesitamos reproducir conversaciones de texto, los diálogos se pueden representar con la etiqueta <dialog>.
– Para finalizar, la etiqueta que nos permite definir el pie de la página, se puede especificar con la etiqueta <footer>.
2. Audio y video
En HTML 4.01, para integrar audio y video en nuestros sitios web es necesario embeber un reproductor multimedia, a través de un plugin, que puede mostrarnos el reproductor de Quicktime, Windows Media Player o bien un reproductor personalizado creado en Flash, como lo hacen muchos servicios de video online. HTML5 provee las etiquetas <audio> y <video> para permitirnos mostrar características de audio y video en un sitio web. Probablemente la característica de video haya sido una de las más promocionadas de HTML5.
3. Aplicaciones offline
Uno de los conceptos que renueva HTML5 es la posibilidad de trabajar con aplicaciones web pero de manera offline. Si bien ya en HTML 4.01 hay páginas que pueden visualizarse sin estar conectados a Internet (si previamente fue descargada), el uso de aplicaciones web offline se hace mucho más complejo. HTML5 plantea una revolución en este tema. Google, el gigante de los buscadores y de las aplicaciones en línea es una de las empresas que apuesta por HTML5 y ha mostrado especial atención en esta característica, para poder brindar a los usuarios que eligen sus servicios, nuevas opciones para trabajo offline, que irán perfeccionándose a medida de que HTML5 logre mayor aceptación y compatibilidad con los navegadores. Además de lo que ofrece Google, este fundamental avance, permitirá que existan mayor cantidad de aplicaciones de diferentes fabricantes y desarrolladores que podrán brindar soluciones para equipos de escritorio y también para móviles.
4. Dibujar sobre un lienzo (Canvas)
HTML5 introduce la etiqueta <canvas> y con ella abre un nuevo universo de posibilidades para desarrolladores. Por medio de esta etiqueta, que podría traducirse litermante al castellano como “lienzo”, es posible definir un área para incluir scripts, dibujar y realizar representaciones de formas 2D, que se pueden actualizar dinámicamente por medio de código. Esta característica propone una opción muy interesante para alternativas de desarrollo que antes sólo podrían resolverse a través de plataformas multimedia, como por ejemplo Flash. La gran ventaja de <canvas> es que no es necesario un plugin, pero sí es imprescindible que el navegador sea totalmente compatible con esta característica.
5. Adiós a las etiquetas obsoletas
Además de ofrecer innovación y nuevas características, HTML5 se encarga también de hacer una “limpieza” de las etiquetas que han quedado obsoletas, o que deberían haber pasado al olvido para los desarrolladores web (y no en todos los casos ha ocurrido efectivamente). Algunos ejemplos de esto son las etiquetas vinculadas a la representación, que desde hace tiempo está resuelta en CSS. Entre ellas encontramos las etiquetas <font>, <b> y <center>, entre otras. También se deja de usar lo que se refiere a conjuntos de marcos y su implementación con <frameset> y <frame>. También pierde sentido la etiqueta exclusiva para incorporar applets de java (<applet>), ya que esto puede resolverse con la misma opción que otros agregados, con la etiqueta para embeber un objeto o bien con <embed>, que nos permite llamar a un plugin o aplicación externa para mostrar un contenido.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Fabulosos tips estimado.
Hola Damián, muchas gracias por tu información, he citado partes de tu artículo en una práctica que estoy llevando de Fundamentos de HTML5, por si quieres visitarla te dejo el link: Actividad 11.
Un abrazo y saludos desde México.
Muchas gracias por el comentario y por la cita. Saludos desde Buenos Aires 🙂
Muy buen artículo. Tengo una pregunta: De que manera, además de las capacidades offline, favorece HTML5 la creación de aplicaciones para dispositivos móviles?
Hola Patricia. Gracias por tu comentario.
Te cuento que HTML5 cuenta con la posibilidad de trabajar offline mediante la incorporación de nuevos eventos y el uso del cache manifest.
Encontrarás más info en: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html.
Si te interesa algo puntual al respecto avisame.
Saludos.
Damián