Semántica en HTML5 (III): article y section

Escrito por el |

Por primera vez en Hexagonal Alien voy a abordar dos etiquetas semánticas de forma conjunta, el porqué es bien simple, no creo ser capaz de hablar de una sin al menos mencionar la otra, y viceversa. Ambas son etiquetas con amplia discrepancia en su uso, y en ocasiones donde se puede usar una también sería correcto usar la otra.

Me temo, que en esta ocasión, nadie se vaya a quedar a gusto (ni siquiera yo), pues con una especificación tan dada a múltiples interpretaciones, siempre habrá alguien que donde yo digo que es mejor usar article, el preferirá sin ninguna duda section. Así que alejándome de la polémica y como bien dijo Jack (el destripador), vamos por partes.

Lo primero de todo es apoyarnos en la especificación que nos da el W3C (también podría usar la de WHATWG) para las etiquetas section y article. No voy a dar las especificaciones completas, con los enlaces creo que es mas que suficiente, pero de ellas se pueden sacar algunas conclusiones.

El W3C nos dice que article es un elemento independiente y reusable, su contenido por tanto, puede ser usado en cualquier otra parte de nuestro site o incluso en otro site cualquiera sin que pierda su significado ni quede incompleto. Por tanto es muy probable que article tenga como hijos un header, un footer o ambos. Este contenido es muy probablemente objeto de sindicación y su uso habitual bien puede ser para el post de un foro, el artículo de una revista o periódico, la entrada de un blog, y porqué no, un comentario.

De las especificaciones de la W3C lo primero que sacamos en claro, es que section no es un contenedor genérico, si necesitamos un elemento sólo con propósitos estéticos o para conveniencia de un script, para ello ya tenemos div, cosa a tener en cuenta porque hay desarrolladores que piensan que con las etiquetas semánticas el div ha muerto, nada más lejos de la realidad. Un elemento section tiene como propósito agrupar contenido con las misma temática. Por último, un elemento section debe ser identificado mediante un título (generalmente mediante etiquetas h1-h6), si no es necesario un título entonces section no es el elemento adecuado.

Vamos con un ejemplo muy claro de uso conjunto de section y article. La clásica portada de cualquier revista online es la más acertada para usar varias etiquetas section que a su vez contendrán varias etiquetas article. Sería de la siguiente forma:


<section>
 <h1>Última hora</h1>
 <article>
 ...
 </article>
 <article>
 ...
 </article>
 <article>
 ...
 </article>
</section>
<section>
 <h1>Nacional</h1>
 <article>
 ...
 </article>
 <article>
 ...
 </article>
 <article>
 ...
 </article>
</section>
<section>
 <h1>Internacional</h1>
 <article>
 ...
 </article>
 <article>
 ...
 </article>
 <article>
 ...
 </article>
</section>

En Hexagonal Alien, por ejemplo, donde se usa una estructura de presentación de posts más sencilla, no sería correcto usar una estructura como esta, pues se usaría un elemento section sin un título, cosa que como ya hemos visto anteriormente no es correcto, para ello usaremos un contenedor genérico o una etiqueta más apropiada. Vamos ahora con un ejemplo al contrario, un article que contiene varios section. Se podría usar, por ejemplo, para un post en el cual vamos a enumerar una serie de razones para no irse a dormir.


<article>
 <h1>5 razones para no irse a dormir</h1>
 Texto introductorio a las razones que vamos a dar.
 <section>
  <h2>Tu novia, mujer, parienta se ha comprado un picardias</h2>
  ...
 </section>
 <section>
  <h2>Se ha estrenado la nueva temporada de juego de tronos</h2>
  ...
 </section>
 <section>
  <h2>También se estrena la nueva temporada de The Walking Dead</h2>
  ...
 </section>
 <section>
  <h2>Sufres de insomnio</h2>
  ...
 </section>
 <section>
  <h2>Un nuevo post en Hexagonal Alien :-)</h2>
  ...
 </section>
</article>

Para terminar vamos a culminar este post con un último ejemplo. Recuperamos el modelo que usamos en Semántica en HTML5 (II): Footer para crear una web semántica, y añadiremos las etiquetas section o article para completarlo:


<!DOCTYPE html>
<html>
<head>
 ...
</head>
<body>
 <header id="cadecera">
  <img src="logo.gif">
  <p>título del blog</p>
  <form>formulario de búsqueda</form>
 </header>
 <div id="contenido">
  <article class="post"> 
   <header class="encabezado-post">
    <h1>Título del post</h1>
    <time>Fecha de publicación</time>
    <p>Autor del post</p>
   </header>
   <div class="contenido-post">
    ...
   </div>
   <footer class="post-footer">
    nº de comentarios, tags
   </footer>
  </article>
 </div>
 <footer id="footer">
  copyright, condiciones de uso, etc.
 </footer>
</body>
</html>