Creación, mantenimiento y asistencia web
Brazos de una persona saliendo del agua sujetando un ancla pequeña de metal

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

Los usos más habituales que se le suelen dar a este tipo de enlaces es en los índices o tablas de contenido, por ejemplo.

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 quieres 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. Luego creas un enlace que apunta a ese identificador.

Por ejemplo, para la sección «Contenido» de la  página, agregas el siguiente código HTML al inicio de esa sección:

<p id="contenido">

Puedes añadir el identificador a un párrafo (como en este caso), a un título o al elemento que quieras.

Ojo, no debes repetir el mismo identificador en más de un sitio dentro de la misma página.

No 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.

Enlaza a las secciones

Para crear un enlace que lleve al navegante directamente a esa sección, utiliza el siguiente código HTML:

<a href="#contenido">Ir al contenido</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 podemos 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 en concreto a la parte específica.

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.

Mejora tu web desde hoy mismo

Escribe tu correo aquí debajo y te envío detalles que no debes pasar por alto en tu web, los fallos que yo he cometido para que tú no caigas en ellos y más.

Hablo sobre buenas prácticas para tu web, accesibilidad, software libre...

¡Ah! Y si te apuntas ahora, recibes gratis la Guía Rápida de Iniciación a Joomla 5.

Loading...