Novedades de HTML5 y sus nuevas etiquetas
La llegada de HTML5 ha sido una revolución, ya que ha incorporado nuevas funcionalidades, etiquetas y comportamientos, que nos permiten una mayor interactividad, orden y precisión en nuestros desarrollos web. Entre las nuevas funcionalidades de HTML5 destacan:
- Marcadores semánticos.
- Mejoras en la gestión de formularios.
- Soporte para audio y video.
- Librería gráfica: Canvas.
- Contenido editable.
- Contenidos seleccionables y arrastrables.
- Almacenamiento de datos local.
Uno de los principales problemas de las nuevas especificaciones de HTML5 es el soporte que los diferentes navegadores proporcionan, por lo que serán las últimas versiones de los respectivos navegadores las que ofrecerán una mayor compatibilidad con HTML5. En este punto, es conveniente remarcar, que incluso internet explorer, a partir de su versión 9, ofrece una buena compatibilidad con los estándares de la 3WC.
Empecemos por las nuevas etiquetas, y veamos para que sirven:
- Etiqueta <section>: se usa como contenedor general, para agrupar contenidos. Es una de las nuevas etiquetas que más vamos a utilizar, y nos servirá para clasificar las diferentes partes del web.
- Etiqueta <article>: es la parte principal de nuestro web, es decir, es donde va el contenido propiamente dicho. Por ejemplo, sería el contenido de la entrada de un blog, o el texto de un artículo de un periódico online,... es la parte más importante para los buscadores, ya que allí encontrarán información fundamental para decidir sobre que trata la página web.
- Etiqueta <aside>: esta etiqueta, la utilizaremos para integrar contenidos auxiliares o complementarios, como pueden ser una lista de etiquetas, barras laterales, integrar contenidos de redes sociales,...
- Etiqueta <hgroup>: sirve para agrupar etiquetas h1, h2, h3... yo personalmente todavía no la he utilizado, y no le veo una utilidad clara, en cualquier caso, es nueva y por tanto la menciono.
- Etiqueta <header>: esta, junto con <footer> y <nav> creo que son las más significativas, porque hasta ahora, lo que se hacía era crear divs y asignarles el id header, footer y nav, por lo que ahora lo hacemos directamente, y nos ayuda a clarificar nuestro código. En resumen, esta etiqueta se usa para agrupar el código de la parte superior de nuestro web.
- Etiqueta <footer>: es la inversa a la etiqueta <header>. Se usa para el pié de página, el código de nuestra parte inferior.
- Etiqueta <nav>: aqui va nuestro menu de navegación.
- Etiqueta <time>: sirve para identificar las partes de nuestro web, que hacen referencia a estados temporales, por ejemplo: <time>ayer</time> paseaba por la calle...
- Etiqueta <mark>: se usa para resaltar palabras clave en el texto de nuestro web, tal y como hacen los buscadores cuando resaltan nuestros términos de busqueda en el texto que muestran.
- Etiqueta <figure>: en esta etiqueta se agrupan fotos, imágenes, diagramas,... pero con varias matizaciones, por ejemplo, el contenido que incluyamos en esta etiqueta, tiene que ser coherente con el contenido del web, y sobre todo, si eliminamos este contenido, el web debe de seguir teniendo sentido, siendo solo un complemento que ilustra la información, pero no debe de ser la información en sí.
Existen más etiquetas, pero estas, son las más relevantes, y las más significativas, a mi modo de ver.
Y recordemos las etiquetas que ya no tienen soporte en HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> y <xmp>.
Respecto a código HTML en sí, la nueva especificación HTML5 tiene algunas diferencias, como son:
- A la hora de definir el DOCTYPE, HTML5 simplifica enormemente el procedimiento, limitándose a la etiqueta: <!DOCTYPE html>. Así de simple.
- También se ha simplificado la forma de definir el idioma de la página web, haciéndose de la siguiente forma: <html lang="en"> para inglés, <html lang="es"> para castellano y <html lang="x-klingon"> por si optamos por el klingon como idioma de nuestro web.
- El atributo Character Set, se simplifica, reduciéndose a: <meta charset="utf-8" /> en el caso de que optemos por utf-8 (codificación recomendada si vamos a usar el castellano).
- Ya no es necesario cerrar las etiquetas img, input o br, por ejemplo, antes teníamos que hacer: <br />, ahora podemos poner directamente <br>.