HTML5 cuenta con un montón de elementos que seguramente has pasado por alto, ya sea por su novedad o porque son confusos a la hora de implementarlos. Es el caso de <article> y <section>. ¿En qué circunstancias se pueden utilizar estos elementos? ¿Cómo se deben utilizar? En este artículo veremos cómo usar estos tags de HTML5 y arrojaremos algo de luz para que comiences a utilizarlos en tus proyectos.
Elemento <section>
Probablemente sea uno de los elementos más ambiguos de HTML5. Y es que, todos nosotros estamos acostumbrados a estructurar nuestro código en base al elemento div. Y el tag section también sirve para dividir bloques de contenido. Pero, ¿en qué se diferencian? ¿Cuándo utilizar section y cuando utilizar div?
Para salir de dudas, vamos a echar un vistazo a la documentación oficial. Si nos vamos a WHATWG, indica que section "representa una sección genérica de un documento o aplicación". De esto podemos extraer que la función del elemento section es la de crear secciones en el contenido, al igual que el elemento div, pero con una excepción. Si leemos más la documentación oficial podremos ver que:
"Cuando necesitas un elemento solo para fines de estilo o por conveniencia a la hora de programar, se alienta a los autores a usar el elemento div en su lugar... El elemento section es apropiado solo si el contenido del elemento se enumerará explícitamente...[...]"
Vale, esto nos abre unas cuantas puertas. Es decir:
- Aunque al elemento section se le puede dar estilo, si queremos personalizar al máxima este apartado, lo ideal es utilizar el elemento div.
- Al igual que el elemento li, el concepto general del elemento section es enumerar el contenido.
Entonces, en casos reales, una de las razones para usar el elemento section es estructurar un listado de posts de un blog, como se puedes ver en el siguiente fragmento de código:
<div class="blog">
<section class="post">
<h2 class="post-title">Titulo del post</h2>
<p class="post-excerpt">Esta es la descripcion del post</p>
</section>
<section class="post">
<h2 class="post-title">Titulo del post</h2>
<p class="post-excerpt">Esta es la descripcion del post</p>
</section>
<section class="post">
<h2 class="post-title">Titulo del post</h2>
<p class="post-excerpt">Esta es la descripcion del post</p>
</section>
</div>
Ojo, esto es solo un ejemplo. Puedes utilizar el elemento section para otros propósitos.
Elemento <article>
El elemento en sí se explica por sí mismo, pero veamos cómo lo describe la documentación oficial:
"Una composición autónoma en un documento, página, aplicación o sitio y que, en principio, es distribuible o reutilizable de forma independiente. Esto podría ser una publicación en un foro, una revista o un artículo de periódico, una entrada de blog, un comentario enviado por un usuario o un widget, o cualquier otro elemento de contenido independiente".
De la explicación anterior, podemos deducir que el elemento article se recomienda exclusivamente para estructurar artículos, especialmente articulos que es probable que compartamos, como los posts de un blog, el contenido de una página o las publicaciones de un foro.
En el siguiente ejemplo puedes ver cómo ponerlo en práctica:
<article class="post">
<header>
<h1>Este es el titulo de post</h1>
<div class="post-meta">
<ul>
<li class="author">Nombre del autor</li>
<li class="categories">Categoria 1</li>
</ul>
</div>
</header>
<div class="post-content">
Este es el contenido del post.
</div>
</article>
Además, el elemento article se puede usar junto con al elemento section, por lo que el artículo se puede dividir en varias secciones con el elemento section cuando el caso sea razonable, como en el ejemplo que puedes ver a continuación:
<article class="post">
<header>
<h1>Este es el título del post</h1>
<div class="post-meta">
<ul>
<li class="author">Nombre del autor</li>
<li class="categories">Categoria 1</li>
</ul>
</div>
</header>
<div class="post-content">
<section>
<h2>Este es un subtitulo</h2>
Descripción de esta sección
</section>
<section>
<h4>Esto es otro subtitulo</h4>
Descripción de esta sección
</section>
</div>
</article>