Ya sabes que puedes crear enlaces para llevar a secciones dentro de una misma página de tu sitio.
No entre páginas de tu sitio, sino dentro de la misma página. Que te lleve más abajo o más arriba de donde estés. Seguro que ya los has visto en muchas ocasiones.
Se suelen usar para índices, llamadas a la acción, menús...
Bien usados mejoran la experiencia de usuario y facilitan la navegación. Mal usados pueden ser molestos. Sigue leyendo para más detalles.
En en lenguaje de marcado HTML los enlaces son conocidos como «anclas». Por eso el código se representa así: <a>.
En este caso queremos un enlace a una misma página y también se usa el mismo tipo de código.
Usos habituales de las anclas
Es habitual que este tipo de enlaces estén en los índices o tablas de contenido, al principio de una página. Sobre todo en artículos extensos. Pinchando sobre cada parte del índice, te lleva a la sección específica.
También en las llamadas a la acción que te invitan a rellenar un formulario y te llevan justo a este cuando pinchas sobre ellas.
Otro uso frecuente es en las páginas accesibles (que deberían ser todas). No solemos verlo mucho pero está ahí. Nada más llegar, prueba, pulsas la tecla Tab y se muestra un menú de navegación. Es para ir a las partes importantes de la página. Créeme, cuando no puedas usar un ratón te acordarás de lo útil que es esto. Si te interesan estos temas, tengo un artículo que habla solo accesibilidad.
Cómo crear un ancla
Primero tienes que marcar los puntos a los que poder ir y luego puedes enlazarlos.
Por ejemplo, imagina que tienes una página que contiene varias secciones, como "Introducción", "Contenido" y "Conclusión". Puedes crear anclas que lleven directamente a cada sección.
Marca las secciones a las que llevar
Para marcar los puntos a los que quieres ir se utiliza el atributo «id». Este atributo los utilizas para identificar una etiqueta específica de la página.
Por ejemplo, para la sección «Contenido» de la página, agregas el id al título que da inicio de esa sección:
<h2 id="contenido">Contenido</h2>
En este caso el identificador está en una etiqueta de título de nivel 2.
También puedes hacerlo a un título de nivel 1 (h1) o de cualquier otro nivel (h3, h4, h5 o h6), a un párrafo, a un div o al elemento HTML que quieras.
Ojo, no debes repetir el mismo identificador en más de un sitio dentro de la misma página.
Tampoco debes introducir espacios en los identificadores, usa guiones (yo prefiero medios pero los guiones bajos también sirven). Mi recomendación es que tampoco uses caracteres como tildes.
A veces no es fácil tocar el código HTML para añadir un identificador. En estos casos, la herramienta que uses, debe darte un lugar donde escribirlo.
Enlaza a las secciones
Ahora solo tienes que crear un enlace que lleve al navegante directamente a esa sección.
En ese enlace pon en la dirección una almohadilla (#) y el identificador que estableciste.
Por ejemplo, el código HTML resultante puede ser algo tal que así:
<a href="#contenido">Ir al contenido</a>
Como te decía, el valor del atributo «href» es el identificador que hemos creado, precedido por el símbolo "#".
Enlazar a una sección de otra página
También puedes crear un enlace a otra página y concretar a la parte exacta a la que debe ir dentro de ella.
<a href="/enlace-a-pagina#contenido">Ir al contenido de la página</a>
De esta forma el navegador nos lleva a la página de destino y baja la sección específica dentro de esta.
Parece que no funciona
Lo habitual es que al pulsar sobre un enlace de este tipo te muestre la sección que marcamos justo en la parte superior del navegador.
A veces no es justo así. Si llegamos al final de la página y no se puede bajar más, de ahí no pasa, por mucho que lo intentes.
Por ejemplo, imagina que hayas puesto un enlace al pie de página. Este no se va a visualizar en la parte superior del navegador porque no tiene nada debajo y no se puede bajar más.
Mal uso de las anclas
Algunos ejemplos de qué no debes hacer con anclas:
Anclas poco descriptivas: El texto del ancla debe ser descriptivo. Un «haz clic aquí» no lo es.
Código obsoleto: no uses el siguiente código, está obsoleto: <a name="nombre"></a>.
Enlaces rotos: si creas un ancla a una parte específica de una página pero luego eliminas esa sección o cambias su ubicación, el enlace se convertirá en un enlace roto. Tienes que asegurarte de que los enlaces funcionan bien y actualizarlos cuando toque.
Uso excesivo: los enlaces ayudan a mejorar la navegación pero si hay muchos pueden causar el efecto contrario. Si estás leyendo una página y cada poco te encuentras con un enlace, tienes la sensación de que te estás perdiendo algo. Seguro que ya te ha pasado, incluso en sitios tan populares como Wikipedia.
Bonus: que la página no salte, se mueva
Cuando haces clic en uno de estos enlaces, la página salta directamente al contenido, lo hace de repente.
Si quieres hacer un efecto de movimiento para que el usuario se dé cuenta de que le estamos llevando hacia abajo o arriba es fácil, solo es necesaria una regla CSS: scroll-behavior: smooth;
Puedes aplicársela al elemento principal html y ya surte efecto en toda la página:
html {scroll-behavior: smooth;}
Conclusión
Usa anclas pero sin pasarte, siempre pensando en mejorar la usabilidad de la web sobre la que estás trabajando.
Deja tu comentario con dudas, para mejorar este artículo o con una crítica.
Y si te gusta lo que has leído, deja tu email más abajo y recibirás más directamente en tu buzón. Incluso algunos que aquí no se verán nunca.
Ah, la imagen, hay más como esta en Unsplash.
