Elemento article

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento article es un contenedor de bloques de contenido que se consideran independientes del sitio web y pueden, por lo tanto, ser vistos, reutilizados y distribuidos por separado, como por ejemplo, en la sindicación. Puedes encontrar habitualmente a este elemento encerrando artículos, entradas de blogs o mensajes de un foro.

Cuando dos o más de estos elementos están anidados, se supone que el elemento article interior guarda relación con el elemento article que actúa como padre. Este podría ser el caso de una entrada de blog (siendo en sí misma un article), donde cada comentario puede estar encerrado por un elemento article.

El elemento article puede ser utilizado en conjunto con otros elementos como header, footer y time para agregar información acerca de su contenido. Esta información puede ser utilizada, por ejemplo, por navegadores o lectores de noticias.

No debes confundir los elementos article y section. El elemento article tiene un mayor significado e implica que sus contenidos pueden ser tratados independientemente del documento que los contiene.

Ejemplos

El siguiete ejemplo muestra un uso básico del elemento article. Dentro de éste, podemos ver únicamente un título y un par de párrafos. Sin embargo, este contenido califica como independiente y puede ser tratado por separado y aún tener sentido.

<article>
  <h1>Organización Internacional para la Estandarización</h1>
  <p>La Organización Internacional para la Estandarización conocida como ISO, es un cuerpo internacional de establecimiento de estándares compuesto por representantes de varias organizaciones nacionales de estándares.</p>
  <p>...</p>
</article>

En nuestro segundo ejemplo, simularemos una entrada en un blog. Aquí, agregaremos algunos elementos más como header, footer y time y veremos como trabajan conjuntamente para proveer más información acerca del artículo.

<article>
  <header>
    <h1>La cocina china</h1>
    <p>Publicado <time pubdate datetime="2014-03-28T20:00-04:00">2 meses atrás</time></p>
  </header>
  <p>La cocina china incluye estilos originarios de diversas regiones de China, así como de personas chinas en otras partes del mundo. La historia de la cocina en China se remonta a cientos de años atrás y ha cambiado de período a período y en cada región de acuerdo al clima, las modas imperiales, y la preferencia local.</p>
  <p>...</p>
  <footer>
    <p>&copy; Todos los derechos reservados</p>
  </footer>
</article>

Finalmente, simularemos una entrada de un blog que ha recibido un comentario. El comentario, apto para la sindicación o lectura independiente, guarda relación con el elemento article que es su padre.

<article>
  <h1>El tiempo pasa</h1>
  <p>Era una fría mañana, pero el saber que ella estaba a salvo y volviendo a casa me dió la fuerza para levantarme...</p>
  <p>...</p>
  <article>
    <p><b>Mark</b>: Los seres humanos sólo extrañamos las cosas buenas que tenemos cuando ya no las tenemos más...</p>
  </article>
</article>

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.

X

Estás buscando un lugar para alojar tu próximo sitio? Puedo ayudarte con eso!