Subscribe

miércoles, 10 de agosto de 2011

div, section y article

Quizás, lo más repetido desde que comenzamos a trabajar con HTML5 es que esta nueva versión nos ofrece la posibilidad de dotar de semántica a los contenidos de una web.
Para ello dos nuevos elementos han aparecido: section y article. Pero, ¿realmente conocemos como y cuando debemos usarlos? Y tenemos claro que lo diferencia del antiguo (y todavía válido) div.
Pues bien, voy a intentar explicar los posibles usos de cada uno y dar los suficientes ejemplos para que lleguéis a comprender mejor las diferencias entre estas etiquetas. 
div 
La etiqueta div sigue funcionando exactamente igual que lo hacía hasta el momento. Lo usaremos para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico. Este etiqueta era la más usada en HTML 4 y nos servía tanto para representar un artículo como para la cabecera o el pie de la página usando tan solo el atributo id para diferenciarlos sin dar significado ninguno a los contenidos.
article 
Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico quienes somos o a qué nos dedicamos. Para que entendáis mejor esta etiqueta, la usaremos para representar el contenido típico que se publica en una RSS. 
Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Este elemento debería tener principalmente un título (un header con un h1-h6) y podría tener un footer (con la fecha de publicación, el autor o cualquier otra información adicional) y un cuerpo con el detalle. 
Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article. 
section 
La etiqueta section es quizás la más difícil de comprender. En principio se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno. 
Bien, vamos a intentar poner ejemplos de uso: 
  • Listado de noticias: Antes hemos comentado que un listado de noticias será un listado de elementos article, pero, ¿cómo representamos este listado? Pues la mejor forma será con la etiqueta section. Este listado quedaría aproximadamente: 
<section>
<header><h1>Listado de noticias</h1></header>
<article><header><h2>Noticia 1</h2></header></article>
<article><header><h2>Noticia 2</h2></header></article>
<article><header><h2>Noticia 3</h2></header></article>
</section>


  • Bloque principal de la página: Imaginaros por ejemplo una portada que tiene una zona destacada en la que se muestra una introducción. Este bloque de contenido podría ser perfectamente un bloque section.
  • Separar elementos dentro de un artículo: Cuando se trata de un artículo muy completo podríamos estructurar la información por secciones. Por ejemplo, un articulo separado en Introducción, Desarrollo y Conclusión estaría formado por 3 section, uno para cada bloque. Igualmente podríamos usarlo para agrupar una galería de imágenes asociada al contenido o incluso un listado de enlaces relacionados directamente con el artículo. 
<article>
<header><h1>Artículo</h1></header>
<section><header><h2>Introducción</h2></header> …TEXTO … </section>
<section><header><h2>Desarrollo</h2></header> …TEXTO … </section>
<section><header><h2>Conclusiones</h2></header> …TEXTO … </section>
<section><header><h2>Galería de imágenes</h2></header> …TEXTO … </section>
</article>


Un aspecto importante de la etiqueta section es que debe tener un título. Tal y como hemos comentado en otros artículos de este blog, la etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle
Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado. 

Si os dedicáis a investigar un poco por ahí veréis como hay opiniones para todos los gustos. Hay quien dice que el elemento section debería ser quien contiene al article, y otros dicen todo lo contrario, que article es quien debe contener a section. Lo cierto es que la documentación oficial no aclara mucho sobre el tema y lo deja abierto a posibles interpretaciones. Solo el tiempo dirá como lo acaba utilizando la gente, pero desde luego, yo creo que realmente ambos están en lo cierto. La etiqueta section abre un gran abanico de posibilidades y nos permite usarlo de muchas maneras, en algunos casos será el padre de article (como por ejemplo en el caso del listado de noticias) y en otros será el hijo de article (como en el caso del articulo fraccionado en bloques). Por lo tanto, pensad antes de usar una etiqueta u otra que tiene más sentido usar en base a la información que estamos representando. 

Espero en un futuro aportar más ejemplos conforme se me vayan ocurriendo. Si queréis aportar vuestra experiencia no dudéis en comentar lo que queráis.

41 comentarios:

Anónimo dijo...

Muy bien explicado. Gracias. Y buen blog.

Anónimo dijo...

Muy bien explicado. Gracias. Y buen blog.

Anónimo dijo...

Pues no has aclarado nada, realmente.

Jimmy Sáenz Rizo dijo...

Excelente explicación, totalmente de acuerdo en que uno puede contener la otro y viceversa. Muchas gracias por tu aporte. Saludos.

Anónimo dijo...

Muchas gracias por tu explicación, me aclaró mucho el panorama.

Anónimo dijo...

Gracias, todo esta claro y era lo que quería saber! :)

Anónimo dijo...

Soy el dueño del blog que me gusta comentarme solo cuando hago una publicacion jejeje..

Anónimo dijo...

¡Oye, chevere publicación! Estaba leyendo el código fuente de algunas páginas web y noté que no hay una norma fija. Gracias por aclarar esto.

José Martínez dijo...

muy buena info... :D

Anónimo dijo...

Muchas gracias :)

