Enlaces internos

Los enlaces HTML que se hacen con otras partes de la misma página.

Quizás "Enlaces internos" puede ser un poco ambiguo, porque podríamos pensar tanto en enlaces internos dentro del mismo sitio web o enlaces internos dentro de la misma página. Nosotros en este manual nos referimos a los los enlaces que apuntan a un lugar diferente dentro de la misma página. Llamamos "Enlaces locales" a los enlaces que apuntan a otra página dentro de mismo sitio web.

Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño del texto. Es un enlace poco habitual en páginas web como blogs o páginas comerciales, que presentan un producto o un servicio. Se encuentran más en páginas de referencia, donde además el contenido está dividido en diversas secciones y queremos poder navegar entre esas secciones que se encuentran dentro del mismo archivo HTML. Otro uso habitual de los enlaces internos es ofrecer al visitante la posibilidad de ir rápidamente al principio de la página, a la parte de arriba.

Enlace y ancla

Para crear un enlace de este tipo es necesario dos componentes, que para aclararnos los vamos a nombrar de la siguiente forma:

  • El enlace: Sería el link, lo que aparecerá en la página para que el usuario haga clic. Sería el enlace de origen propiamente dicho.
  • El ancla: Además se requiere una marca, para saber dónde se dirige el enlace. Es el destino donde nos llevará el navegador al pulsar el link. Le llamamos ancla porque nos permite anclar a esa posición otros enlaces.

Ambos elementos se crean con la misma etiqueta A, tanto el enlace como el ancla. Solo que usaremos distintos atributos dentro de esa etiqueta.

Sintaxis de los enlaces en la misma página

Veamos más claramente como funcionan estos enlaces con un ejemplo sencillo: Supongamos que queremos crear un enlace que apunte al final de la página. Lo primero será colocar nuestro enlace origen. Este enlace de origen es el que el usuario podrá hacer clic.

<a href="#abajo">Ir abajo</a>

Como podéis ver, el contenido del enlace es el texto "Ir abajo" y el destino, #abajo, es un punto de la misma página que todavía no hemos definido. Ojo al símbolo "#": es él quien especifica al navegador que el enlace apunta a una sección en particular, a un punto interno dentro de la misma página.

En segundo lugar, hay que generar un enlace en el destino, al que hemos llamado "ancla". Este enlace no llevará contenido, puesto que no queremos que nadie lo pulse, sino que nos sirva de ancla. Tampoco llevará el atributo "href", porque no tiene que apuntar a ningún lugar, sino que le apuntarán a él. Para poder distinguirlo de otros posibles enlaces realizados dentro de la misma página a cada ancla se le asigna un nombre por medio del atributo "name". En este caso, la etiqueta que escribiremos será ésta:

<a name="abajo"></a>

Para entender cómo crear los enlaces internos nos tenemos que fijar en el name="abajo" del ancla. Pues bien, si queremos crear un enlace interno a esta ancla, colocaremos en en enlace de origen el href="#abajo", o sea, el nombre del enlace más un "#" para que el navegador sepa que es un enlace interno.

Enlaces útiles pero no tan habituales

A decir verdad, estos enlaces, aunque útiles, no son los más extendidos de cuantos hay. La tendencia general es la de crear páginas (archivos) independientes con tamaños más reducidos enlazados entre ellos por enlaces locales (los veremos enseguida). De esta forma evitamos el exceso de tiempo de carga de un archivo y la introducción de exceso de información que pueda desviar la atención del usuario.

Una aplicación corriente de estos enlaces consiste en poner un pequeño índice al principio de nuestro documento donde introducimos enlaces origen a las diferentes secciones. Paralelamente, al final de cada sección introducimos un enlace que apunta al índice de manera que podamos guiar al navegante en la búsqueda de la información útil para él.

En el siguiente artículo veremos cómo se hacen los enlaces locales, que son mucho más comunes en sitios web.

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

Juan Antonio Ronceros D.

01/8/2005
El articulo acerca de los enlaces internos es muy interesante, quisiera saber si este tipo de enlace lo acepta el FrontPage. Gracias

Carlos

18/9/2005
No uso FrontPage desde hace años, pero no sería un editor de páginas web si no pudiera generar enlaces internos. Independientemente de eso, FrontPage tiene un editor de código, ahí tu mismo puedes incluir el enlace interno.

Saludos.

Jorge Camal

17/7/2007
grácias por compartir con nosotros cursos y recursos con la comunidad; siempre encuentro aquí algo nuevo que aprender y aplicar. Felicitaciones

arnaldo

06/6/2009
pregunta
hey necesito su ayuda lok pasa es k estoy hace rato tratando de hacer un enlace entre dos paginas k e kreado pero no me sale por fa necesito su ayuda

javier

16/7/2009
lo mas codiciado del planeta
el tema de los contenidos o enlaces internos en una web es un dolor de cabeza, debido a la influenzia de pr y del pocisionamiento web.

Felix Miranda

30/8/2010
Muy claro
Definitivamente no estoy de acuerdo con la adulación al escritor. De hecho en algunos artículos he escrito: "Comentar no adular". Sin embargo, debo reconocer que de los artículos que encontré en mi búsqueda sobre este tema, este fue el que consideré escrito con claridad, fácilmente entendible. Creo que se hizo con buena voluntad de aportar algo de valor. Gracias.

arkdragon

09/6/2011
gracias por el tut
te agradesco el post me a servido de mucho y aunque me falta bastante para hacer un sitio web

Anabel

06/11/2012
Muy bueno
Gracias!! Me ha servido mucho de ayuda, ahora ya se hacerlo!! Y keda bien!!

richard

12/7/2013
felicitaciones
saludos y felicidades por su web me fue de gran ayuda, por favor me gustaría que me ayuden con las mias www.ChatSocial.org y www.ChateaOnline.net son webs de chats, espero pudan colocar un enlace hacia mi web y yo haré lo mismo en las dos webs si??? por favor :) bueno saludos espero me puedan ayudar :)

Juan

27/12/2013
Enlaces internos
Hola Rubén. Tus explicaciones las veo muy claras, aunque no consigo llevarlas a efecto, Seguramente debido a mi torpeza y total desconocimiento del lenguaje HTML. Mi blog es de blogger. Cuando abro HTML, con lo que veo allí me encuentro perdido. No obstante he puesto la fórmula que tú ofreces y nada, No me funciona. Pienso que se debe a que no escribo en el lugar que debiera hacerlo. Para más información: Lo que quiero hacer es poner un índice al principio de la página y que pinchando en alguno de los títulos me lleve a la receta de que se trata. Son recetas de cocina.
Espero con ansiedad tu contestación y recibe mi agradecimiento por adelantado.

Nicolas

15/11/2014
Gracias
EXCELENTE manual, arranque a leer desde el principio aunque ya sabia algo para poder aprender bien todo y por ahora me resulta muy facil, muy bien explicado, gracias!

marice guerrero

05/11/2015
name
The <a> name attribute is not supported in HTML5. Use the id attribute instead.

Hallo

28/4/2016
"a name"... no funciona
Hola. Ane todo, muchas gracias por tu artículo. Es muy didáctico. Pero en el Blogger no me funciona. Ya lo he intentado muchísimas veces, verificando cada detalle, pero tan pronto como le doy "Guardar", el Blogger añade por defecto, en todos los casos, la dirección del Blogger, tanto en la etiqueta <a name="">DATO</a> como en la <a href="#DATO". Por ejemplo: Escribo: <a href="#peligro">peligro</a><br />
<a name="peligro</a>, le doy "Guardar", y cuando vuelvo a abrir la entrada aparece como: <a href="https://www.blogger.com/blogger.g?blogID=287090410250084475#peligro">peligro</a>
<a name="https://www.blogger.com/blogger.g?blogID=287090410250084475peligro">peligro</a>
¿Qué puedo hacer?