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.

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;
}