Anónimo dijo...

Ehhh.. no se supone que el ARTICLE contiene a la SECTION ...porque así lo plantea la W3C

Anónimo dijo...

Completamente confuso, falta mucha información.

cursos de html5 dijo...

excelente curso de html5, muy al detalle.

Anónimo dijo...

Vaya mierda de explicación, no se aclara.

Anónimo dijo...

me quedo igual

mari paz custodio hdez dijo...

muy buena la pagina

Anónimo dijo...

La explicación está bien, pero ¿los comentarios son todos tuyos?

Sergio Raposo Vargas dijo...

Jajaja este último comentario me ha hecho mucha gracia!! No, los comentarios no son míos, son de gente que ha leído el blog. Si fueran míos tendría un serio problema de doble personalidad, entre los que le gusta la información y los que la critican.

Lamento tener el blog tan parado pero estoy metido en demasiados proyectos.

Gracias a los que les gusta el blog e incluso a quien lo critica, por lo menos se que lo leen

Sergio Raposo Vargas dijo...

Jajaja este último comentario me ha hecho mucha gracia!! No, los comentarios no son míos, son de gente que ha leído el blog. Si fueran míos tendría un serio problema de doble personalidad, entre los que le gusta la información y los que la critican.

Lamento tener el blog tan parado pero estoy metido en demasiados proyectos.

Gracias a los que les gusta el blog e incluso a quien lo critica, por lo menos se que lo leen

Anónimo dijo...

jejejejeje esta super buma la pagina me encanto me ayudo bn a demas esta,muy bn explicado

Anónimo dijo...

Pues me a servido para mi tarea gracias :) que mi profe deja tres tareas por clase X-x , todo con referencias de paso te ago publicidad xD ajajaj
ahora sigo tengo tarea por hacer X_X

Anónimo dijo...

Gracias, me estaba volviendo loca hasta que leí tu post. En algunos sitios meten section dentro de article y en otros alrevés, asique has corroborado lo que me parecía. Muchas gracias!

Mario Del Moral dijo...

breve y directa justo lo que necesitaba para aclararme el panorama de html5. muchas gracias por tu tiempo y esfuerzo

Anónimo dijo...

excelente explicación. me quedó muy claro. muchas graciass

Anónimo dijo...

Muchas gracias por la explicacion. Ahora todo me queda mucho más claro.

Anónimo dijo...

Wow, en verdad la mejor expicación en español que he leido, lo recomendaré para quienes estén aprendiendo HTML5

Carolus dijo...

Valoro positivamente la reflexión de este artículo. Quizá un enlace a la documentación de la w3.org sería muy interesante para avanzar en el aclaramiento de las dudas sobre section, ahí la dejo http://www.w3.org/TR/html5/sections.html#the-section-element

Anónimo dijo...

A día de hoy, sigues resolviendo dudas.

Bien explicado, gracias por tu colaboración

Anónimo dijo...

Bien explicado. Increíble los que dicen que esta explicación es una mierda o que tiene demasiada información. Ni caso.

juan gabriel dijo...

Ps he quedado mas confundido de lo que estaba

Adrian dijo...

Conclusión: Sólo Div tiene una finalidad definida. Section y Article son vapor-ware, dá lo mismo usarlos o no y siempre se los puede reemplazar por Div.

hellmetal91 dijo...

gracios bro me sacaste de una dudota

Unknown dijo...

Excelente comprendí lo que no entendía, gracias!

luvalbia dijo...

Excelente explicación. Muchisimas gracias

Krles dijo...

Pues en w3 sí dan cierta aclaración, ajunque sigue siendo algo confusa:

http://www.w3schools.com/tags/tag_article.asp:

The < article > tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

http://www.w3schools.com/tags/tag_section.asp
The < section > tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Es decir, < article > define un contenido completo en sí mismo, que no debería ser subdividido sin perder contenidos.

En cambio, < section > parece más bien una etiqueta para organizar el texto, sea un artículo o no.

De todas formas, ya podrían afinar más.

Fran Jaba dijo...

Hola, estoy creando una página web con div ocultas y que se muestran y ocultan pal pulsar sobre un botón hasta ahí todo bien. hasta me desplaza el pie de la página cuando es necesario. Pero quiero maquetar la página dejando a derecha e izquierda un margen que va gris mientras que la parte central que contiene texto e imágenes va en blanco. El problema es que cuando me muestra un DIV se desplaza todo hacia bajo, pero solo del dic central, quedándose los de los lados fijo y me queda el espacio gris más arriba en lugar de ajustarse la nuevo tamaño. ¿Cómo puede hacer para que no me pase esto?

Gonzalo Oviedo Lambert dijo...

Se agradece el esfuerzo de crear este blog. Me quedo claro el uso de section y article.
Aunque de forma de programacion, no se donde o que herramientas usan section y article.
Muchas gracias.

kla dijo...

Muy interesante. Felicidades

Anónimo dijo...

654

Anónimo dijo...

vales artaç

Joaquin Trujillo dijo...

y la estructura del div???

Publicar un comentario