Etiqueta <figure> de HTML

Definición y uso

<figure> la etiqueta especifica contenido autocontenido, como ilustraciones, gráficos, fotos, listas de código, etc.

Aunque <figure> El contenido del elemento está relacionado con el contenido principal, pero su posición es independiente del flujo principal del contenido. Si se elimina, no debe afectar el flujo del documento.

Consejo:Utilice el elemento <figcaption> Para <figure> Añadir un título a un elemento.

Véase también:

Manual de Referencia de HTML DOM:Objeto Figure

Ejemplo

Ejemplo 1

Utilizar el elemento <figure> para marcar fotos en el documento y el elemento <figcaption> para definir los títulos de las fotos:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figura 1 - Trulli de la región de Puglia, Italia.</figcaption>
</figure>

Prueba por tu cuenta

Ejemplo 2

Establecer estilos para <figure> y <figcaption> utilizando CSS:

<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="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figura 1 - Trulli de la región de Puglia, Italia.</figcaption>
</figure>
</body>
</html>

Prueba por tu cuenta

Atributos globales

<figure> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<figure> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores siguientes por defecto <figure> Elemento:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Prueba por tu cuenta

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admite este elemento.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Notas: La etiqueta <figure> es una nueva etiqueta en HTML 5.