Etiqueta HTML `<figcaption>`

La etiqueta <figcaption> es uno de los elementos HTML5. Se utiliza para agregar un título o explicaciones al contenido de la etiqueta <figure>. La etiqueta <figcaption> se incluye dentro de <figure> y se coloca como el primer o último elemento hijo. Colocarla como primer elemento muestra el título encima del contenido de la figura, mientras que colocarla como último elemento la muestra debajo.

Solo se puede usar una etiqueta <figcaption> dentro del elemento <figure>. Sin embargo, <figure> también puede contener otras etiquetas (la etiqueta <img> o <code>).

Sintaxis

La etiqueta <figcaption> se usa en pares. El contenido se escribe entre la etiqueta de apertura <figcaption> y la de cierre (</figcaption>).

Ejemplo de la etiqueta HTML `<figcaption>`:

Etiqueta HTML <figcaption>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de figcaption

Atributos

La etiqueta <figcaption> admite los Atributos Globales y los Atributos de Eventos.

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

Por defecto, los navegadores renderizan el elemento <figcaption> como un elemento de nivel de bloque. Puedes personalizar su apariencia usando CSS:

css

figcaption {
  font-style: italic;
  color: #555;
  text-align: center;
  margin-top: 5px;
}

Práctica

¿Cuál es la función de la etiqueta HTML <figcaption>?

Proporcionar un título para una imagenProporcionar un encabezado para una sección o páginaAsociar un título con un elemento <figure>Crear viñetas en una lista

Etiqueta HTML <figcaption> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <figcaption>: ​

Resultado ​