Anclajes y enlaces ancla

Un enlace, también llamado hiperenlace, vínculo o hipervínculo, se define como un elemento de un documento electrónico que hace referencia a otro documento o a un punto específico de sí mismo o de otro documento.

En HTML los enlaces que hacen referencia a puntos específicos del documento se denominan enlaces ancla y se construyen añadiendo al final de la URL una almohadilla (#) seguida del identificador del punto de destino, al que se le llama anclaje.

Tipos de anclajes HTML

Un anclaje (o ancla) en HTML son elementos que los navegadores pueden identificar como punto al que dirigir al usuario a través de un enlace ancla. Los anclajes se pueden construir de dos formas:

Elemento <a> con atributo name, sin atributo href y sin anchor

Obsoleto. En HTML5, el elemento <a> no acepta el atributo name.

Con este método los anclajes son invisibles gráficamente pero se pueden ver en el código fuente del documento. Además, los editores que interpretan HTML suelen marcar estos puntos con un símbolo de ancla de barco y así se puede visualizar su posición durante la edición del documento.

La sintaxis de estos anclajes es la siguiente:

<a name="un-nombre"></a>

El código anterior se puede poner en cualquier parte dentro de la etiqueta <body>.

Cualquier elemento con atributo id

Con este método se puede definir un punto de anclaje en cualquier elemento. Por ejemplo:

<p id="una-id">.......</p>

También se pueden construir enlaces ancla de forma similar a como se hacía con el elemento <a> y el atributo name antes de HTML5 pero sustituyendo el atributo name con el atributo id:

<a id="un-identificador"></a>

Es importante anotar que el valor del atributo name o el valor del atributo id no debe compartirse con otros elementos. Es decir, en el mismo documento no puede haber más de un elemento con el mismo valor para id ni más de un elemento con el mismo valor para name. De este modo se pueden identificar elementos concretos de forma inequívoca. Si en la misma página se repite el mismo id o el mismo name no podrá identificarse inequívocamente al elemento que queremos encontrar a través del enlace ancla. Por ejemplo:

<p id="uno">Soy el párrafo uno</p>
<p><a id="un-anclaje"></a>Este anclaje "uno" no se podría diferenciar del anterior a través de un enlace ancla.</p>
<p id="uno">Vaya, otro "uno".</p>
<p id="dos">Soy el párrafo dos.</p>
<div><p>Los anclajes pueden definirse en los puntos <a id="un-anclaje"></a> exactos dónde queremos que estén.</p></div>

Aunque es válido que en un mismo documento existan un id y un name con el mismo valor, si se utiliza ese valor en un enlace ancla tampoco podrá identificarse inequívocamente al elemento al que nos referimos, salvo que el id y el name con el mismo valor en estén en el mismo elemento. En los casos ambiguos lo más normal es que los navegadores se paren en la primera coincidencia.

Una vez que tenemos un documento con anclajes definidos, estamos listos para enlazar a ellos. Veamos como construir estos enlaces.

Crear enlaces ancla

Los enlaces ancla para páginas web se crean mediante su URL a la que se añade al final una almohadilla (símbolo #) seguida del valor del atributo name o del atributo id del anclaje. Por ejemplo:

<a href="http://sitio.com/pagina.html#una-id">Ir al elemento con id="una-id"</a>

Si no se especifica ninguna URL el enlace ancla hará referencia a anclajes del propio documento. Por ejemplo, los siguientes enlaces ancla harían referencia al punto «un-nombre» y al punto «una-id» del propio documento en el que se encuentran:

<a href="#una-id">Ir al elemento con id="una-id" del propio documento</a>

Es importante saber que Google y otros motores de búsqueda son capaces de rastrear e indexar enlaces ancla. Google, por ejemplo, puede mostrar un enlace ancla dentro de un resultado de búsqueda si estima que el contenido de esa parte se adapta mejor a la búsqueda del usuario. Si te fijas, verás muchas veces que aparece el resultado de búsqueda y otros enlaces bajo él que llevan a partes concretas de la página de destino (ojo, no confundas con los enlaces de sitio que también puede mostrar Google bajo un resultado de búsqueda y que apuntan a diferentes páginas o secciones del website pero no a diferentes partes de una misma página. En los resultados de búsqueda el texto que aparece en el enlace anclaje suele ser el valor del atributo title del elemento ancla, aunque el buscador puede mostrar otro texto. Por ejemplo:

<a id="un-nombre" title="Un título para el anclaje"></a>