• 1. Introducción
• 2. Primer link
• 3. Enlace a correo electrónico y otros recursos
• 4. Enlaces relativos y absolutos
• 5. Enlaces hacia anclas en la misma página
• 6. El atributo title
• 7. Atributos rel y rev
  • 7.1. Valor nofollow para rel
  • 7.2. Valor tag para rel (Technorati)
• 8. Código con todos los ejemplos:
• 9. Ejemplo

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.