blog logo

Enlazar a una parte de una página web

Artículo publicado en 2015 y revisado en 2023

Las diferentes etiquetas HTML pueden tener un nombre concreto mediante un identificador. Por ejemplo, si entro en la parte de la edición HTML de este artículo puedo llamar "primerp" a este párrafo (<p>) que estoy escribiendo: <p id="primerp">. Que las etiquetas (sean <div>, <h2>, <p>...) estén denominadas de esta forma permite enlazar a ellas y que puedan funcionar como ancla.

Dos páginas de navegado, una con un ancla en su interior y otra con una cadena; podría simbolizar cómo funciona el enlace a una parte de una página web

Para conocer la utilidad de este atributo, tenemos que hacer primero como que hemos redactado un texto bastante largo.

Párrafo - 3

Párrafo - 4

Párrafo - 5

Párrafo - 6

Párrafo - 7

Párrafo - 8

Párrafo - 9

Párrafo - 10

Párrafo - 11

Párrafo - 12

Párrafo - 13

Párrafo - 14

Párrafo - 15

Párrafo - 16

Párrafo - 17

Bien. Siempre hay dos pasos: denominar de alguna manera el párrafo al que queremos que se dirijan (id="nombre") y después poner un vínculo en la expresión que llevará hasta allí (<a href="link#nombre">Estas palabras tendrán el enlace</a>). Veamos ejemplos de cómo crear una marca así.

Enlace a una parte de la misma página

Podemos introducir un vínculo a la zona que queramos de una misma página, en este caso vayamos al primer párrafo de esta página. Si no queremos escribir el código a mano y el sistema de gestión de contenidos que usamos tiene un simbolito de "insertar enlace", lo debemos activar sobre la palabra que queramos que tenga el hipervínculo (por ejemplo, encima de una expresión como "Ir al inicio de este artículo") y escribimos que debe enviar a los usuarios a tal parte, con una almohadilla y el nombre del identificador: #primerp.

El código HTML sería: <a href="#primerp">Ir al inicio de este artículo</a>. El elemento <a> inserta un enlace a la dirección que se indique en su atributo href. Ese enlace se crea en las palabras que vayan entre <a> y </a>, en este ejemplo son "Ir al inicio...". Cada vez que alguien clique estas palabras, el enlace lo llevará al lugar de la página que le hemos indicado, en este caso, al <p> denominado "primerp".

En las herramientas de cada bloque de una entrada o página que se está editando, WordPress tiene una sección de avanzado para añadir "anclaje HTML" sin necesidad de acceder al código.

Cómo hacer un índice web rápidamente

Al inicio de un texto web se puede insertar de manera automática una pequeña lista con las diversas secciones. Este resumen se denomina tabla de contenidos (table of contents > TOC). Es muy probable que el gestor de web que la mayoría utilizamos incluya esta funcionalidad o la posibilidad de añadirla, sea a través de un plugin específico para TOC o uno más genérico que ofrezca esa opción entre otras muchas (como la versión premium de Yoast SEO). Son bastante configurables (dónde y cuándo colocar la tabla, qué excluir).

Las tablas de contenidos automáticas parten de los distintos títulos del blog post (H2, H3, H4...) en su versión más reciente. De este modo, los enlaces internos estarían actualizados. Además de ventajas para el lector y, por tanto, para el posicionamiento de la página, tiene dos pros importantes para quienes escriben: ahorran tiempo (¡nada de anclar manualmente!) y evitan errores al enlazar.

Enlace a una parte de otra página

Si deseamos que un enlace apunte a un lugar que está en otra página nuestra, habrá que poner lo mismo, pero especificando antes del identificador el link a la página en la que se encuentra, luego # y el nombre del identificador (#DRM). El HMTL sería en este caso: <a href="https://www.techleo.es/infraccion-de-los-derechos-de-autor#DRM">Las tecnologías de control de acceso</a>.

Si es una página propia, no siempre hay que incluir la URL completa, dependerá de cómo funcione el sitio web. Por ejemplo, si una página de techleo enlaza a otra de techleo, es suficiente con indicar href="el-texto-que-sea#id" y no hace falta href="https://www.techleo.es/el-texto-que-sea#id".

¿Hay que poner o no una barra (/) entre la URL y la almohadilla (#)? Si hay que añadirla o no dependerá de cada sitio web. Hay sitios que solo tienen una versión de cada página (bien sin barra final o bien con barra final) y si se añade o quita respectivamente la barra del final no encontrará el contenido y dará error 404. Ahora bien, es común que añadir una barra final en la URL no marque la diferencia porque las dos versiones coexisten y una redirecciona a la otra. Este es al menos el caso de este blog, donde tanto ".../infraccion-de-los-derechos-de-autor#DRM" como ".../infraccion-de-los-derechos-de-autor/#DRM" llevan al mismo sitio.

¿Y si queremos apuntar a un párrafo de una página ajena, sobre cuyo HTML no tenemos control? Podremos enlazar si la parte que nos interesa tiene un identificador propio, lo cual depende de la persona que haya escrito esa página. Se puede saber cuál es el identificador viendo el código fuente de la página (accede a este, por ejemplo, al clicar con el ratón el botón derecho) y buscando la zona que nos interesa. ¿Alguna etiqueta próxima con "id"? Pues se puede enlazar ahí.

Es habitual poner identificadores en los textos online con varios apartados, como las leyes, artículos y libros. Un ejemplo fácil de comprobar: cualquier entrada de Wikipedia. Al inicio hay un índice con enlaces a las diferentes secciones del texto.


Apunten adonde apunten, parece bueno a largo plazo meditar si conviene enlazar a determinado sitio. Por distintos motivos los sitios webs dejan de atenderse y desafortunadamente muchos links se rompen a los pocos años.

No quedan más posts por sugerir.