Logo de Mosaic
El texto central de HTML
Enlaces HTML: ¡construimos una web!

18. Enlaces HTML: ¡construimos una web!

Christian Heilmann. 8 de julio del 2008. 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:

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:

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:

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: "linkexample.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:

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:

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 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.

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:

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:

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

  1. ¿Qué problema tiene el enlace siguiente: <a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?

  2. ¿Para qué sirve el atributo target en los enlaces? ¿Se puede utilizar de alguna manera positiva?

  3. 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?

  4. ¿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?

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :