Etiqueta HTML <figcaption>


Ejemplo

Use un elemento <figure> para marcar una foto en un documento y un elemento <figcaption> para definir un título para la foto:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Más ejemplos de "Pruébelo usted mismo" a continuación.


Definición y uso

La <figcaption>etiqueta define un título para un elemento <figure> .

El <figcaption>elemento se puede colocar como el primer o último hijo del elemento <figure>.


Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.

Element
<figcaption> 8.0 9.0 4.0 5.1 11.0

Atributos globales

La <figcaption>etiqueta también es compatible con los atributos globales en HTML .


Atributos de eventos

La <figcaption>etiqueta también es compatible con los atributos de eventos en HTML .



Más ejemplos

Ejemplo

Use CSS para diseñar <figura> y <figcaption>:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

</body>
</html>

páginas relacionadas

Referencia HTML DOM: Objeto Figcaption


Configuración predeterminada de CSS

La mayoría de los navegadores mostrarán el <figcaption>elemento con los siguientes valores predeterminados:

figcaption {
  display: block;
}