fbpx

HTML article

La nueva etiqueta <article> nos permite separar diversos elementos independientes que puedan estar contenidos en un mismo <section>. Puede ser un mensaje de foro, un comentario, un artículo o una entrada en un blog, que permite ser reutilizada o distribuible.

Descripción

¿Cómo puedes diferenciar esta etiqueta de otras? Lo primero es saber que estas unidades de contenido pueden ser completamente independientes del resto del espacio, o sea, no carecen de sentido al ser separadas.

Ahora bien, hay una excepción con respecto a su característica de independencia. Cuando este elemento está anidado a otro elemento <article>, el elemento interior debe estar relacionado con el elemento <article> que está funcionando como padre.

El <article> puede ser usado junto a otras etiquetas como <time>, <header>, <footer> o <adress> que son elementos utilizados por el autor para agregar información adicional, esta forma es muy usada en noticias y artículos de navegación.

Ahora bien, también puede surgir la pregunta de ¿Cómo pueden ser usadas?

Ejemplos

Un ejemplo básico del uso de la etiqueta <article> utilizando un título y dos párrafos que tienen un sentido independiente, el cual le permite ser utilizado por separado.

<article>
  <h1>Lactancia Materna: medida de prevención contra enfermedades</h1>
  <p>Tras largos años de estudios se ha demostrado que la Lactancia Materna Exclusiva es la fuente ideal de todos los requerimientos nutricionales hasta los seis meses de edad, además se ha demostrado que es un factor protector contra enfermedades cardiometabolicas.<p>
  <p>...</p>
</article>

Como segundo ejemplo, simularemos un artículo de un blog, en donde otras etiquetas entran en interacción para dar información adicional.

<article>
  <header>
    <h1>El pie de Limón</h1>
    <p>Publicado <time pubdate datetime="2020-08-11T20:00-04:00">5 meses atrás</time></p>
  </header>
  <p>Es un postre elaborado con crema de limón en una base de masa quebrada y, sobre esto, se coloca una capa de merengue que lo convierten en un postre fresco y muy delicioso. Esta receta es muy conocida en Estados Unidos y en otros países de Latinoamérica. </p>
  <p>...</p>
  <footer>
    <p>© Todos los derechos reservados</p>
  </footer>
</article>

Atributos

Esta etiqueta se caracteriza por tener atributos estándares comunes con los demás elementos, los cuales son llamados “Atributos globales”.



Share This