Etiqueta HTML `<article>`

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>

html

<!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>

Try it Yourself »

Resultado

article example

Ejemplo de la etiqueta HTML `<article>` dentro de la etiqueta HTML `<section>`:

Artículo sobre flores con la etiqueta article|W3Docs

html

<!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>

Try it Yourself »

Atributos

La etiqueta <article> admite los Atributos globales y los Atributos de eventos.

Cómo dar estilo a una etiqueta HTML <article>

css

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

Práctica

¿Cuál es la funcionalidad de la etiqueta HTML <article>?

Define una sección en un documento.Define un hipervínculoEspecifica contenido independiente y autocontenido.Marca el inicio de una página web.Se utiliza para incrustar multimedia como audio, video, etc. en un documento HTML.

Etiqueta HTML <article> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <article>: ​

Resultado ​

Ejemplo de la etiqueta HTML <article> dentro de la etiqueta HTML <section>: ​

Atributos ​