Diferencias entre div, section y article

Cuando empecé a estudiar HTML5 me vi también en la tesitura de diferenciar div, section y article. Aunque no fue sencillo, tampoco fue demasiado complicado entender cuáles son los detalles que marcan la diferencia entre unos y otros.

Básicamente está en la carga semántica que le queramos dar al contenido. ¿Cuándo usamos un div, un section o un article?

  • Usaremos article para representar cualquier información que tenga sentido propio por si misma y sea propensa a la reutilización, por ejemplo, mediante sindicación. Un ejemplo: un post de un blog, el resumen de ese post en una portada, un hilo en un foro, un comentario…
  • Usaremos section para agrupar contenido relacionado. Puede servirnos para enmarcar un conjunto de artículos, o incluso nuevas y diferentes secciones, o artículos que se dividan en secciones… la variedad es infinita.
  • div no tiene ninguna intención semántica, es un simple “agrupador” de contenido que nos ayudará a pintarlo con CSS.

Imaginemos un documento. ¿Qué es un documento al fin y al cabo? Una gran cantidad de información. Esta viene divida en secciones, una forma de ayudarnos a entender mejor esta información. Y las secciones pueden (o no) estar divididas en más secciones, que aglutinarán el contenido de nuestro documento (los artículos). Estos además, si su complejidad lo requiere, podemos dividirlos en más secciones y así, ad infinitum. Por compararlo a algo estaríamos hablando del cuerpo humano hasta llegar al nivel de detalle molecular (un cuerpo tiene brazos, el brazo tiene músculos, los músculos células, etc…).

En el artículo anterior puedes ver cómo quedaría el loop de WordPress: una sección para indicar contenido relacionado (los post) y dentro de cada post una sección para aglutinar más contenido relacionado (los comentarios).

¿A que es sencillo?

Un comentario en “Diferencias entre div, section y article

  1. me parece muy buena tu explicación vas al punto sin generar confusiones, me ha servido de mucho, sobre todo para explicarles a mis alumnos. Doy clases en una escuela de Gobierno. Gracias por tu aportacion en la Era de la Información

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>