Cómo personalizar enlaces y descripciones emergentes en Markdown

El editor Markdown soporta sintaxis estándar de enlaces y, mediante HTML en línea, una serie de mejoras — descripciones emergentes para pasar el cursor de texto, estilo de enlaces, apertura de enlaces en nuevas pestañas e iconos o emojis personalizados. Este artículo cubre todas estas técnicas.

Cuándo usar estas técnicas

Enlaces ancla internos — ayudan a los lectores a saltar a una sección específica dentro de un artículo largo sin tener que desplazarse.
Enlaces entre artículos — conecta artículos relacionados en tu base de conocimientos para guiar a los lectores a través de un tema.
Descripciones — explica abreviaturas, términos técnicos o detalles opcionales en línea sin saturar la página.
Enlaces con estilo — utiliza texto de enlace en negrita o cursiva para llamar la atención sobre referencias importantes.
Abrir en una pestaña nueva — mantén a los lectores en el artículo actual mientras les permite abrir una referencia en segundo plano.
Iconos y emojis — añade señales visuales a señales, etiquetas o indicadores de estado.

Referencia rápida

Objetivo	Sintaxis
Enlace interno de ancla	`[Link text](#heading-slug)`
Enlace entre artículos	`[Link text](../article-slug)`
Enlace con la descripción emergente	`[Link text](#section "Tooltip text")`
Texto en negrita del enlace	`[Bold text](url)`
Texto de enlace en cursiva	`[_Italic text_](url)`
Abrir en una pestaña nueva	`<a href="url" target="_blank">Link text</a>`
Coloca la descripción emergente del cursor sobre el texto	`<span title="Full term">Abbreviation</span>`
Emoji en línea	Pega directamente — 📌 ⚠️ ✅
Icono en línea desde la URL	`<img src="icon-url" width="16" height="16"> Label`

Cómo añadir enlaces en Markdown

Enlaces ancla internos

Un enlace ancla interno lleva a los lectores a un encabezado específico dentro del mismo artículo.

Añade un encabezado en tu artículo. Por ejemplo:
```
## How it works
```
Crea el enlace usando este patrón:
- Texto de enlace dentro de corchetes [ ]
- # seguido del texto del encabezado entre paréntesis ( )
- Convierte el encabezado a minúsculas y reemplaza los espacios por guiones
```
[Jump to How it works](#how-it-works)
```
Cuando un lector hace clic en este enlace, se le lleva directamente a la ## How it works sección.

CONSEJO PROFESIONAL

Los enlaces ancla son insensibles a mayúsculas y minúsculas y los espacios se convierten automáticamente en guiones. Elimina cualquier carácter especial del encabezado antes de construir la babosa ancla.

Enlaces entre artículos

Para enlazar a otro artículo en tu base de conocimientos, utiliza el prefijo ../ del artículo que precede para mover un nivel desde la ubicación actual del artículo.

[Go to Getting Started](../getting-started)

Este enlace sube un nivel respecto al artículo actual y abre el Getting Started artículo.

Añadir una descripción emergente a un enlace

Añade una descripción emergente que aparezca al pasar el cursor colocando el texto de la descripción entre comillas después del objetivo del enlace, dentro de los paréntesis.

[Troubleshooting guide](#troubleshooting "Click to view troubleshooting section")

Al pasar el cursor sobre el enlace se muestra: Haz clic para ver la sección de resolución de problemas.

Texto de enlace de estilo

Aplica formato en negrita o cursiva al texto de enlace envolviendo el texto dentro de los corchetes con la sintaxis estándar de Markdown.

[**Important update**](../release-notes)
[_Read the guide_](../setup-guide)

Markdown editor showing a bold link and an italic link rendered in the article preview.

Abrir un enlace en una nueva pestaña

Por defecto, los enlaces de Markdown se abren en la misma pestaña. Usa una etiqueta HTML <a> para target="_blank" abrir el enlace en una pestaña nueva en su lugar.

<a href="https://docs.document360.com/docs/getting-started" target="_blank">Go to Getting Started</a>

Cómo añadir descripciones emergentes de hover al texto

Utiliza la etiqueta HTML <span> con un title atributo para mostrar una descripción emergente cuando un lector se queda suspendido sobre cualquier palabra o frase, no solo enlaces.

<span title="display-text">term</span>

Ejemplo — amplía una abreviatura de hover:

<span title="Search Engine Optimization">SEO</span>

Pasar el cursor sobre pantallas SEO : Optimización para motores de búsqueda.

Markdown editor showing the span title code snippet for the SEO tooltip example.

Resultado:

Rendered article showing the SEO abbreviation with a tooltip displaying Search Engine Optimization on hover.

Cómo añadir iconos y emojis

Uso de emojis

Copia y pega emojis directamente en tu contenido. Se renderizan en línea sin ninguna sintaxis adicional.

📌 Important note
⚠️ Caution
✅ Completed

Uso de iconos de una URL

Usa una etiqueta HTML <img> para insertar un icono desde una URL externa en línea con tu texto.

<img src="https://img.icons8.com/color/48/000000/info.png" width="16" height="16"> Information

Sustituye la src URL, width, height, y etiqueta el texto por los valores que requieres.

Markdown editor showing an inline icon rendered next to text using an HTML img tag with an external URL.

Mejores prácticas

Utiliza texto descriptivo del enlace — evita "haz clic aquí" o "leer más". Utiliza texto que indique a los lectores a dónde va el enlace, como "Guía para empezar" o "Referencia API".
Prueba enlaces ancla después de editar encabezados — si renombras un encabezado, cualquier enlace anclaje que apunte a él se romperá. Actualiza el slug en todos los enlaces que hagan referencia al encabezado.
Utiliza descripciones emergentes para abreviaturas, no definiciones — solo se leen en el paso del cursor y no son accesibles para todos los usuarios. Para definiciones esenciales, incluye la explicación en el texto principal.
Mantén el uso consistente de emojis e iconos — acorda un pequeño conjunto de iconos o emojis para tu base de conocimientos (por ejemplo, ⚠️ para advertencias, ✅ pasos completados) y úsalos de forma consistente en los artículos.

Documentation Index