1.4.4 Vínculos (enlaces, o hipervínculos)

también llamados hiperenlaces, enlaces o "links".

Es una palabra, frase o imagen de un hipertexto (HTML) que conecta con otra información. En la WWW, los enlaces (o vínculos) de una página WEB conectan con otras páginas, a menudo muy alejadas físicamente, pero relacionadas por sus temáticas. Hay enlaces de dos tipos genéricos, enlaces externos y enlaces internos:

Definir un enlace externo en un documento HTML:

Los enlaces externos son los que, al hacer click sobre ellos, siempre nos llevan a otro documento o página web diferente al que nos encontramos. Podemos definir un enlace desde el cual acceder a otra página cuando hacemos clic sobre el texto del enlace o sobre una imagen:

• <a href="http://direccion-web.com/lo_que-sea">palabra o una frase concreta</a>
  Tanto a la "palabra" como a "una frase concreta" se les denomina texto ancla (o en inglés: anchor text).
• <a href="http://direccion-web.com">una imagen como contenido</a>
  En el caso de imágenes, recordar siempre etiquetar la imagen con el atributo alt="descripción de la imágen" por motivos de accesibilidad y de indexación en buscadores.

Enlaces Internos:

Los enlaces internos son enlaces enlaces que nos conducen a otra parte del mismo documento en el que estamos (NO a otro documento html del mismo sitio web).

Para acceder a una parte concreta dentro de un documento html hay que insertar "anclas" dentro del un documento (no "texto ancla" o "anchor text" mencionados antes en la creación de enlaces), y estas "anclas" se definen con el atributo "name" en lugar de "href":

• <a name="texto_identificativo_del_ancla">entidad a la que hacemos referencia</a>
  En el "texto_identificativo_del_ancla" no se pueden usar guiones medios (-) ni espacios, ni caracteres especiales. Es bueno, en este caso, usar guiones bajos (_) para separar las palabras. En la "entidad a la que hacemos referencia" se puede poner una párrafo -con sus respectivas etiquetas de apertura <p> y cierre </p>-, una imagen o lo que queramos, pero es más normal que esa "entidad" sea algún encabezado tipo <H2>, <H3>, etc. El uso de "anclas" se recomendable para SEO.

Y el enlace a ese "ancla" que hemos definido:

<a href="#texto_identificativo_del_ancla">palabra o frase o imagen</a>

Y el enlace a un "ancla" de una página externa, u otro documento html del mismo site:

• <a href="url/direccion-web.html#texto_identificativo_del_ancla">palabra o frase o imagen</a>
  En primer lugar la url, que debe tener guiones medios (-) entre las palabras, después el símbolo almoadilla (#) y el "texto_identificativo_del_ancla" con guiones bajos (_) para separar las palabras

Atributos de enlaces

• Atributo "target": Tal y como estamos haciendo estos enlaces, lo normal es que al hacer clic sobre uno de ellos, la web a la que "apunta" ese enlace aparezca en la misma ventana del navegador web que estamos usando, pero hemos visto que en ocasiones, al hacer clic en un enlace de una página web, la web de dicho enlace se nos abre en otra ventana (o pestaña) del navegador.
  

  Para que los enlaces de nuestra web se comporten de esta manera, debemos agregar a nuestra etiqueta de enlace <a> el atributo target con el valor ="_blank":

  <a target="_blank" href="nuestro-enlace.html">texto o imagen </a>

  Otros dos valores que tiene el atributo target -hoy en día en desuso, ya que se empleaban en las web diseñadas con marcos o frames- son ="_self" y ="_top". Con ="_self", al hacer clic en un enlace, la pagina de dicho enlace se abre en el marco (o frame) actual, mientras que con ="_top" desaparecen los marcos y la web del enlace a la que hemos hecho clic se mostrará ocupando toda la ventana del navegador web.

  Si no usamos el atributo target, cualquier navegador se comportará como si se emplease target="_self", y cuando estamos navegando como usuario en una web, si queremos que los enlacen se comporten como target="_blank" deberemos hacer clic sobre ellos con el botón central (o presinando la ruleta) del ratón.

• Atributo "rel": para robots de buscadores (SEO)
  

  Teniendo en cuenta que el robot de Google solo mira los primeros 100 enlaces de un sitio web (también otros buscadores), en determinados casos puede que nos interese que algunos enlaces no sean considerados por los robots de los buscadores, para esto se puede usar el atributo rel... A los enlaces normales se les denomina DOFOLLOW (opción por defecto), mientras que a los que no queremos que sean indexados por los robots de búsqueda se les denomina NOFOLLOW. Para indicarle a los robots de búsqueda que no tengan en consideración un enlace:

  <a rel="nofollow" href="nuestro-enlace.html">texto o imagen</a>
• Atributo "title": se emplea para añadir una descripción al enlace, además, tiene más relevancia este atributo que el propio texto ancla del enlace:
  <a target="_blank" title="WarWys blog" href="http://warwys.blogspot.com">WarWys</a>
  WarWys
  Al situar el puntero del ratón sobre el texto del enlace (o texto ancla) aparece el valor del atributo 'title', y como se ha indicado arriba, el texto de 'title' tiene más relevancia que el propio texto ancla del enlace para los motores de búsqueda.

Sobre enlaces externos e internos

	Cuando hablamos de Diseño web	Cuando hablamos de SEO
Enlaces internos	Enlazan a una parte del mismo documento HTML en el que nos encontramos.	Enlazan a las páginas del mismo sitio web en el que nos encontramos.
Enlaces externos	Enlazan a otro documento HTML que puede ser del mismo sitio web o de otro sitio web diferente.	Enlazan a otro otro sitio web diferente al que nos encontramos.

Enlaces a direcciones de correo electrónico (email)

Al hacer click sobre este tipo de enlaces se abrirá el programa cliente de correo electrónico que tengamos por defecto instalado en el sistema con la dirección de correo electrónico del enlace para empezar a escribir el mensaje:

<a href="mailto:correoelectronico@dominio.com" >texto o imagen</a>

Estos enlaces están en desuso, ya que son escaneados con intenciones fraudulentas como el envío de spam (o coreo basura).