18. Enlaces HTML: ¡construimos una web!

Christian Heilmann. 8 de julio del 2008. Última modificación: 9 de marzo de 2017 (equipo docente del grado de Multimedia). Publicado en: alt, href, ancla, título, enlace

En este apartado encontraréis información sobre uno de los inventos más revolucionarios de toda la historia de Internet: los enlaces. Los enlaces permiten que el lector de un documento los siga para ir hacia otro documento y pueda pasar de un servidor a otro sin necesidad de desconectarse y volver a conectarse cada vez. Desde que se inventaron han pasado muchas cosas, pero hay una que no ha cambiado nada: los enlaces son una parte muy importante de la experiencia en Internet, y según cómo los utilicéis podéis poner las cosas fáciles o difíciles a las personas que visiten vuestra web.

Cuando hayáis leído este apartado, sabréis cómo crear enlaces que sean fáciles de entender y que funcionen en cualquier entorno. Además, también aprenderéis cómo los enlaces afectan a vuestra popularidad en los motores de búsqueda y recibiréis algunos consejos sobre su descripción.

Nota

Como ya es habitual, este apartado va acompañado de un archivo "links_code.zip" que contiene varios archivos a los que iremos haciendo referencia.

Los contenidos de este apartado son los siguientes:

18.1. ¿Qué son los enlaces?
18.2. La anatomía de un enlace ancla
18.3. ¿Enlace o destino? Los atributos id y href
18.4. No permitáis ninguna ambigüedad en los enlaces
18.5. Marcos y ventanas emergentes: ¡ni hablar!
18.6. Ventajas de los enlaces de salida y de los enlaces de entrada
18.7. Descripción de los enlaces
18.8. Estilos de los enlaces
Resumen
Preguntas de repaso

18.1. ¿Qué son los enlaces?

Los enlaces son partes de un sitio web (normalmente creado con HTML, pero no siempre) que apuntan hacia otros recursos, como por ejemplo otros documentos HTML, archivos de texto, PDF, etc. Hay enlaces que el navegador debe seguir automáticamente y que se crean con elementos link (ya habéis encontrado algunos en apartados anteriores, que se utilizaban para importar archivos CSS a un documento HTML) y también hay enlaces que el usuario puede activar opcionalmente. Éstos se conocen como anclas y podéis añadirlos al documento con el elemento a.

18.2. La anatomía de un enlace ancla

Podéis convertir cualquier elemento insertado en el documento en un enlace ancla añadiendo un elemento a delante y detrás.

Por ejemplo, en el siguiente documento HTML el texto Yahoo Developer Network se convierte en un enlace.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
   <h1>A link to the YDN</h1>
   <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>

Archivo fuente: "linkexample.html"

Las personas que visiten la web y activen este enlace (al hacer clic con el ratón o al activarlo con el teclado o, en algunos casos, con la voz) dejarán el lugar actual y pasarán a la YDN. El enlace en sí experimenta otros cambios, que ya veremos cuando hablemos de los estilos de los enlaces.

El ancla tiene varios atributos que podéis añadir:

href: el recurso hacia el que apunta (ya sea un archivo externo o un ID de ancla).
id: el ID de ancla si el ancla es un destino y no un enlace.
title: información adicional sobre el recurso externo.

Ahora veremos en primer lugar los atributos más importantes y después hablaremos sobre lo que podéis hacer a fin de que todo sea más comprensible para las personas que visiten vuestra web.

18.3. ¿Enlace o destino? Los atributos `id` y `href`

Un elemento a puede tener varias funciones según los atributos que defináis. El atributo más habitual que utilizaréis es href, que define el recurso al que apunta el enlace. Este atributo puede contener diferentes valores:

