Etiqueta HTML <article>
The <article> tag is used to define logical blocks on a page. W3docs HTML tutorial explains how to use the HTML <article> tag with syntax, examples.
La etiqueta <article> es uno de los elementos de HTML5. Se utiliza para definir contenido independiente y autocontenido. Un artículo debe tener su propio significado y poder diferenciarse fácilmente del resto del contenido de la página web.
El elemento <article> puede incluir:
- entrada de blog
- publicación en un foro
- noticias
- comentario
En el caso en que el elemento <article> esté anidado, el elemento interno representa un artículo relacionado con el elemento externo.
Puedes proporcionar la información del autor del elemento <article> con el elemento <address>. Esto se aplica a cada <article> de forma independiente, incluidos los anidados.
Se pueden utilizar varias etiquetas <article> en un solo documento HTML.
Puedes usar elementos de encabezado (<h1> a <h6>) dentro de la etiqueta <article> para estructurar su contenido. Cada <article> puede comenzar con su propio encabezado <h1>.
La fecha y hora de publicación de la etiqueta <article> se pueden describir utilizando un elemento <time> con un atributo datetime.
Sintaxis
La etiqueta <article> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<article>) y cierre (</article>).
Ejemplo de la etiqueta HTML <article>:
Ejemplo de la etiqueta HTML <article>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <article> dentro de la etiqueta HTML <section>:
Artículo sobre flores con la etiqueta article|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Articles about flowers</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
<article>
<h2>Lilies</h2>
<p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
</article>
</section>
</body>
</html>Atributos
La etiqueta <article> admite los Atributos globales y los Atributos de eventos.
Cómo dar estilo a una etiqueta HTML <article>
article {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}Práctica
¿Cuál es la funcionalidad de la etiqueta HTML <article>?