Etiqueta article

La etiqueta article está destinada a bloques independientes y autónomos del sitio, que pueden ser utilizados como una página independiente.

Por ejemplo, si tienes un sitio web con artículos, el artículo se puede colocar en esta etiqueta. Si tienes comentarios de usuarios, cada uno de estos comentarios se puede colocar en esta etiqueta.

Además, si tienes la etiqueta main para el contenido del sitio, entonces article puede ubicarse dentro de main, pero no al revés.

Ejemplo

Diseñemos el texto del artículo en la etiqueta article:

<div id="wrapper">
	<header>
		...
	</header>
	<main>
		<article>
			<h1>Encabezado</h1>
			<p>
				texto
			</p>
			<p>
				texto
			</p>
		</article>
	</main>
	<footer>
		...
	</footer>
</div>

Ejemplo

Diseñemos las publicaciones en las etiquetas article:

<div id="wrapper">
	<header>
		...
	</header>
	<main>
		<h1>Nuevas publicaciones</h1>
		<article>
			<h2>Publicación 1</h2>
			<p>
				texto
			</p>
			<p>
				texto
			</p>
		</article>
		<article>
			<h2>Publicación 2</h2>
			<p>
				texto
			</p>
			<p>
				texto
			</p>
		</article>
	</main>
	<footer>
		...
	</footer>
</div>

Ver también

etiqueta section,
que agrupa bloques del sitio
etiqueta header,
que define la parte superior del sitio
etiqueta footer,
que define la parte inferior del sitio
etiqueta main,
que define la parte principal del sitio
etiqueta nav,
que define el menú principal del sitio
etiqueta aside,
que define la parte secundaria del sitio