Cómo crear un enlace dentro de la misma página usando HTML

Si bien un menú o una tabla de contenido puede ser de ayuda, visitar la parte superior de una página web larga y luego tener que desplazarte hacia abajo para encontrar lo que estás buscando puede ser agotador. Ahórrales esfuerzo a tus visitantes agregando enlaces directos a un ancla. Las anclas pueden aparecer en cualquier lugar de la página y tienen un pequeño "identificador del fragmento" en el atributo "id". Agrega el símbolo "#" seguido del identificador del fragmento al final de la URL y podrás crear un enlace directo al ancla.

Parte 1

Parte 1 de 2:
Crear un ancla de destino

1
Crea un elemento ancla. El elemento "ancla" <a></a> define un lugar en la página al cual puedes crear un enlace. Todo lo que esté dentro de las etiquetas <a> y </a>, normalmente es texto o una imagen, será el destino del enlace.
2
Coloca algo dentro del elemento ancla. Si bien HTML admite que el elemento ancla se deje vacío, algunos navegadores podrían no encontrarla si no hay nada entre las etiquetas <a> y </a>.^{[1]
X
Fuente de investigación} Simplemente escribe el texto al cual quieras crear un enlace:
- <a>Mi receta de lasaña</a>
- La etiqueta "a" por lo general no cambia el estilo del texto.^{[2]
  X
  Fuente de investigación} En este ejemplo, "Mi receta de lasaña" aparecerá como texto normal.
3
Agrégale un atributo "id" al elemento ancla. El elemento "id" le proporciona al ancla un identificador único al cual vincularse. Colócalo dentro de la etiqueta <a> como se muestra a continuación:
- <a id="nombre-del-ancla-1">Mi receta de lasaña</a>
4
Elige un valor para tu "id". El ejemplo anterior se utilizó el nombre "nombre-del-ancla-1", pero es mejor elegir uno más representativo, por ejemplo, "lasana" (en HTML4 no se admiten caracteres especiales como la "ñ"). El valor debe ser único para ese "id". Si hay otro "id" en el documento con el mismo valor, el navegador no podrá saber a qué ancla quieres ir.
- En HTML4, el valor debe comenzar con una letra. Puedes usar letras, dígitos, guiones medios, guiones bajos, dos puntos y puntos.^{[3]
  X
  Fuente de investigación}
- En HTML5, puedes usar cualquier carácter excepto espacios.^{[4]
  X
  Fuente de investigación}
- Ten cuidado con las mayúsculas y minúsculas. "Pulir" y "pulir" se consideran como el mismo valor, por lo que no deben aparecer en el mismo documento.^{[5]
  X
  Fuente de investigación}
5
Inserta el "id" en otro elemento, si quieres. No es necesario que uses la etiqueta <a> cada vez que quieras crear un ancla. El atributo "id" en realidad puede ir en cualquier elemento HTML.^{[6]
X
Fuente de investigación}^{[7]
X
Fuente de investigación} Todos los navegadores modernos (desde hace bastante tiempo) son capaces de interpretar esta variación. Aquí tienes algunos ejemplos:
- Ancla en un encabezado: <h2 id="biblio">Bibliografía</h2>
- Ancla en una imagen: <img id="logo" src="/images/logo.png" />
- Ancla en un párrafo: <p id="parrafointro">(párrafo introductorio)</p>
- Recuerda que cada "id" puede aparecer solo una vez en la página.
Anuncio

Parte 2

Parte 2 de 2:
Enlazar contenido al ancla de destino

1
Crea un enlace al ancla desde cualquier lugar de la página. Esto funciona igual que cualquier enlace. Hay que usar el formato <a href=" "> </a>. Sin embargo, en vez de usar una URL como valor del atributo "href", debes usar el símbolo "#" seguido del valor del ancla. Para crear un enlace a la receta de lasaña del ejemplo anterior, tienes que escribir:
- <a href="#lasana">Haz clic aquí para ver mi receta de lasaña.</a>
- Utiliza exactamente las mismas mayúsculas y minúsculas cuando vayas a crear el ancla. Algunos navegadores no reconocen "#Lasana" como enlace a "#lasana".^{[8]
  X
  Fuente de investigación}
2
Crea un enlace al ancla desde otro sitio web. También puedes crear un ancla desde otro sitio web, solo tienes que incluir la URL seguida de "#" y el valor del ancla. Aquí tienes algunos ejemplos:
- Enlace desde otra página del mismo dominio:
  <a href="recetas.html#lasana">Visita mi página de recetas para ver cómo hacer una lasaña.</a>
- Enlace desde cualquier otro sitio:
  <a href="http://wikicocina.org/recetas.html#lasana">En el sitio de mi amigo encontrarás una receta para preparar una deliciosa lasaña.</a>
3
Convierte una imagen en un enlace. Al igual que con las URL normales, también puedes crear anclas con imágenes:
- <a href="#lasana"><img src="lasanadepollo.png" /></a>
Anuncio

Consejos

Si los enlaces a tu ancla solo te llevan a la parte superior de la página, asegúrate de que el sitio web no esté redirigiendo al navegador a una URL levemente distinta. Por ejemplo, algunos navegadores sueltan el ancla (incorrectamente) después de redirigir desde http://www.ejemplo.com hasta http://ejemplo.com.^{[9]
X
Fuente de investigación} Puedes solucionarlo asegurándote de que los enlaces del ancla apunten a http://ejemplo.com/#nombre-del-ancla para que la redirección no ocurra.
Esta es una buena forma de crear notas al pie. Por convención, las notas al pie deben tener un superíndice numérico con corchetes cuadrados.^{[10]
X
Fuente de investigación} For example:
Julio César<sup><a href="#ftn1">[1]</a></sup>
te lleva a:
<a id="ftn1">Fue un famoso romano y mi amigo cercano.</a>

Anuncio

Advertencias

Un error común es usar el símbolo "#" para crear el ancla de destino. Utiliza "#" solamente cuando quieras crear el enlace al ancla dentro de un atributo "href".
Los guiones bajos en valores de "id" pueden traer problemas si usas CSS para estilizar tu documento.
HTML5 y XHTML no soportan atributos de nombre en los elementos ancla.^{[11]
X
Fuente de investigación}^{[12]
X
Fuente de investigación} Utiliza el atributo "id" tal como se describe en este artículo. Si crees que los visitantes de tu sitio utilizarán navegadores muy viejos (de más de 10 años), sería bueno que incluyas dos "id" y nombres de atributo idénticos(<a id="ancla-de-ejemplo" name="ancla-de-ejemplo">Texto de ejemplo</a>).^{[13]
X
Fuente de investigación}. HTML4 oficialmente solo soporta elementos a, applet, form, frame, iframe, img y map.^{[14]
X
Fuente de investigación}