Cómo crear enlaces a secciones internas con Markdown
En este tutorial aprenderás a crear enlaces a secciones internas usando Markdown
Cuando trabajas con documentos extensos, resulta muy práctico poder enlazar a una sección concreta dentro del mismo documento. De este modo, los lectores podrán saltar directamente a la parte que les interese sin tener que desplazarse por todo el contenido.
Crea enlaces internos con Markdown
Los encabezados de Markdown generan automáticamente un identificador (o anchor) basado en el texto del encabezado. Para enlazar a un encabezado, usa la sintaxis de enlace habitual apuntando a # seguido del identificador.
El identificador se genera convirtiendo el texto del encabezado a minúsculas y reemplazando los espacios por guiones -.
En el siguiente ejemplo creamos un enlace a un encabezado del mismo documento:
## Mi sección importante
Contenido de la sección...
Vuelve a [Mi sección importante](#mi-sección-importante).El enlace anterior llevará al lector directamente al encabezado "Mi sección importante" dentro del mismo documento.
Reglas para generar el identificador
A continuación se muestran las reglas más habituales para convertir un encabezado en un identificador:
- El texto se convierte a minúsculas
- Los espacios se reemplazan por guiones
- - Los caracteres especiales como puntos, comas o paréntesis se eliminan
Por ejemplo:
## ¿Cómo empezar con Markdown?El identificador resultante sería #cómo-empezar-con-markdown.
Crea enlaces internos con HTML
Si tu editor no genera identificadores automáticamente, puedes crear anclas manualmente con HTML usando el atributo id:
<h2 id="mi-seccion">Mi sección</h2>
Contenido de la sección...
<a href="#mi-seccion">Ir a Mi sección</a>El código anterior debería renderizarse como un enlace clicable que te lleve directamente a la sección indicada.
Ten en cuenta las diferencias entre editores
Cada editor o plataforma puede generar los identificadores de forma ligeramente diferente. Por ejemplo, algunos eliminan los acentos y otros los conservan. Si un enlace interno no funciona, revisa el identificador que genera tu editor inspeccionando el HTML resultante.
Espero que este consejo te haya resultado útil. Esto ha sido todo.
👋 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.
Sígueme en Twitter para estar al día con mi contenido. 😊
