Cómo agregar leyendas de imagen con 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í:

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í:

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.