Pese a no estar de todo implantado, HTML5 va cogiendo fuerza, y cada vez son más los que se animan a empezar a desarrollar conforme a esta nueva versión de HTML.

Recientemente, he empezado a usarlo, y ha investigar sobre las novedades que aporta respecto al HTML4. Y pese a no estar completamente familiarizado con HTML5, he descubierto que incorpora novedades muy interesantes a la hora de desarrollar una nueva página.

Algunas de las novedades que más se han mencionado son la posibilidad de incluir vídeo y audio sin la necesidad de usar un complemento como Flash, tan solo hacen falta las etiquetas «<audio>» y «<video>».

Hacia la web semántica

Sin embargo, más allá de poder dejar de lado Flash, HTML5 incorpora una serie de etiquetas que nos permiten orientar nuestro sitio hacia la web semántica. De acuerdo a la Wikipedia, podemos definir web semántica de la siguiente manera:

Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web. Esas informaciones adicionales —que describen el contenido, el significado y la relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas informáticos usando «agentes inteligentes». Agentes inteligentes son programas en las computadoras que buscan información sin operadores humanos. Fuente

Etiquetas semánticas de HTML5

Lo que conseguimos con HTML5, son una serie de etiquetas que nos permiten indicar si un elemento de nuestra web es una barra de navegacion (<nav>), una seccion (<section>), un artículo (<article>), un encabezado (<header>), un píe del contenido (<footer>) o un contenido lateral (<aside>), entre otros.

El uso de estas etiquetas permite que cuando un robot (por ejemplo de un buscador) entre en nuestro sitio, sea capaz de diferenciar entre el contenido relevante del sitio, y el resto del contenido (widgets, menús de navegación, píes de página…), lo que ayuda en el SEO ya que los buscadores pueden interpretar correctamente el contenido importante del sitio.

nav

Define un bloque de enlaces que componen el menú de navegación. Puede usarse más de un bloque de navegación si se necesita. Por ejemplo, puede haber un bloque «nav» con la navegación general del sitio, que contenga los enlaces a las distintas secciones y páginas, y un bloque secundario que contenga enlaces a los distintos apartados de la sección actual.

Más información

section

Define las diferentes secciones de una página. Una sección es una agrupación temática de contenido, como pueden ser, por ejemplo, una introducción, una sección de ultimas noticias y una sección de contacto que estén en nuestra página principal del sitio.

Más información

article

Define una sección de contenido que tiene sentido por si mismo, y es independiente. Por ejemplo, en un blog, cada nuevo articulo que se sube podría ser un elemento «article» de la página.

Cada uno de estos elementos, puede contener su propio «header» y «footer», indicando por ejemplo en el primero el titulo del articulo, y en el segundo la fecha de publicación, sección y tags, de la misma forma que puede contener etiquetas «section» si creemos necesario dividir el contenido en varias secciones.

Los elementos «article» se pueden anidar. Un modo de uso de estos elementos anidados sería para los comentarios de un articulo de un blog. Quedaría de la siguiente forma la estructura:

Más información

header

Define un apartado que puede contener el encabezado del elemento en el que se encuentra. Puede encontrarse dentro de la etiqueta «body», siendo el encabezado de toda la página, dentro de una etiqueta «section», indicando el encabezado de dicha sección, o incluso dentro de la etiqueta «article», indicando el encabezado de un articulo.

Dentro de esta etiqueta es usual ver titulos («h1»,«h2»,«h3»,«h4»,«h5»,«h6»), introducciones al contenido que le sigue, el autor del contenido…

En los encabezados no es raro que queramos tener dos titulos, uno principal, con el titulo en cuestión, y otro algo más largo, ampliando lo dicho por el primero. Para lograr esto usamos la etiqueta «hgroup».

Más información

hgroup

Está etiqueta se utiliza para agrupar varios titulos («h1»,«h2»,«h3»,«h4»,«h5»,«h6») de forma que no den jerarquia al documento.

Hasta ahora, si detrás de un «h1», colgaba un «h2», lo que viniese detrás «colgaría» del «h2» hasta que se encontrase un «h1». En cambio, si los agrupamos bajo un «hgroup«, no jerarquizaran el contenido, sino que a todo el contenido que siga a esta etiqueta se le aplicara los títulos que contenga. Teniendo más importancia los primeros títulos («h1») frente a los siguientes, que se considerarán subtítulos.

Más información

footer

Contiene el píe de la información que contiene la etiqueta padre. Al igual que el «header» puede encontrarse dentro de la etiqueta «body», siendo el píe de toda la página, dentro de una etiqueta «section», indicando el píe de dicha sección, o incluso dentro de la etiqueta «article», indicando el píe de un articulo.

Suele contener información sobre el copyright, documentos vinculados, el autor…

Más información

aside

Define elementos que están relacionado de alguna forma con el contenido, pero no forman parte importante del sitio. Se suele usar para barras laterales, publicidad, grupos de elementos «nav» y otro contenido que esta separado del contenido principal.

Más información