El elemento <figure> representa a una pieza de documento autocontenido que puede encerrar imágenes, gráficos, tablas de referencia, videos, poemas, fragmentos de código, etc. Se dice que es autocontenido, porque si bien es cierto que se relaciona con el flujo principal de la página, su posición es independiente de este, es decir que se puede mover a otra página sin que esto afecte al flujo principal.
De forma opcional, este elemento se puede combinar con el elemento <figcaption> que sirve para insertar un texto con el fin de añadir una explicación al contenido que encierra el elemento <figure>.
Estos elemento no tiene atributos específicos, sino aquellos que son comunes a todos los elementos HTML.
El siguiente ejemplo se muestra a un elemento <figure> que contiene una imagen con su texto, una representación típica de un artículo de un blog o un diario digital, donde el texto se acompaña de una o varias imágenes para proveer información adicional.
<p>Las estrellas de mar forman uno de los grupos de animales marinos más conocidos del fondo marino. Por lo general tienen un disco central y cinco brazos, aunque algunas especies pueden tener muchos brazos más. La superficie aboral o superior puede ser lisa, granular o espinosa, y está cubierta con placas superpuestas. (Fuente: https://es.wikipedia.org/wiki/Asteroidea) </p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Nerr0878.jpg/800px-Nerr0878.jpg"
alt="Estrella de mar" width="304" height="228">
<figcaption>Fig.1 Ejemplares de asteroideos o estrellas de mar.</figcaption>
</figure>Este sería el resultado en el navegador:
See the Pen Untitled by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
