Etiqueta HTML <article>

Definición y uso

<article> La etiqueta define un contenido independiente y autónomo.

Un artículo debe poder entenderse por sí solo y puede distribuirse independientemente del sitio completo.

<articel> Las fuentes potenciales del elemento incluyen:

  • Publicaciones en foros
  • Artículos de blog
  • Noticias
  • Comentarios de usuarios

Nota:En el navegador,<article> El elemento en sí no presenta ningún estilo especial. Sin embargo, puedes usar estilos CSS para estilizar <article> Elemento (véase el siguiente ejemplo).

Véase también:

Manual de Referencia del DOM HTML:Objeto Article

Ejemplo

Ejemplo 1

Tres artículos independientes y autónomos:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome es un navegador web desarrollado por Google, lanzado en 2008. Chrome es el navegador web más popular del mundo hoy en día!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox es un navegador web de código abierto desarrollado por Mozilla. Desde enero de 2018, Firefox ha sido el segundo navegador web más popular.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge es un navegador web desarrollado por Microsoft, lanzado en 2015. Microsoft Edge reemplazó a Internet Explorer.</p>
</article>

Prueba por ti mismo

Ejemplo 2

Configura la estilo de los elementos <article> con CSS:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>Los Navegadores Más Populares</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome es un navegador web desarrollado por Google, lanzado en 2008. Chrome es el navegador web más popular del mundo hoy en día!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox es un navegador web de código abierto desarrollado por Mozilla. Desde enero de 2018, Firefox ha sido el segundo navegador web más popular.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge es un navegador web desarrollado por Microsoft, lanzado en 2015. Microsoft Edge reemplazó a Internet Explorer.</p>
  </article>
</article>
</body>
</html>

Prueba por ti mismo

Atributos globales

<article> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<article> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores siguientes por defecto <article> Elemento:

article {
  display: block;
}

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admitió este elemento.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1