Introdúcete en HTML5. Reorganizando el sitio (2/2)

Esta es una continuación de la entrada de Introdúcete en HTML5 de ayer.

Actualmente, en HTML4 solemos usar DIVs y muchas veces caemos en la divitis, DIVs para todo como antes hacíamos con las tablas.

Si analizamos una web en HTML4 y analizamos sus clases e IDs vemos que tenemos cabeceras, secciones, footer, etc. En un blog está muy claro.

De hecho el ejercicio anterior fue lo que realizó Opera en 2009 entre miles de URLs aleatorias y vio cuales eran los atributos class e id más utilizados.

Vamos a echar un repaso de las etiquetas que usaremos cada vez más para organizar un sitio web.

<section>

Define secciones de la web, por ejemplo si en la home de mi blog tengo un apartado con información personal, otro con un portfolio y luego los artículos del blog cada una de esas partes irán entre las etiquetas <section></section>.

Un truco para saber lo que son secciones es ver si cada una de esas partes pueden tener un título diferente.

<article>

Pensemos en los artículos de un periódico o un blog y no iremos desencaminados. Un artículo se puede definir como una parte de la página que tiene sentido fuera de su contexto, como si el usuario no pudiera ver nada más de la web que esa parte.

<header>

Actúa semánticamente como una cabecera, bien de la página completa o de secciones, también puede aparecer dentro de articles, por ejemplo los títulos de los posts y sus metadatos pueden ir dentro de headers dentro de artículos.

<footer>

Tal como <header> pero para pies, ya sea de página, secciones o artículos.

<aside>

Para introducir información extra pero no esencial, por ejemplo el autor de un blog.

<time>

Para mostrar una fecha. Con su atributo datetime podemos indicar la fecha en formato legible para una máquina y además con el atributo pubdate podemos indicar la fecha de publicación de un artículo.

<nav>

Para la navegación de un sitio web, dentro irán todos los enlaces para el menú de navegación de la web.

<figure> y <figurecaption>

Para agrupar imágenes (videos, svg, etc. y su leyenda), podéis ver un ejemplo aquí.

Referencias:

• Smashing Book 3.
• HTML5Doctor.
• Mozilla HTML5 Element List.