La etiqueta <figure> en HTML se usa para agregar contenido independiente como ilustraciones, diagramas, fotos o listas de códigos en un documento. Está relacionado con el flujo principal, pero se puede usar en cualquier posición de un documento y la figura va con el flujo del documento y, si se elimina, no debería afectar el flujo del documento. Esta etiqueta es nueva en HTML5.
Sintaxis:
<figure> Image content... </figure>
Atributos: contiene principalmente dos atributos que se enumeran a continuación:
- img src: se utiliza para agregar una fuente de imagen en el documento.
- figcaption: Se utiliza para establecer el título de la imagen.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to specify self-contained
content using HTML?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
How to specify self-contained
content using HTML?
</h2>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
alt="Geeks" width="304"
height="228">
<figcaption>Geeks logo</figcaption>
</figure>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 6.0
- Borde 9.0
- Firefox 4.0
- Safari 5.0
- Ópera 11.1