Etiqueta HTML <figure>
La etiqueta <figure> se utiliza para indicar contenido autocontenido. La etiqueta puede contener diagramas, imágenes, ilustraciones, ejemplos de código, etc.
La etiqueta <figure> es uno de los elementos HTML5.
El contenido de la etiqueta <figure> está relacionado con el flujo principal de contenido. Sin embargo, se percibe como una unidad autónoma.
Para agregar un título o explicación al contenido de la etiqueta <figure>, utilizamos la etiqueta <figcaption>. La etiqueta <figcaption> se incluye dentro de <figure> y se coloca como el primer o último elemento hijo. Si <figcaption> es el primer elemento anidado, el contenido se mostrará en la parte superior de la imagen.
Sintaxis
La etiqueta <figure> se utiliza en pares. El contenido se escribe entre las etiquetas de apertura (<figure>) y cierre (</figure>).
Ejemplo de la etiqueta HTML <figure>:
Etiqueta HTML <figure>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>Resultado
Diferencia entre las etiquetas <figure> y <aside>
Ambas etiquetas tienen un comportamiento similar. Sin embargo, existen algunas diferencias. En particular, el elemento <figure> se utiliza para contenido que está directamente relacionado con el contenido principal. La etiqueta <aside> se usa para contenido relacionado "indirectamente". Proporciona infografías, citas destacadas o gráficos para contenido específico.
Atributos
La etiqueta <figure> admite los Atributos Globales y los Atributos de Evento.
Práctica
¿Cuál es la función de la etiqueta <figure> en HTML?