¿Cuándo debemos poner “section” y cuándo “article”?

¿Cuándo debemos poner “section” y cuándo “article”?

Saludos desde el área web de Espai.

Me he encontrado que muchos de los alumnos que cursan HTML5/CSS3 confunden el uso del elemento section con el elemento article o viceversa.

Cuándo poner section y cuándo article

Según WHATWG section no es un elemento contenedor genérico, para eso ya tenemos la etiqueta div. El elemento section se usa para representar una parte de un documento o artículo. Una regla general para determinar si su uso es correcto, es numerarlos. Si usando esta numeración el elemento section no pierde sentido entendemos que este es un section realmente.

WHATWG específica que un section debe ser identificado mediante un título que será la etiqueta hija del section, si no tenemos título el validador nos dará una advertencia conforme en el section falta el mismo. En el caso que en el section no sea necesario el título es que el elemento adecuado no es un section.

Con referencia a los artículos (article) la información que encontramos en las especificaciones es:

El article es definido como un componente de la página de contenido independiente, esto implica que esta etiqueta pueda tener un header  y un footer propios.

¿Cómo saber si la etiqueta article es correcta en una posición determinada?

Si el contenido del article  tiene sentido sin tener en cuenta su contexto, en este caso podemos hacer uso de la etiqueta article.

Aquí tenéis unos ejemplos que os pueden ser de utilidad a la hora de diferenciar las etiquetas article y section.

Un artículo sobre manzanas simple:

  <article>
    <h1>Apple</h1>
    <p>La <b>manzana</b> es la fruta de la semilla de la manzana del árbol.</p>
    ...
  </article>

Un artículo sobre manzanas con un encabezado y un pie en el estilo de un blog:

  <article>
    <header>
      <h1>Apple</h1>
      <p>En línea: <time pubdate="pubdate">09/10/2009</time></p>
    </header>
    <p>La <b>manzana</b> es la fruta de la semilla de la manzana del árbol.</p>
    ...
    <footer>
      <p><small>Licencia Creative Commons Reconocimiento-Compartir bajo la misma</small></p>
    </footer>
  </article>

Un artículo con secciones

  <article>
    <h1>Las variedades de manzanas</h1>
    <p>La manzana es la fruta de la semilla de la manzana del árbol.</p>
    <section>
      <h2>Red Delicious</h2>
      <p>Estas manzanas rojas brillantes son los más comunes se encuentran en muchos supermercados.</p>
    </section>
    <section>
      <h2>Granny Smith</h2>
      <p>Estas manzanas verdes jugosas hacen un gran relleno para tartas de manzana.</p>
    </section>
  </article>

También podemos encontrar casos en que la sección sea el elemento contenedor de distintos artículos relacionados:

  <section>
    <h1>Artículos sobre: Frutas</h1>
    <article>
      <h2>Manzana</h2>
      <p>La manzana es la fruta de la semilla de la manzana del árbol.</p>
    </article>
    <article>
      <h2>Naranja</h2>
      <p>La naranja es un híbrido de origen cultivado antiguo, posiblemente entre el pomelo y la mandarina.</p>
    </article>
    <article>
      <h2>Plátano</h2>
      <p>Los plátanos vienen en una variedad de tamaños y colores cuando madura, incluyendo amarillo, púrpura y rojo.</p>
    </article>
  </section>

Espero que después de su lectura  este artículo haya sido de ayuda para todos vosotros.

Un saludo y hasta pronto.

3Comentarios

  • Javier Falcon
    17/09/2021

    ¿Por qué dentro de un Article y quiero poner dos secciones una al lado de otra

    <Section1…
    <Section2…

    Me sale uno debajo del otro y no uno al costado del otro? Gracias!

    • Nishizawa
      14/12/2021

      por que no la has declarado con un «id»
      seria:

      o puedes simplemente poner para section 1:

      y para el 2:

      para crear 2 secciones
      o dos cajas para agregar contenido

  • Cristian Soto
    07/08/2021

    ¡Excelente! Me ayudo muchisimo, muchas gracias!

Escribe un comentario