Imágenes y Enlaces en Markdown
La inclusión de hipervínculos e imágenes enriquece los documentos técnicos y permite conectar repositorios, recursos externos y documentación de arquitectura.
1. Enlaces e Hipervínculos #
Sintaxis Básica #
Un enlace se construye con el texto visible entre corchetes [] seguido inmediatamente de la URL de destino entre paréntesis ():
1[Documentación Oficial de Markdown](https://www.markdownguide.org)
- Resultado visual:
Enlaces con Título Emergente (Tooltip) #
Puedes añadir un texto flotante que aparece cuando el usuario pasa el ratón sobre el enlace escribiéndolo entre comillas dentro del paréntesis:
1[Repositorio de Node.js](https://nodejs.org "Entorno de ejecución de JavaScript")
- Resultado visual:
Enlaces de Referencia #
Para mantener los párrafos limpios cuando las URLs son muy largas, puedes definir el enlace con una clave y declarar la URL al final del documento:
1Consulta la [Guía de Contribución][contrib-link] antes de enviar un Pull Request. 2 3[contrib-link]: https://github.com/org/repo/blob/main/CONTRIBUTING.md "Guía oficial"
2. Inserción de Imágenes #
La sintaxis para imágenes es idéntica a la de enlaces, anteponiendo un signo de exclamación (!):
1
1
- Resultado visual:
Importancia del Texto Alternativo (
alt): El texto dentro de los corchetes![...]es esencial para la accesibilidad (leído en voz alta por lectores de pantalla para personas con discapacidad visual) y para SEO técnico.
3. Imágenes Enlazadas (Imágenes con Link) #
Puedes anidar la sintaxis de imagen dentro de un enlace para que al pulsar la imagen se abra una página:
1[](https://github.com)
- Resultado visual:
Resumen del tema
Conceptos clave #
- Hipervínculos: sintaxis
[texto](url "título opcional")para enlazar páginas o anclas internas. - Inclusión de Imágenes: sintaxis
donde el texto alternativo es crucial para la accesibilidad (lectores de pantalla) y SEO. - Imágenes Enlazadas: anidación
[](url_destino)para convertir una imagen en un enlace interactivo.
Qué debes recordar #
La diferencia entre un enlace y una imagen es el signo de exclamación inicial !; incluye siempre texto descriptivo en los corchetes ![alt] para maximizar la accesibilidad.