Section Article or Div?

div_section_article.md

Section, Article o Div?

El Tag de <section></section> y el Tag de <article></article> llegaron a HTML5 como una forma de maquetar información o contenido, de una manera más significativa que el ya conocido <div></div>. En base a ésto nos vienen las siguientes preguntas:

• Cuándo es preferible ocupar estos nuevos elementos?
• Cuándo es preferible ocupar nuestro querido el elemento div?

Div

• El elemento <div></div> es el elemento con un objetivo más general. No tiene ningún significado especial. Su propósito es dar un contenido a un bloque que no está semánticamente relacionado. Se debe utilizarse con moderación.
• El elemento div, por lo tanto, se utiliza principalmente para el contenido del grupo para la orientación con CSS. Por ejemplo, como un recipiente de estilo para otros elementos.

Ejemplo:

<div class="modal-content">
    <section class="modal">
        <h1>Modal Title</h1>
        <p>Text goes here</p>
    </section>
</div>

• Recomendación del W3C -- Se les recomienda utilizar el elemento div como último recurso.

Section

• El elemento <section></section> es un poco más específico que un <div></div>. Se aplica a una sección genérica de contenido que se pueden agrupar de manera semánticamente significativa.
• Debido a que el contenido de un <section> son significativos cuando se agrupan, deben poseer un "tema" y este se debe definir mediante la inclusión de un elemento de partida dentro del elemento, a menudo inmediatamente después de la etiqueta de apertura.

Ejemplo:

<section class="newsletter">
  <h1>Subscribe to the Newsletter</h1>
  <form> <!-- ... --> </form>

• Recomendación del W3C -- Una regla general es que el elemento de sección es adecuada sólo si el contenido del elemento se declara explícitamente en el contorno del documento.

Article

• El elemento <article></article> es aún más específico que una <section></section>. También se aplica a una sección de contenido que estan semánticamente relacionadas, y también debe tener un título. Sin embargo, esta sección del contenido debe ser, además, "autónomo". Esto significa que el contenido de un article debería ser capaz de ser aislado del resto de la página y aún así ser significativa.
• Uno de los propósitos más comunes para un <article> está relacionada con marcar contenidos para la asociación. Por ejemplo, marcando una entrada de blog.

Ejemplo:

<article class="post">
  <h1>Article Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam...</p>

Entonces... Cómo utilizar y Cuándo??

• Si el contenido dentro del elemento no está semánticamente relacionada, utilizar <div></div>.
• Si el contenido semánticamente relacionada también es capaz de ser autónomo, utilizar <article></article>>.
• De lo contrario, utilice <section></section>.

Informacion extraida desde bitsofco.de