Una URL en la misma carpeta (help.html), relativa a la carpeta actual (por ejemplo "../../help/help.html"; los 2 puntos significan "sube un nivel dentro de la jerarquía de carpetas del sitio") o absoluta en la raíz del servidor. Por ejemplo "/help/help.html"; una barra inclinada al principio de la dirección significa que ésta empieza en la raíz del ordenador en el que se encuentra la página.
Una URL en un servidor totalmente diferente. Por ejemplo "http://wait-till-i.com" o "ftp://ftp.opera.com/" o "http://developer.yahoo.com/yui".
Un identificador de fragmento o un nombre de ancla precedido de una almohadilla. Éste apunta a un destino dentro del mismo documento. Por ejemplo "#menu".
Una combinación de URL e identificadores de fragmentos: podéis enlazar directamente con una sección de un documento diferente haciendo que el atributo href apunte hacia una URL seguida de un identificador de fragmento. Por ejemplo, "http://developer.yahoo.com/yui/#cheatsheets".

Cualquiera de estos valores lo convertirá en un enlace, ya que apuntará hacia otro lugar. Por otra parte, un atributo id lo convertirá en un ancla dentro de la página; algo a lo que apunta otro enlace. Esto puede ser un poco confuso, ya que ambos utilizan el elemento de ancla (a). Para poder recordarlo más fácilmente, podéis verlo de la manera siguiente: un atributo id convierte un enlace en un ancla y lo podéis utilizar para enlazar con secciones específicas del documento.

El siguiente bloque de código HTML contiene ejemplos de todos los tipos diferentes de enlaces:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
   <h1>Different Link examples</h1>

   <h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
   <div id="nav">
      <ul id="toc">
         <li><a href="#sec1">Section One</a></li>
         <li><a href="#sec2">Section Two</a></li>
         <li><a href="#sec3">Section Three</a></li>
         <li><a href="#sec4">Section Four</a></li>
         <li><a href="#sec5">Section Five</a></li>
      </ul>
   </div>  

   <div id="content">
      <div>
         <h2><a id="sec1">Section #1</a></h2>
         <p><a href="#toc">Back to menu</a></p>
      </div>
      <div>
         <h2><a id="sec2">Section #2</a></h2>
         <p><a href="#toc">Back to menu</a></p>
      </div>
      <div>
         <h2><a id="sec3">Section #3</a></h2>
         <p><a href="#toc">Back to menu</a></p>
      </div>
      <div>
         <h2><a id="sec4">Section #4</a></h2>
         <p><a href="#toc">Back to menu</a></p>
      </div>
      <div>
         <h2><a id="sec5">Section #5</a></h2>
         <p><a href="#toc">Back to menu</a></p>
      </div>
   </div>

   <h2>Some other link examples</h2>
   <ul>
      <li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
      <li><a href="http://dev.opera.com/articles/view/the-freelancing-
       business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
      <li><a href="ftp://get.opera.com/pub/opera/win/">Download different
       Opera versions</a></li>
      <li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">
       Photo of my book</a></li>
   </ul>
</body>
</html>

Archivo fuente: "linkexamples.html"

Abrid este archivo en el navegador y experimentad. Veréis que si activáis cualquiera de los enlaces de la primera lista, pasaréis a la sección correspondiente del documento. Esto es así porque están conectados por el mismo identificador de fragmento; el primer enlace de la lista, por ejemplo, tiene un atributo href de #sec1, que coincide con el valor ID del enlace que hay en el interior del primer elemento h2 del contenido. Esto es todo lo que necesitáis para conectar dos elementos de ancla en un documento; utilizad el mismo valor precedido por una almohadilla si lo enlazáis en un atributo href. También puede que os hayáis dado cuenta de que la URL de la barra de ubicación del navegador ha cambiado y que ahora muestra un identificador de segmento al final, lo cual significa que los visitantes pueden añadir esta sección a las direcciones de interés o enviar el enlace por correo electrónico a otras personas para indicarles exactamente dónde deben ir.

No obstante, si activáis cualquiera de los enlaces "Back to menu" (volver al menú) ocurrirá lo mismo. ¿Cómo puede ser? Los identificadores de fragmento pueden ser cualquier elemento con un ID.

