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:

 

(Visited 50 times, 1 visits today)

You might also like

Comments (2)

  • Juan Carlos Alonso 5 años ago Reply

    Hola Juan Ignacio,

    Enhorabuena y gracias por tus publicaciones, generalmente tan claras y sintetizadas. Eres una gran ayuda para las personas que, como yo, están empezando en este mundo del desarrollo Web.

    Hasta pronto, y mi gratitud de nuevo por tus apuntes y espíritu de compartir.

    Juan Ignacio Alberola Colomo 5 años ago Reply

    Hola Juan Carlos,

    me ha hecho especial ilusión tu comentario pues es el primero que recibo de este tipo. Yo, como tú, a pesar de dedicarme al desarrollo web también estoy empezando así que ese es el espíritu del blog, compartir lo que uno aprende, ve y lee.

    Me alegra que a gente como tú le sirva de ayuda lo que escribo.

    Un abrazo.

Leave a Reply

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.