Armar índice con anclas
Si una página tiene un contenido extenso y complejo, armá un índice para facilitar la navegación del usuario.
En esta página
Qué son las anclas
Un ancla es un subtítulo al que le asignás un identificador (un id) para que se convierta en destino de un hipervínculo.
En esta página, por ejemplo, asignamos un id a cada subtítulo para poder armar el índice con hipervínculos de arriba y los botones grises «Volver al índice» de abajo.
Cuando hacés clic en un ítem del índice, bajás hasta el subtítulo correspondiente, que convertimos en un ancla. Cuando hacés clic en un botón gris, volvés al subtítulo «En esta página», que también convertimos en un ancla.
Bien utilizada, es una herramienta de navegación que mejora la usabilidad del contenido para el usuario.
Las anclas no sirven solo para armar índices, aunque es el uso más habitual en argentina.gob.ar. También podés anclar un subtítulo para hipervincularlo en cualquier otra página, con lo que podés llevar al usuario directo a una sección dentro de un contenido. Por ejemplo, muchos hipervínculos de esta página apuntan a subtítulos de otros contenidos de argentina.gob.ar, así no tenés que desplazarte hasta encontrarlos.
«Anclar» un subtítulo y vincularlo
Para anclar un subtítulo, dejá un espacio al final de la oración y escribí entre llaves {}
un símbolo numeral #
seguido de un id legible compuesto por una palabra sin espacios.
Por ejemplo, al subtítulo de arriba «Cómo "anclar" un subtítulo y vincularlo» le asignamos el código {#anclar}
.
Luego, para vincular hacia el ancla, escribís un hipervínculo como explicamos en la sección correspondiente, solo que a la url de destino le agregás al final #id-del-ancla
.
Por ejemplo, el hipervínculo del párrafo anterior te lleva a un subtítulo de la página https://www.argentina.gob.ar/contenidosdigitales/markdown/texto
que anclamos con el id #enlaces
, por lo que escribimos la url https://www.argentina.gob.ar/contenidosdigitales/markdown/texto#enlaces
.
Si hipervinculás a un ancla que está en la misma página (como las del índice de arriba), el hipervínculo solo debe apuntar a #id-del-ancla
, sin la url completa.
Por ejemplo, el índice de esta página tiene el código
* [Qué son las anclas](#quees)
* [Como "anclar" un subtítulo y vincularlo](#anclar)
* [Copiá este código y adaptalo a tu necesidad](#codigo)
esto es, una lista con un hipervínculo en cada ítem que apunta a un subtítulo anclado.
Los botones grises, por su parte, tienen el siguiente código.
[Volver al índice](#enestapagina){.btn.btn-link.btn-sm}
Copiá este código y adaptalo a tu necesidad
En el siguiente ejemplo anclamos tres subtítulos de nivel 2. Por supuesto, podés anclar los subtítulos de niveles 2 a 6 que tu contenido necesite.
## En esta página {#enestapagina.text-muted}
* [Ítem 1 del índice](#id-ancla-1)
* [Ítem 2 del índice](#id-ancla-2)
---
## Texto del subtítulo 1 {#id-ancla-1}
Párrafos de texto.
[Botón «Volver al índice»](#enestapagina){.btn.btn-link.btn-sm}
---
## Texto del subtítulo 2 {#id-ancla-2}
Párrafos de texto.
[Botón «Volver al índice»](#enestapagina){.btn.btn-link.btn-sm}