Para recapitular:

Los enlaces de ancla pueden tener un identificador de fragmento como valor del atributo href; este identificador de fragmento debe empezar con una almohadilla (#).
Al activarlo, este enlace llevará hacia cualquier elemento HTML con un id de este valor. Estos ID de cada página deben ser únicos.
Los ID siguen algunas convenciones con respecto a los nombres. Las más importantes es que deben empezar con un carácter alfanumérico y que no pueden contener espacios.

Todo esto cubre el menú y las diferentes secciones del ejemplo, pero ¿qué sucede con los otros enlaces? Si los probáis, veréis que apuntan hacia destinos diferentes: uno va a otro sitio, otro muestra una fotografía y el tercero muestra una sección concreta de otra página web (que se encuentra pasando a un ID específico). Si todo ha funcionado bien, ¡perfecto! Pero ¿qué sucede si no habéis entendido, o el navegador no ha entendido, algunos de estos recursos?

18.4. No permitáis ninguna ambigüedad en los enlaces

Lo más importante que debéis recordar sobre los enlaces es que son una parte básica para vuestra relación con las personas que os visiten. Estas personas se fían de que cuando les ofrezcáis un enlace podrán seguirlo y acceder a información de calidad y pertinente. Si vuestros enlaces no funcionan porque el recurso al que apuntan no está disponible o se encuentra en un formato que el visitante no puede leer, habréis traicionado su confianza y habréis perdido credibilidad. No debéis permitir nunca que esto suceda.

18.4.1. Ofrecer información adicional con un atributo `title`

Igual que con cualquier otro elemento HTML, podéis añadir un atributo title a un elemento a para añadir información adicional. Los navegadores mostrarán lo que se conoce como un indicador de función cuando los visitantes pasen el cursor del ratón sobre el enlace. Este indicador de función les indica la naturaleza de este enlace.

Por ejemplo, podéis escribir una pequeña introducción al contenido y la ubicación del documento enlazado:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
   <h1>Adding extra information with a title attribute</h1>
   <ul>
      <li>Find more information on the <a title="The Yahoo Developer
       Network is the main hub for all the developer tools Yahoo offers,
       including the Yahoo User Interface Library (YUI) and the Design
       Patterns repository" href="http://developer.yahoo.com">Yahoo
       Developer Network</a>.</li>
   </ul>
</body>
</html>

Archivo fuente: "titleexample.html"

Figura 1. Añadir un atributo de título para mostrar la información como un indicador de función cuando los visitantes pasen por encima el enlace.

Pero no podéis esperar que los visitantes tengan la suficiente paciencia y coordinación mano-ojo para poder fiaros de este recurso para dar información crucial. Es muy probable que los usuarios con alguna discapacidad visual, que no pueden ver la página, no puedan acceder a esta información. Aunque los lectores de pantalla incluyen la opción de leer en voz alta los atributos title para el usuario final, esta opción está desactivada por defecto; por este motivo, no deberíais utilizar nunca el atributo title para dar información crucial sobre el enlace. Esa información crucial podría ser:

Enlazar con recursos no HTML, como archivos PDF, imágenes, vídeos, archivos de sonido o descargas.
Hacer que salgamos del sitio actual y que pasemos a otro servidor (enlaces externos versus enlaces internos).
Enlazar con un documento que se abrirá en un marco diferente o en una ventana emergente.

18.4.2. Enlaces a recursos no HTML: no obliguéis a los visitantes a hacer conjeturas

Puede ser muy molesto hacer clic en un enlace y que el navegador no sepa qué hacer con aquello a lo que apunta el. No obstante, no es nada extraño ver sitios web que enlazan con imágenes, documentos PDF y vídeos sin avisar a los visitantes para que estén preparados. Los vídeos son una causa muy habitual de problemas de los navegadores. Además, también es posible que el recurso tenga un volumen muy grande (un PDF de 20 MB, por ejemplo), lo que significa que quizá los visitantes preferirían descargarlo en lugar de abrirlo dentro del navegador y añadirlo así a un consumo de memoria que ya es considerable; o quizá incluso decidirían no acceder a él.

Uno de los factores principales del éxito de un producto web es el hecho de no obligar a las personas que lo visitan a hacer conjeturas sobre qué pasará cuando hagan algo; siempre se debe explicar claramente qué efectos tendrán sus acciones. En el caso de los enlaces, todo lo que debéis hacer para evitar muchas frustraciones es explicar bien a los visitantes qué es el recurso al que lleva el enlace.

Aquí encontraréis algunos ejemplos:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
   <h1>Linking non-HTML resources</h1>
  
   <ul>
      <li>Find more information on the <a href="http://developer.yahoo
       .com">Yahoo Developer Network site (external)</a></li>
      <li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript
       -DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
      <li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download
       different Opera versions from their FTP (external)</a></li>
      <li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_
       0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
   </ul>
</body>
</html>

Archivo fuente: "linkingnonhtml.html"

Si ofrecéis toda esta información sobre el archivo enlazado y el espacio que ocupa, los visitantes podrán decidir qué harán y no deberéis suponer que tienen el navegador configurado de una manera concreta o algunos programas instalados. Si lo combináis con unos estilos inteligentes, incluso podréis conseguir que tenga un buen aspecto y que todo sea muy intuitivo. Si os queréis asegurar del todo, también podéis ofrecer una sección de ayuda que explique qué son los diferentes formatos de archivo y dónde se pueden conseguir los programas necesarios para abrirlos.

18.4.3. Enlaces externos y enlaces internos

Una de las cosas que más temen los responsables de los negocios con respecto a los sitios web de sus compañías es que la gente que los visite salga de ellos prematuramente. Ésta es a menudo la razón para no ofrecer nunca enlaces hacia terceros (a menos que éstos terceros paguen dinero por el privilegio del redireccionamiento del tráfico hacia ellos). Más adelante ya volveremos a hablar de este criterio tan equivocado; de momento, hablaremos de lo que hace la gente para evitar que los visitantes abandonen su sitio y las consecuencias que tienen estas medidas para el éxito del sitio web.

18.5. Marcos y ventanas emergentes: ¡ni hablar!

El temor a perder visitantes que van hacia otros sitios web, combinado con el deseo de seguir enlazando con estos otros sitios, nos ha traído algunos inventos en el desarrollo de las webs que se han convertido durante años en un verdadero problema para la usabilidad de los sitios: los marcos y las ventanas emergentes.

El uso de marcos HTML significa que estáis separando la página que aparece en el navegador en diferentes documentos. La ventaja es que el documento sigue siendo aparentemente el mismo incluso al cargar partes de éste, ya sea desde el servidor propio o desde servidores de terceros. Pero aquí es donde acaba su utilidad; los marcos son una experiencia terrible para el usuario y, de hecho, perniciosos:

Los motores de búsqueda no pueden indexar nunca toda la página, sino que en los resultados de la búsqueda sólo muestran partes que no tienen ningún sentido fuera de contexto.
Los visitantes no pueden añadir la página a la lista de direcciones de interés; la próxima vez que abran la página desde esta lista verán el estado inicial del conjunto de marcos y no la página tal como la dejaron la última vez.
Los visitantes que dependan de tecnologías de asistencia lo tienen muy difícil para navegar por conjuntos de marcos.
Es posible que los sitios web de terceros no quieran aparecer dentro de un conjunto de marcos y que utilicen scripts "rompedores de marcos", que sustituirán a los conjuntos de marcos para la URL real cuando intentéis incrustarlos. Esto se hace, por ejemplo, para evitar que los delincuentes consigan con engaños que los usuarios de Internet introduzcan información como el número de la tarjeta de crédito en un sitio web que aparentemente parece de un banco (lo que se conoce como phishing).

Los enlaces dentro de un conjunto de marcos utilizan el atributo target del ancla para dirigirse al marco correcto. Cada uno de los marcos de un conjunto de marcos tiene un nombre concreto y al activar el enlace se abre el documento definido en el atributo href de este marco. Si el conjunto de marcos no está disponible (por ejemplo, cuando un visitante ha encontrado el documento con los enlaces por medio de un motor de búsqueda), cada uno de los enlaces se abre en una nueva instancia del navegador.

Abrir una nueva instancia del navegador es otra de las maneras habituales de enlazar con sitios web de terceros, ya sea con una ventana emergente de scripts o con un atributo target con el valor _blank. El hecho de que todos los navegadores modernos tengan un bloqueador de ventanas emergentes ya es toda una indicación de si es seguro o no fiarse de esta técnica... ¡No lo es en absoluto!

Claro y conciso: no utilicéis el atributo target para crear enlaces a no ser que sepáis exactamente qué estáis haciendo. De todas maneras, ésta ya es una idea anticuada; actualmente la mayoría de los navegadores tienen interfaces con pestañas, con lo cual los usuarios pueden abrir sitios de terceros en el fondo para volver a ellos más tarde y mientras tanto quedarse en vuestro sitio web. En algunas circunstancias, es posible que queráis indicar la diferencia entre los enlaces externos e internos, pero debéis dejar siempre que sea el visitante quien decida qué hará con ellos.

18.6. Ventajas de los enlaces de salida y de los enlaces de entrada

Hay algunas buenas razones para enlazar con sitios de terceros incluso cuando éstos son de la competencia.

Os da credibilidad ante vuestros visitantes; estáis tan seguros de la calidad de vuestro contenido, que no os asustáis ante la competencia.
Es una oportunidad para ofrecer un servicio completo; os podéis vincular al contenido y a artículos o incluso a productos de otros sitios web que vosotros no ofrecéis pero que pueden ser de interés para los visitantes que quieren ampliar más en el tema en cuestión.
Podéis demostrar que tenéis razón mencionando un artículo anterior de un tercero y ofreciendo una solución mejor o diferente y hacer referencia a este artículo mediante un enlace.

La utilidad de los enlaces de entrada (los enlaces que apuntan desde el sitio web de un tercero hacia el vuestro) genera mucho menos debate. Cuantos más sitios web válidos y de alta calidad se enlacen con el vuestro con las palabras clave pertinentes, más arriba apareceréis en los motores de búsqueda como Google. Pero antes de que eso suceda, debéis demostrar que no tenéis miedo de enlazaros con otros sitios.

Las palabras clave pertinentes nos llevan hacia otra parte muy importante de la creación de unos buenos enlaces: cómo describirlos.

18.7. Descripción de los enlaces

Ya hemos hablado un poco de ellos en el subapartado sobre los enlaces hacia recursos no HTML, pero siempre es bueno recordar que los enlaces no sólo son parte del texto de la página, sino que también son unos elementos interactivos del documento.

Algunas tecnologías de asistencia ofrecen una lista de los enlaces en vez de todo el documento con el fin de permitir a los usuarios que puedan navegar rápidamente por él, lo que significa que debéis comprobar que los textos de vuestros enlaces tengan sentido fuera del contexto en el que se encuentran. Podéis comprobarlo muy fácilmente en Opera abriendo cualquier sitio web y seleccionando "Tools" > "Links" (herramientas > enlaces) en el menú o presionando "Ctrl" + "Mayúsculas" + "L". Se abrirá una pestaña nueva en la que podréis ver todos los enlaces del documento y hacia dónde apuntan.

Esto significa que debéis comprobar no sólo que todos los textos de los enlaces tengan sentido, sino también que no haya varios enlaces con la misma descripción pero que apunten hacia recursos diferentes. El error clásico que se comete es el de los enlaces "haced clic aquí" que se describen, por ejemplo, como "Para descargar la última versión de nuestra herramienta, haced clic aquí". Es mucho mejor utilizar un texto de enlace que explique hacia dónde apunta; en este caso, "Podéis descargar y probar la última versión de nuestra herramienta".

Esto mismo también se aplica a los enlaces "más". Los encontraréis en los sitios de noticias, en los que veréis un titular y un texto resumido y un enlace "más" o "noticia completa" que se debe seguir. La solución a este problema es utilizar una imagen "más" enlazada y darle un texto alternativo único o añadir un espacio dentro del enlace después de "más" y ocultarlo con el CSS. Explicaremos todos estos trucos más detalladamente en el apartado sobre los menús y la navegación, que encontraréis más adelante en este curso.

Ved también

Podéis ver el apartado 23 de este módulo.

18.8. Estilos de los enlaces

Todavía no ha llegado el momento de hablar del CSS, pero en este punto es útil tener en cuenta que el aspecto de los enlaces es muy importante y que hay varios y diferentes estados de enlaces que hay que considerar. Los estados de los enlaces (que más adelante se relacionan con los pseudoselectores del CSS; puede sonar complejo, pero no lo es) son:

link: es el estado por defecto; define el aspecto que deben tener los enlaces en una parte concreta del documento. Por defecto, los enlaces no visitados son de color azul.
visited: el estilo de un enlace que ya se ha visitado (y que quizá ya se encuentra en la memoria caché del navegador). Por defecto, los enlaces ya visitados son de color púrpura.
hover: el estilo de un enlace mientras el cursor del ratón se encuentra sobre él.
active: el estilo del enlace mientras está activado; es decir, mientras está en curso la conexión con el otro sitio; también es el estilo del último enlace activado cuando llegáis al documento al ir atrás en el navegador.

Resumen

Esta vez hemos explicado muchas cosas, pero es muy importante recordar el funcionamiento de los enlaces y qué deben hacer. A lo largo de vuestra trayectoria profesional como desarrolladores web, aprenderéis muchos trucos y técnicas para anular estos comportamientos por defecto, y esperamos que os paréis a pensar si lo que queréis hacer es realmente necesario.

Hemos hablado de:

La anatomía del elemento a y sus atributos (no desaprobados).
La diferencia entre los elementos a como enlaces (con un atributo href) y como anclas (con un atributo name).
La necesidad de que el nombre de un ancla sea único.
La necesidad de explicar a los visitantes qué pueden esperar cuando siguen un enlace (el formato del archivo y si es muy grande).
Cómo añadir información con el atributo de título que se muestra como un indicador de función; y por qué ésta no es una manera segura de ofrecer información crucial.
La diferencia entre los enlaces externos (que apuntan hacia sitios web de terceros) y los internos (que apuntan hacia documentos del mismo servidor).
Las prácticas anticuadas, como las ventanas emergentes y los marcos, y por qué hay que evitarlas.
Las ventajas de enlazarse con otros sitios y que otros sitios se enlacen con el vuestro.
Cómo describir adecuadamente los enlaces de manera que tengan sentido fuera de contexto, y por qué es necesario.
Los antecedentes de los estilos básicos de los enlaces.

Con todos estos conocimientos, deberíais ser capaces de escribir documentos HTML que se enlacen adecuadamente, y ya estáis preparados para empezar a pensar en los menús y la navegación del sitio.

Preguntas de repaso

¿Qué problema tiene el enlace siguiente: <a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?
¿Para qué sirve el atributo target en los enlaces? ¿Se puede utilizar de alguna manera positiva?
Hemos hablado sobre las relaciones de los enlaces y las conexiones entre los enlaces y las anclas. ¿Hay algún atributo para los enlaces que describa también las relaciones entre documentos?
¿Cómo se puede escribir un enlace que envíe a los visitantes hacia un elemento que hay más abajo de la página al hacer clic en él? ¿Qué hay que comprobar de antemano?