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í:
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.
- 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.
- En el segundo caso empieza por
"./". Esto significa que empezará a buscar la ruta a partir del nivel de la carpeta actual.
- 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 HTMLimage/jpg: imágenes JPGtext/css: hojas de estilo CSSapplication/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 estilosstart: informa que el documento enlazado es el primero de un conjunto o secuencianext: 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 contenidosnofollow: indica a los spiders de los buscadores, que no sigan ese linknoindex: indica a los spiders de los buscadores, que no muestren ese link en los resultados de búsquedaexternal: 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: