Cómo agregar leyendas de imagen con Markdown

En este tutorial aprenderás a agregar leyendas a imágenes usando Markdown

Markdown no te ofrece ninguna solución a la hora de agregar una leyenda a una imagen. Una leyenda es una breve descriptión de la imagen que se suele agregar al pie de la misma.

Como alternativas podrás simular una leyenda agregando algo de texto justo debajo de la imagen. Otra alternativa consiste en usar HTML siempre y cuando tu editor lo soporte.

Agrega la leyenda con Markdown

Si la aplicación que usas no soporta HTML, la opción que te queda es agregar la imagen y justo debajo el texto de la leyenda en cursiva. Sin embargo, si visualizas esta leyenda en un navegador, puede que no sea interpretada como tal por los buscadores.

En el siguiente ejemplo agregamos una imagen y una pequeña descripción justo debajo a modo de leyenda:

![Mi perro Zar](https://edulazaro.com/img/zar.jpg)
*Una foto de mi perro Zar.*

El código Markdown anterior se renderizará así:

Mi perro Zar
Una foto de mi perro Zar.

Agrega la leyenda con HTML

Si tu editor o aplicación soporta HTML, lo recomendable es que uses la sintaxis HTML. Para agregar una leyenda con HTML debes usar la etiqueta figure y agregar la imagen en su interior. Justo después de la imagen debes usar la etiqueta figcaption para insertar la leyenda de la misma.

En el siguiente ejemplo insertamos la imagen entre la etiqueta de apertura <figure> y la de cierre </figure>. Para insertar la imagen usamos la etiqueta img, estableciendo su origen o enlace mediante el atributo src. Tras agregar la imagen, redactamos la leyenda entre la etiqueta de apertura <figcaption> y la de cierre </figcaption>:

<figure>
    <img src="https://edulazaro.com/img/zar.jpg" alt="Mi perro Zar"/>
    <figcaption>Una foto de mi perro Zar.</figcaption>
</figure>

Cuando se renderice el código HTML anterior, deberías ver algo así:

Mi perro Zar
Una foto de mi perro Zar.

Además, si el uso de CSS está soportado, también puedes aplicar estilos a la etiqueta figure, mostrándola en algún color determinado, de forma que parezca un marco.

Esto ha sido todo. Espero que te haya resultado útil.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.

para estar al día con mi contenido. 😊