Cómo poner un ancla en HTML

Los enlaces de ancla en HTML permiten a los usuarios navegar rápidamente dentro de una página web sin necesidad de hacer scroll manualmente. Para ayudarte a crearlos, en esta guía veremos las mejores prácticas para optimizar la navegación y mejorar la experiencia del usuario.

Qué es una ancla en HTML

Una ancla en HTML es un enlace que permite saltar a una sección específica de una página web en lugar de cargar una nueva. Se crean utilizando la etiqueta <a> junto con un identificador (id) en el destino.

<a href="#seccion">Ir a sección</a>

Las anclas son útiles para:

Diferencia enter enlace normal y anclaje

Como tienen cierto parecido pero no son lo mismo, voy a aclararte la diferencia ente un enlace y las anclas en html.

Un enlace normal apunta a otra página o sitio web:

<a href="https://ejemplo.com">Ir a ejemplo.com</a>

En cambio, un ancla lleva a una sección dentro de la misma página.

<a href="#seccion">Ir a sección</a>

Qué es un jumplink

Un jumplink es un enlace en HTML que permite a los usuarios saltar directamente a una sección específica dentro de la misma página o a un punto concreto en otra página. Básicamente, es otra forma de referirse a las anclas en HTML.

En otras palabras, un jump link es un enlace que salta (de ahí su nombre) hacia un ancla HTML.

Cómo crear una ancla en HTML

Crear una ancla en HTML es un proceso sencillo que se realiza en dos pasos: definir el destino con un identificador (id) y crear un enlace que apunte a dicho destino.

Definir el punto de destino con id

Para que el enlace sepa a dónde dirigir al usuario, se debe marcar el destino con un identificador único usando el atributo id.

Por ejemplo, imagina que quieres crear un salto hacia una H2 llamado "Ventajas de un Fondo Indexado" en un artículo de economía. Iríamos a dicho encabezado HTML y añadiríamos el ID correspondiente, en cuyo caso se llamaría "salto".

<h2 id="salto">Ventajas de un fondo indexado</h2>
<p>Esta es la sección a la que queremos dirigir el enlace.</p>

Crear el enlace que apunte al id

Ahora, debemos crear un enlace <a> cuyo atributo href apunte al identificador del destino, precedido por #.

En nuestro caso, el enlace sería el siguiente:

<a href="#salto">ver las ventaja de los fondos indexados</a>

Esto hará que, al hacer clic en el enlace, la página se desplace automáticamente hasta la sección con id="salto".

Ejemplo completo de una ancla en HTML

Imagina ahora que quieres llevar al usuario a una sección concreta pero de otra página. En este caso el proceso es exactamente el mismo pero en el atributo href, además del id, debemos indicar la URL de destino.

Por ejemplo, imagina que quieres llevar a tu lector hacia un formulario de contacto que se encuentra en la home para captar el lead.

El id sería:

<h2 id="contacto">Formulario de contacto</h2>
<p>Aquí puedes escribirnos.</p>

Y el enlace sería:

<a href="https://ejemplo.com#contacto">contacta con nosotros</a>

De esta forma, cuando el usuario haga clic en "Ir a la sección de contacto", la página se moverá directamente a esa sección.

Cómo crear una ancla en Wordpress

Si en lugar de picar tu página web a código usas Wordpress, tengo una buena noticia ya que puedes crear los ids sin necesidad de tocar código.

Para ello solo debes ir a la sección en concreto donde quieras colocarlo, dirigirte al menú lateral derecho > Bloque > Avanzado, y allí en la sección de Anclaje HTML escribir tu id.

Cómo revisar los anclas en HTML

Muchas personas piensas que si colocan mal un anclaje, esto saldrá a la luz cuando hagan un auditoría con Screaming Frog, por ejemplo, en la sección de enlaces. Pero nada más lejos, ya que para poder auditar esto debemos marcar la opción de Rastrear identificadores de fragmento (en Configuración de rastreo > Spider > Avanzado):

Y en caso de que haya lo encontrarás en la sección de problemas, bajo el nombre "URL: Marcador incompleto":