El elemento <figcaption> representa un título o leyenda para el contenido de un elemento <figure>, el cual representa a un trozo de documento autocontenido que se usa habitualmente para encerrar imágenes, gráficos, tablas de referencia, videos, poemas, fragmentos de código, etc.
Algo importantes es que ;a presencia del elemento figcaption dentro de <figure> es opcional, pero si está presente, sólo puede haber uno y debe estar ubicado al comienzo o al final del elemento figure al cual pertenece.
El elemento <figcaption> debe ser hijo directo de un elemento <figure>, que puede contener imágenes, ilustraciones, diagramas o cualquier otra representación gráfica. Aquí tienes un ejemplo básico:
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Esta es la descripción de la imagen.</figcaption>
</figure>Aquí tienes un ejemplo más completo de una página HTML que incluye el uso de <figure> y <figcaption>:
<header>
<h1>Galería de Imágenes</h1>
</header>
<main>
<figure>
<img src="paisaje.jpg" alt="Un hermoso paisaje montañoso">
<figcaption>Un hermoso paisaje montañoso al atardecer.</figcaption>
</figure>
<figure>
<img src="ciudad.jpg" alt="Una vibrante ciudad moderna de noche">
<figcaption>Una vibrante ciudad moderna iluminada por la noche.</figcaption>
</figure>
<figure>
<img src="cielo.jpg" alt="Un cielo estrellado">
<figcaption>Un magnífico cielo estrellado en una noche clara.</figcaption>
</figure>
</main>
<footer>
<p>© Mi Galería de Imágenes</p>
</footer>Consejos útiles
Aquí tienes algunos tips para aprovechar al máximo el uso de <figcaption>:
- Asegúrate de que la descripción que coloques en <figcaption> esté realmente conectada con la imagen. Esto hace que la experiencia del usuario sea más coherente.
- Aunque el <figcaption> ayuda a brindar contexto, no olvides el atributo alt en tus imágenes. Es crucial para ofrecer la información básica a quienes utilizan tecnologías de asistencia.
- Usa CSS para darle un toque especial. Un buen diseño puede mejorar la apariencia general de tu sitio.
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
