HTML5: Estructura del documento

En el post anterior hemos visto una breve introducción acerca de HTML5 y de algunas de las mejoras que introduce esta nueva especificación, en este post la idea es ir un paso mas adelante y ver los nuevos elementos que se introdujeron para poder darle una mayor semántica (o sea darle un significado mas fuerte a cada una de las partes) y mejorar la lectura del código (ya que con solo ver el elemento sabemos a que hace referencia).

¿Cuales son esos elementos?

Los nuevos elementos en HTML5 son varios y ofrecen una semántica (un propósito) dentro de nuestro código, algunos de ellos son:

  • Header
  • Nav
  • Section
  • Article
  • Aside
  • Footer
  • Main

Para verlo de forma mas clara la siguiente imagen se pueden ver como se distribuyen los mismos:

nuevos elementos

Header

El header es un elemento que representa un grupo de ayudas para la navegación del contenido, este puede ser usado tanto al comienzo de una pagina como de una sección de contenido (section)

En HTML4 un header se creaba de la siguiente forma:

Mientras que en HTML5 quedaría así:

Ahora veamos como quedaría el header dentro de una sección de contenido:

Nav

El elemento nav representa a un grupo de elemento que se encargan de la navegación. Ademas se recomienda solo su uso para hacer referencia a elementos internos del sitio y no para enlaces externos.

En HTML4 la forma de crear una barra de navegación era usando los elementos ul y li:

En HTML5 se cambia la forma de hacerlo a lo siguiente:

Section

El elemento section o sección de contenidos tiene como fin el agrupar entre elementos que estén relacionados por alguna temática en particular, esto quiere decir que cada una de las secciones debería tener una temática que nos permita inferir que es lo que posee en su interior. Ejemplos de esto podrían ser las secciones de un sitio web: artículos, novedades, etc.

En la vieja especificación de HTML4 si queríamos hacer algo así por lo general se estilaba lo siguiente:

Mientras que en HTML5 podemos hacerlo así:

Article

El elemento article se utiliza para definir contenido que es autónomo e independiente, la idea es que pueda valerse por si mismo sin necesidad de estar relacionado con otro contenido para poder entender el contexto del cual se habla. Ademas este elemento puede ser anidado dentro de un section y viceversa.

Algunos posibles usos de este tipo de elemento podrían ser: mostrar los mensajes de un foro, las entradas de un blog o los comentarios de los usuarios

Veamos como era una posible forma de hacerlo en HTML4:

En HTML5 podemos hacerlo así:

Aside

Este elemento representa una parte de la pagina que esta relacionado con el contenido principal no de forma directa pero si de forma lateral, el mismo se puede utilizar para agrupar contenido específicos e independiente (article).

Algunos usos posibles podrían ser: como barra lateral o un bloque de publicidad.

Un aside en HTML4 se podía considerar como un sidebar o barra lateral y la forma de declararlo podría ser:

En HTML5 las cosas cambian a lo siguiente:

Footer

El footer representa el pie de pagina que al igual que en el caso del header puede ser usado tanto para la pagina como para una sección de contenido.

Para crear este elemento en la vieja especificación de HTML se hacia lo siguiente:

Mientras que con la nueva quedaría así:

Main

El elemento main se utiliza para representar el contenido principal del documento (body) y se utiliza para que los screen readers (lectores de pantalla) u otras tecnologías puedan identificar donde comienza el contenido principal.

Para usar este elemento se deben tener en cuenta lo siguiente:

  • Solo puede existir un main en todo el documento o pagina.
  • No puede ser incluido dentro de un article, aside, footer, header o nav

Veamos como se veía en HTML4:

Con la nueva especificación quedaría así:

Conclusión

Como hemos visto en este post, la nueva especificación de HTML viene a hacer un gran hincapié sobre la semántica de nuestras paginas y brindarle herramientas para que los buscadores puedan indexar mejor nuestra información.

You may also like...

1 Response

  1. ChristianDC dice:

    La verdad muy buen articulo re practico para aprender muy rapido lo nuevo !!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *