Enlaces, vínculos y anchor

1. Introducción

Los enlaces son los que hacen que naveguemos por la Web, es decir que vayamos saltando por diferentes páginas de un mismo sitio, o de sitios externos. La etiqueta utilizada para crear un vínculo es a (anchor).

No necesariamente un enlace apuntará a una página web, puede por ejemplo apuntar a una imagen, a un servidor FTP, a cualquier otro tipo de archivo, a un correo electrónico o incluso puede apuntar a hacia otros sectores de la misma página (previamente marcando estos sectores).

2. Primer link

Veamos un ejemplo sencillo:

<a href="http://www.example.com">Example</a>

En el navegador lo que veremos será: Example. La dirección http://www.example.com es el valor del atributo href, la palabra Example, encerrada entre <a> y </a>, es lo que suele llamarse el anchor text y es el contenido que será visible en el navegador.

3. Enlace a correo electrónico y otros recursos

Para crear un enlace hacia un correo electrónico debemos apuntar en el valor del atributo href hacia una dirección de correo electrónico, pero es importante agregar al principio de la dirección el mailto: que vendría a representar el protocolo (http://, ftp://, etc).

Ejemplo:

<a href="mailto:mail@example.com">Correo de ejemplo</a>

Como en el caso anterior, veremos en nuestro navegador: Correo de ejemplo. Si prueban el enlace seguramente su navegador disparará el cliente de correo por defecto.

Si quieres saber más sobre que URLs puedes poner en el valor del atributo hrefpuedes leer el artículo de la Wikipedia, Uniform Resource Locator.

4. Enlaces relativos y absolutos

Muchas veces para enlaces entre páginas del mismo sitio y que tengan el mismo dominio, no hace falta utilizar enlaces absolutos. Por ejemplo si estamos en la pagina www.example.com/universidades.html y queremos enlazar a www.example.com/subdirectorio/colegios.html podemos crear un enlace de la siguiente manera:

<a href="subdirectorio/colegios.html">Ver los colegios</a>

Hay que destacar que en este caso hacer enlaces absolutos (escribiendo la dirección completa) funcionará también.

NOTA: Algunos buscadores recomiendan utilizar enlaces absolutos siempre que sea posible, para mejorar la indexación por parte de sus motores.

5. Enlaces hacia anclas en la misma página

Veamos ahora cómo crear marcas (algunos las llaman anclas) y enlaces para poder navegar en la misma página, sistema muy útil para crear un índice entre documentos largos.

La marca se realiza mediante el atributo id de la etiqueta a:

<h2><a id="privados"/>Colegios Privados</h2>

Hemos establecido un ancla llamada privados a la altura del título Colegios Privados ahora nos hará falta colocar un enlace desde otro sector de la página que apunte hacia esa ancla. Para esto:

<a href="#privados">Ir a Colegios Privados</a>

Noten el agregado del carácter numeral (#). Este se incluye ya que también podríamos construir el enlace utilizando la dirección absoluta lo que implicaría que necesitamos una separación entre las anclas y la dirección de la página, ya que la ancla tiene su propia dirección absoluta, que en este caso sería: http://www.example.com/subdirectorio/colegios.html#privados.

NOTA 1: El atributo id para marcar anclas, se puede utilizar en cualquier etiqueta, sin embargo puede que algunos navegadores no lo reconozcan como un ancla. Por eso se suele "anclar" sobre elementos a.

NOTA 2: Es posible también usar el atributo name de la misma manera que id. La cuestión se reduce a que algunos viejos navegadores, es posible que no reconozcan el atributo id.

6. El atributo title

La etiqueta a tiene un atributo de importante valor semántico, llamado title. El atributo title sirve para específicar una pequeña descripción del sitio que estamos enlazando.

Los navegadores suelen desplegar un cartelito con el valor de este atributo cuando el usuario señala con el mouse el enlace. Esto es de gran ayuda a los usuarios, que decidirán si seguir el enlace o no.

Se utiliza así:

<a href="subdirectorio/colegios.html" title="Lista de Colegios privados de la zona sur">Colegios Privados</a>

7. Atributos rel y rev

Estos atributos sirven para enriquecer semánticamente a los enlaces. Sus objetivos son funcionalmente inversos.

El atributo rel, sirve para definir el tipo de relación que tiene el documento contenedor del enlace con el que éste, está apuntando. Por ejemplo podríamos utilizarlo de la siguiente manera:

<a href="pagina_04.html" title="Ir a la pagina 4" rel="next">pagina 4</a>

El enlace anterior sería muy conveniente usarlo, por ejemplo, en la página pagina_03.html ya que estaríamos indicando semánticamente que estamos enlazando con la página que continua el contenido de la actual.

Inversamente podríamos indicar en pagina_04.html, mediante el elemento link y su atributo rev qué pagina_03.html es el documento que precede al actual, para esto le damos el valor previus.

Vean también una descripción detallada del uso de de rel y rev.

7.1. Valor nofollow para rel

Un valor del atributo rel que ha tomado mucha popularidad en este último tiempo, es el llamado nofollow. Este fue propuesto por los buscadores cómo una manera de indicarles que el enlace que lo lleva puesto no debe ser considerado en los algoritmos que calculan el posicionamiento de los resultados de búsquedas. El objetivo de poder dar tal indicación, es luchar contra spammers que suelen, entre otras cosas, promocionar sus webs mediante la inserción de enlaces en sitios cómo la Wikipedia o en los comentarios de los Weblogs.

Ejemplo de su uso:

<a href="http://www.microsoft.com" title="Sitio que vende software privativo" rel="nofollow">Microsoft</a>

7.2. Valor tag para rel (Technorati)

Mencionemos ahora otro valor para rel que puede ser utilizado para agregar etiquetados (tags) a nuestras páginas, y que es mayoritariamente utilizado por los blogs. El valor es justamente llamado: tag y su uso es alentado por sitios como Technorati que cuentan con tecnología para analizar este tipo de enlaces y poder categorizar nuestras webs mediante la aplicación de etiquetas (tags).

Colocando la siguiente linea de código en una página web estaremos automáticamente dandole la oportunidad a Technorati de asociar tal página con la etiqueta animaciones:

<a href="http://www.example.com/png/animaciones" rel="tag">animaciones</a>

8. Código con todos los ejemplos:

Ahora construyamos una página completa con todos estos ejemplos:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Vinculos, hipervinculos, enlaces</title>
</head>
<body>
<h1><a id="arriba" />Enlaces</h1>
<p><a href="http://www.example.com" title="Apunta hacia example.com">Enlace absoluto</a></p>
<p><a href="ejemplo02.html" title="Ir al ejemplo numero 2" rel="Prev">Enlace relativo</a></p>
<p><a href="#fin" title="Ir al final de la pagina mediante el ancla">Enlace hacia ancla</a></p>
<p><a href="mailto:mail@example.com">Correo de ejemplo</a></p>
<p><a href="ftp://ftp.gnu.org" title="Enlace al ftp del sitio GNU">FTP de GNU</a></p>
<p><a href="http://www.microsoft.com" title="Sitio que vende software privativo" rel="nofollow">Enlace con NoFollow</a></p>
<p><a href="http://technorati.com/tag/xhtml" rel="tag">xhtml</a> </p>
<!--Forzamos varios saltos de linea para notar el uso de los enlaces mediante anclas.-->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
<h3><a id="fin" />Sospecho que junto a mi hay un ancla.</h3>
<p><a href="#arriba" title="Volver a arriba">Volver</a></p>
</body>
</html>

9. Ejemplo

Ver EJEMPLO03.HTML

NOTA: Dentro de un párrafo vacio incluimos varios saltos de línea para que una de las anclas se desplace lo suficiente de la otra, para notar el efecto de navegar en la misma página.

Sigue habiendo muchos temas a tratar sobre enlaces, espero con el tiempo poder seguir ampliando este documento.

Página principal

15 aporte(s) de lectores:

Anonymous Anónimo aporta...

Hola,

solo un saludo y agradecerte por el excelente tutorial.

Un poco corto, pero me ha sido muy util. Un abrazo.

8:00 a.m.  
Blogger B.M. Leunam M.F. aporta...

exelente, es un poco corto pero es lo que me ha ayudado a obtener mas detalles en mi blog.

Este tipo de informacion es lo que realmente se valora por los usuarios, aunque no dejen mensajes. Gracias.

8:03 p.m.  
Anonymous Anónimo aporta...

Hola, lo he entendido casi todo menos el rel="tag"

eso solo lo relaciona con la pagina de technoari (no e acuerdo como se escribe), para aparecer en otros buscadoes hay mas etiquetas?

Un saludo

7:07 a.m.  
Blogger Quike aporta...

Muy buedn tuto!! Gracias!!

10:21 p.m.  
Anonymous Anónimo aporta...

Muy bueno el titulo, pero no falta una p de apertura?

Justo cuando terminas los br cierras una p que no se abrio.
salu2

6:32 p.m.  
Blogger Manuel aporta...

Estupendo y muy currado. Voy a tratar de sacarle todo el partido. Muchas gracias.

3:35 p.m.  
Anonymous Anónimo aporta...

muy bien para empezar este manual
Gracias

4:55 p.m.  
Blogger Cozinheiro aporta...

Belo Tutorial!
Muito obrigada.

5:36 p.m.  
Blogger Aguga aporta...

No pude encontrar información acerca del atributo REV. gracias.

5:55 p.m.  
Anonymous Anónimo aporta...

Gracias por el tip, pero fijate que utilize un ancla hacia otra pagina y resulto se fue a la zana que deseada, pero me cambio el nombre de la pagina y se agrego al nombre "#nombre del ancla".

Se pude corregir esto..?

5:55 p.m.  
Blogger FELIPE GARCÍA aporta...

Muchas Gracias por tu trabajo. Nos abre nuevas perpectivas...
Saludos
fetoPAX

1:17 a.m.  
Anonymous software colegios aporta...

Me gustaría darle las gracias por los esfuerzos que han hecho al escribir este artículo. Estoy esperando el mejor trabajo de lo mismo de usted en el futuro. De hecho, sus habilidades de escritura creativa me ha inspirado para iniciar mi propio blog BlogEngine ahora. Realmente el blog se está extendiendo sus alas con rapidez. Su escribir es un buen ejemplo de ello.

2:16 p.m.  
Anonymous Anónimo aporta...

hola, soy novato en esto de paginas web, tengo muchas ganas de aprender, este tutorial esta muy interesante, gracias por ponerlo. que Dios te ilumine...

11:56 p.m.  
Anonymous Anónimo aporta...

Hola tengo una duda y si quiero utilizar una ancla y almismo tiempo el link que se puede hacer me refiero a tener dos enlaces en un link dentro de una pagina

11:22 p.m.  
Anonymous sabalera aporta...

Buen tutorial. Sinceramente, gracias por compartir conocimiento.

12:35 p.m.  

Publicar un comentario

ATENCIÓN: Por favor intenta aportar o preguntar sobre el tema que trata la página. Otro tipo de consultas o criticas puedes dejarlas en el libro de visitas. Los aportes y preguntas están moderados simplemente para evitar spam o comentarios fuera de lugar.