Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=4a553104-e3d2-4cbe-80d7-fde480472b39

Todo sobre los enlaces en HTML

Siempre me ha parecido que, una de las cosas más agradecidas de los documentos HTML de la web, aparte de poder insertar imágenes o vídeos, está en la posibilidad de crear hipervínculos o enlaces entre ellos.

De hecho, creo que esta es una de las características que más puede emocionar y motivar a los novatos que jamás han tocado código ni con un palo y que deciden adentrarse en el mundo del desarrollo web.

De repente, escribes cuatro líneas de HTML y, ¡zas!, eres capaz de añadir interactividad a un simple texto. Dado que estás viendo este post, deduzco que ahora mismo estás dando tus primeros pasos con HTML, así que seguro que entiendes lo que te quiero decir.

¿Cómo se ponen los enlaces?

Los enlaces en HTML se crean principalmente con la etiqueta <a>, que tiene su correspondiente etiqueta de cierre </a>. Pero, pero... ni "enlace", ni "link", ni "hipervínculo comienzan por "a". ¿De dónde viene esto?

Pues viene del inglés "anchor", que literalmente significa "ancla". Así que, cada vez que pongas un enlace en tu página web, imagínate que estás lanzando un ancla con una cuerda hacia otra página web, y así quedan enganchadas ambas. Vinculadas.

El atributo href de los enlaces

El atributo más importante más importante en los enlaces es href, ¿qué significa? Pues es la abreviatura de Hipertext Reference, o lo que es lo mismo Referencia de Hipertexto. En este atributo es donde indicamos el URL a la que apuntaremos con el enlace. O sea, la página a donde irá el navegador al hacer clic en el enlace.

Así que, si quieres enlazar al blog de recursos de campusMVP, desde tu página pondrías:

 <a href="https://www.campusmvp.es/recursos/" title="Al blog de recursos de campusMVP">Ir al blog de campusMVP</a>

Y se vería así:

Ir al blog de campusMVP

Fíjate en el atributo title, sirve para mostrar en el navegador un tooltip (deja quieto el cursor sobre el enlace) que normalmente aporta información sobre la página de destino. Utilízalo. Mejorarás la accesibilidad y experiencia de usuario en tus páginas, aparte de resultar muy útil para optimizar tu página para los buscadores, ya que les ayudas a entender mejor tu contenido.

Por cierto. Como puedes ver, el texto del enlace es lo que va entre <a> y </a>. Si en vez de texto quieres que el enlace sea una imagen, tendrías que ponerle ahí la correspondiente etiqueta <img>:

<a href="https://www.campusmvp.es/recursos/" title="Al blog de recursos de campusMVP">
  <img src="/recursos/image.axd?picture=/2017/4T/enlaces-imagenes-campusmvp.png" alt="Enlace con imagen usando el logo de campusMVP" />
</a>

Y, entonces, se vería así:

Enlace con imagen usando el logo de campusMVP

Enlaces con rutas absolutas

Pero si quisieras enlazar una página concreta tendrías que poner una dirección más detallada:

<a href="https://www.campusmvp.es/directorio1/directorio2/archivo.htm">Ir al post de los enlaces</a>

Nota: en la jerga de Internet a las direcciones únicas de un recurso, como la que acabamos de colocar en nuestro enlace, se les denomina URL, del inglés Uniform Resource Locator o Localizador Uniforme de Recursos. Un URL es una dirección única que identifica un recurso en Internet, no solo en la Web. Lo más habitual es que escuches hablar de URLs y no tanto de direcciones, pero es lo mismo.

Fíjate en el URL. Ahora, aparte del dominio, en la ruta aparecen varios directorios separados por una barra inclinada hacia delante "/", también llamada slash , más el nombre del archivo completo con su extensión. Este tipo de URL que incluye el dominio (más la estructura de carpetas y/o archivo, si procede) es una "ruta absoluta".

Enlaces con rutas relativas

Pero si yo quiero enlazar este archivo desde otra página dentro del dominio de campusMVP, me bastaría con poner esto (y funcionaría igual):

<a href="/directorio1/directorio2/pagina.html">Ir a mi archivo</a>

Si estoy en otro documento HTML del mismo directorio también lo podría hacer así:

<a href="./pagina.html">Ir al post de los enlaces</a>

O así:

<a href="../directorio2/pagina.html">Ir a mi archivo</a>

Los tres casos son ejemplos de rutas relativas, esto es, relativas a la página en la que estoy ahora mismo, y tienen la ventaja de que son independientes del dominio. Si el día de mañana le cambias el dominio a tu página web, seguirán funcionando igual de bien.

  1. En el primer caso, la dirección empieza por un slash "/". Esto significa que empezará a buscar la ruta a partir de la raíz del dominio.
  2. En el segundo caso empieza por "./". Esto significa que empezará a buscar la ruta a partir del nivel de la carpeta actual.
  3. Y en el tercero, empieza por "../". Esto significa que empezará a buscar la ruta a partir del nivel inmediatamente superior al de la carpeta actual. Podrías anidar varios "../" para subir varios niveles, pero no te recomiendo usar más de dos o tres.

El atributo name y los enlaces dentro de la misma página

El atributo name sirve para crear enlaces vacíos que indicarán puntos concretos de la página. Estos se podrán visitar al hacer clic en otros enlaces dentro de la misma. Por ejemplo, el típico enlace de "Volver al principio" que se pone al final de una página y que, al hacer clic, el navegador hace scroll hacia el principio. Otro uso muy habitual es en índices o tablas de contenidos en páginas muy largas.

Por ejemplo. Al principio de tu página pones esto:

<a name="principio"></a>

Y al final un enlace que apunte a ahí. Se hace con el símbolo "almohadilla" seguido del valor de name

<a href="#principio">Ir al principio de la página</a>

También lo podríamos hacer usando el id de cualquier elemento. ¿No te lo crees? Haz clic en este enlace.

Te ha llevado al primer párrafo del post, ¿verdad?. Eso es porque el enlace apunta al atributo id que le he puesto al primer párrafo del post a propósito para que pudieras ver este ejemplo.

De hecho, aunque esta técnica con name se usa mucho, en la recomendación de HTML5 se considera obsoleto usar el atributo name en los elementos <a> y se desaconseja su uso en favor de la técnica de usar el id:

<a id="principio"></a>

Y el enlace para ir a allí quedaría exactamente igual:

<a href="#principio">Ir al principio de la página</a>

Otros atributos interesantes

Aparte de los dos atributos mencionados, hay más atributos que puedes usar en los enlaces:

De tipo de contenido: type

Estos son solo algunos ejemplos

  • text/html : documentos HTML
  • image/jpg: imágenes JPG
  • text/css: hojas de estilo CSS
  • application/rss+xml: archivos XML para feeds RSS

De relación: rel y rev

Indica relaciones entre documentos, rel indica la relación entre la página que enlaza y la enlazada y rev indica la relación inversa.

  • alternate: indica que es una versión alternativa al documento actual (en otro idioma, una versión para imprimir)
  • stylesheet: indica que el archivo enlazado es una hoja de estilos
  • start: informa que el documento enlazado es el primero de un conjunto o secuencia
  • next: el documento enlazado es la continuación del actual dentro de una secuencia lógica (un post de un blog o un libro)
  • prev: el documento enlazado es el anterior del actual dentro de una secuencia lógica (un post de un blog o un libro)
  • bookmark: indica que el enlace es un "marcador" o "favorito", esto significa que es importante.
  • contents: el elemento enlazado contiene una tabla de contenidos
  • nofollow: indica a los spiders de los buscadores, que no sigan ese link
  • noindex: indica a los spiders de los buscadores, que no muestren ese link en los resultados de búsqueda
  • external: indica que la página enlazada pertenece a un sitio web externo

¿A dónde apuntamos?: target

El atributo target se utiliza para especificar dónde vamos a abrir el URL enlazado. Parte del ámbito en el que estamos (una ventana, un marco) y, en función de este, se designa dónde abrimos el recurso. El valor de target puede ser el  nombre de un <iframe> o de un <frame> (aunque está obsoleto en HTML5 y se desaconseja su uso) o alguno de los siguientes valores:

  • _self: carga el recurso en el mismo contexto en el que estamos, ya sea una ventana o un iframe.
  • _blank: el atributo más utilizado. Sirve para abrir el recurso en una pestaña nueva. Cuando los navegadores no disponían de pestañas, se abría en una ventana nueva, aunque los navegadores modernos se pueden configurar por parte del usuario para que se abra en una ventana nueva en lugar de en una pestaña.
  • _parent: se abre en la página "madre" desde la que se ha abierto la actual o que contiene a esta (normalmente es un frameset). Si no existe un elemento "padre", se comporta como _self.
  • _top: se abre en el contexto de navegación más alto, que suele ser un ancestro y que no tiene padre. Si no hay un elemento que sea padre del contexto actual, entonces funciona como _self.

Lenguaje de la página de destino: hreflang

Indica, con su correspondiente código ISO, el idioma de la página enlazada. Es especialmente útil para sitios web multiidioma usándola conjuntamente con rel="alternate" para que los buscadores (o sea, Google) no se hagan un lío con las diferentes versiones e idiomas.

Estos son solo unos pocos atributos, pero hay más. Si te pica la curiosidad, puedes seguir indagando en la página del W3C o en la de recursos para desarrolladores de la Fundación Mozilla.

Y si estas aprendiendo HTML, o simplemente quieres asentar mejor tus conocimientos, échale un vistazo nuestro curso de HTML y CSS. Aprenderás de una forma mucho más estructurada y ordenada que si vas por libre, y en poco tiempo verás grandes progresos en tu dominio de la maquetación web.

Fecha de publicación:
Pablo Iglesias Pablo Iglesias es diseñador en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web

¿Te vas a perder los mejores trucos de programación?

Únete a miles de desarrolladores que ya reciben cada mes nuestro boletí­n por email. No te pierdas los mejores trucos, noticias y frikadas.

Enviamos poco, pero bueno. Palabra de desarrollador.

Suscríbete aquí­

Sí­guenos también en:

Telegram LinkedIn YouTube
La mejor formación online para desarrolladores como tú

Comentarios (10) -

Santiago Robinet
Santiago Robinet

Buenas, tengo un problema. Estoy tratando de escribir el enlace en HTML en notepad++.
Cuando lo escribo : <a href:"https://www.google.com/";>GOoglE</a> , despues lo abro en el chrome para probar que funcione y me encuentro con que me aparece la palabra GOoglE pero no esta ni azul, ni subrayada, ni le puedo hacer click.
Hace 2 dias que estoy intentando crear enlaces, visito foros y busco videos en YouTube y todos los hacen igual, pero a mi no me funciona de ninguna de las formas que lo intento :(
Si alguien me puede dar una mano, lo agradeceria muchisimo.


Responder

Hola Santiago:

Los atributos HTML se ponen con el símbolo &quot;=&quot; no con dos puntos y no necesitas el &quot;;&quot; del final Pon:

<a href="https://www.google.com";>Google</a>

y ya está.

Saludos

Responder

se puede hacer que con 1 enlace se abran dos ficheros de texto? si se puede, por favor me pueden decir como?

Responder

Pablo Iglesias
Pablo Iglesias

Sí, se puede hacer pero necesitar usar JavaScript, y siempre será necesario que haya al menos un clic.

Para ello puedes usar el método open(): (developer.mozilla.org/es/docs/Web/API/Window/open )

Aunque la mejor solución, en téminos de accesibilidad y usabilidad, me parece que sería un enlace para cada documento, o comprimir ambos en un solo archivo zip descargable.

Responder

Hola, trabajo en un sitio web para mi ong, y necesito poner un enlace hacia un marcador del index, es decir, que desde una pagina secundaria, se direcciones hacia el marcador contacto del index, se puede hacer???

Gracias

Responder

Pablo Iglesias
Pablo Iglesias

No entiendo bien tu pregunta ¿Quieres poner un enlace a la página de contacto? Claro que se puede mientras esa página sea una URL pública. ¿Cuál es el problema?

Si no es eso, por favor, reformula tu pregunta porque no la entiendo. :-/

Responder

Buenas, tengo una tabla en la que está relacionada la imagen con una url. Al pasar por la imagen se pone la mano marcando que hay enlace, pero si no hay enlace, también aparece la mano. ¿Como puedo hacer para que en cada de no existir enlace el icono del ratón no cambie? Lo uso en una página web de joomla y utilizo un componente llamado joodatabase. El código que utilizo para mostrar el enlace en la imagen es: <a href="{joodb field|weburl}" target="_blank">.
No se como evitar que se muestre la mano al pasar sobre la imagen si el campo weburl está vacío.

A ver si me puedes orientar. Gracias.

Responder

Pablo Iglesias
Pablo Iglesias

Hola Darrcan,
No controlo mucho Joomla, hace más de diez años que no lo toco, pero sospecho que, aunque ese campo "weburl" esté vacío la etiqueta <a> sigue existiendo con su atributo href, aunque sea vacío. Eso provoca que se vea "la mano del cursor".

Por cierto, que el cursor se puede cambiar también a través de CSS. Si no controlas mucho de HTML y CSS me veo en el deber de recomendarte este curso: www.campusmvp.es/.../...a-desarrolladores_185.aspx Te dará una base de HTML muy útil sea cual sea el CMS que estés usando.

Responder

Mi duda es si con html o css se puede evitar que se muestre la mano si esta el campo de la base de datos vacío el campo de URL. Porque la tabla es html y en otros lenguaje como javascript se puede decir que si no cumple un requisito, haga otra cosa. Pero no tengo muy claro si con html o con el css como comentas se puede llegar a hacer.
Gracias por contestar. Solo busco algo de orientación para solucionarlo. Me gusta intentar averiguar todo lo que puedo por mi parte pero a veces ando perdido.
Gracias de nuevo.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Con CSS puedes cambiar casi cualquier cosa.

En concreto, para cambiar el cursor hay una propiedad del mismo nombre, cursor, y para que sea el "normal" solo tienes que aplicar esta propiedad usando el selector CSS adecuado al elemento que quieres modificar:

cursor:default;

y listo.

Más información:  developer.mozilla.org/en-US/docs/Web/CSS/cursor

Saludos.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.