HTML <article> Tag

Ultima actualización en
sábado 14º may. 2022

El elemento artículo es la oportunidad perfecta para que el desarrollador incluya una pieza de contenido que estará separada del resto del contenido.

Definición y uso

La <article> etiqueta especifica contenido independiente e independiente. Puede ser una publicación en redes sociales, un comentario de un usuario, una noticia o incluso una publicación de blog.

Tres artículos con contenido independiente y autónomo.

	<article>
  <a href="/html-section-tag">
    <h2>HTML <section> Tag</h2>
    <div>
      <time> 13 de mayo de 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-lang">
    <h2>HTML lang Attribute</h2>
    <div>
      <time> 12 de mayo de 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-audio-tag">
    <h2>HTML Audio Tag</h2>
    <div>
      <time> 11 de mayo de 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>
	

Nota: El <article>elemento no se representa como nada especial en un navegador.

Es importante saber que si tenemos un artículo con contenido largo, entonces podemos usar secciones dentro del elemento del artículo para romper lógicamente el contenido.

	<!--article comenzar-->

<article>
  <h1>Hola mundo</h1>
  <section>
    <h2>Hola desde California</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Hola desde London</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Hola desde Austria</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
</article>

<!--article fin-->
	

Como puede ver en el ejemplo anterior, el elemento de artículo puede tener muchos elementos de sección.

Soporte del navegador

Los números de la tabla especifican la primera versión del explorador que admite completamente el elemento.

Elemento Chrome Edge Mozilla Safari Opera
<article> 6.0 9.0 4.0 5.0 11.1

Nota Tenga en cuenta que si el contenido es autónomo, prefiera usar <article> la etiqueta . Puede usar CSS para aplicar estilo al <article> elemento .

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán el <article> elemento con los siguientes valores predeterminados.

	article {
  display: block;
}
	
article about html
articles on html
article in html
article on html
articles about html
article tags html
article tags
element article article element
article header
article html tag
article tag html
html article tag html tag article
article elements