Crear enlaces

¿Qué es un hipervínculo?

Los hipervínculos son elementos de un documento HTML que, al hacer clic en ellos o activarlos de otra forma, hacen que el navegador vaya a otros documentos o recursos, a veces a partes concretas de un documento. Los hipervínculos son una de las innovaciones más apasionantes que ofrece la web. Han formado parte de la web desde el principio, y son lo que hace que la web sea una red. Cada recurso de la web tiene una dirección, conocida como URL (Uniform Resource Locator, localizador uniforme de recursos), a la que apuntan los hipervínculos.

Por ejemplo, la página de inicio de la BBC contiene muchos enlaces que apuntan no solo a muchas noticias, sino también a distintas áreas del sitio (funciones de navegación), a páginas de inicio de sesión y registro (herramientas de usuario), etc.

Anatomía de un enlace

Un enlace básico se crea envolviendo el texto u otro contenido dentro de un elemento <a> y usando el atributo href, también llamado referencia de hipertexto o destino, que contiene la dirección web.

<p>
  Estoy creando un enlace a
  <a href="https://www.mozilla.org/en-US/">la página de inicio de Mozilla</a>.
</p>

Esto nos da el siguiente resultado:

Estoy creando un enlace a la página de inicio de Mozilla.

Enlaces de bloque

Como se mencionó antes, casi cualquier contenido se puede convertir en un enlace, incluso los elementos de bloque. Si quieres convertir un elemento de encabezado en un enlace, envuélvelo en un elemento de ancla (<a>), como se muestra en el siguiente fragmento de código:

<a href="https://developer.mozilla.org/en-US/">
  <h1>MDN Web Docs</h1>
</a>
<p>
  Documentando las tecnologías web, como CSS, HTML y JavaScript, desde 2005.
</p>

Esto convierte el encabezado en un enlace:

Enlaces con imágenes

Para convertir una imagen en un enlace, envuelve el elemento <img> con un elemento <a>. El ejemplo de abajo usa una ruta relativa para hacer referencia a un archivo de imagen SVG almacenado localmente.

img {
  height: 100px;
  width: 150px;
  border: 1px solid gray;
}

<a href="https://developer.mozilla.org/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>

Esto convierte el logotipo de MDN en un enlace:

Añadir información de asistencia con el atributo title

Quizá también quieras añadir un atributo title a tus enlaces. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que hay que tener en cuenta en el sitio web.

<p>
  Estoy creando un enlace a
  <a
    href="https://www.mozilla.org/en-US/"
    title="El mejor lugar para encontrar más información sobre la misión de Mozilla y cómo contribuir">
    la página de inicio de Mozilla</a
  >.
</p>

Esto nos da el siguiente resultado, y al pasar el puntero por encima del enlace se muestra el título como información emergente:

Crear tus propios enlaces de ejemplo

Bien, ¡ahora te toca a ti!

1. Haz clic en "Play" en el bloque de código de abajo para editar el ejemplo en el MDN Playground, o haz una copia de nuestra plantilla inicial y copia en ella el código de abajo.
2. Enlaza los textos «Ardilla roja» y «Ardilla gris oriental» a páginas de Wikipedia que describan esas especies. Da a cada enlace un atributo title con el nombre científico de la especie.
3. Enlaza el texto «página de Wikipedia» a la página principal de Wikipedia sobre las ardillas.

Si cometes un error, puedes borrar tu trabajo usando el botón Reset en el MDN Playground. Si te quedas realmente atascado, puedes ver la solución debajo del bloque de código.

<h1>Ardillas</h1>

<p>
  Se suele pensar en las ardillas como mamíferos arborícolas, pero su familia va
  mucho más allá e incluye roedores que viven en el suelo, como las ardillas
  listadas y los perritos de las praderas, y las ardillas voladoras.
</p>

<p>Dos de las especies de ardillas más comunes y conocidas son:</p>

<ul>
  <li>Ardilla roja</li>
  <li>Ardilla gris oriental</li>
</ul>

<p>
  Para tener un buen punto de partida sobre las ardillas, consulta su página de
  Wikipedia.
</p>

<h1>Ardillas</h1>

<p>
  Se suele pensar en las ardillas como mamíferos arborícolas, pero su familia va
  mucho más allá e incluye roedores que viven en el suelo, como las ardillas
  listadas y los perritos de las praderas, y las ardillas voladoras.
</p>

<p>Dos de las especies de ardillas más comunes y conocidas son:</p>

<ul>
  <li>
    <a
      href="https://es.wikipedia.org/wiki/Sciurus_vulgaris"
      title="Sciurus vulgaris">
      Ardilla roja
    </a>
  </li>
  <li>
    <a
      href="https://es.wikipedia.org/wiki/Sciurus_carolinensis"
      title="Sciurus carolinensis">
      Ardilla gris oriental
    </a>
  </li>
</ul>

<p>
  Para tener un buen punto de partida sobre las ardillas, consulta su
  <a href="https://es.wikipedia.org/wiki/Sciuridae">página de Wikipedia</a>.
</p>

Primer acercamiento a URLs y rutas

Los destinos de los enlaces son URL. Una URL, o localizador uniforme de recursos, es una cadena de texto que define dónde se encuentra algo en la web. Por ejemplo, la página de inicio de Mozilla en inglés se encuentra en https://www.mozilla.org/en-US/.

Un servidor web recibe solicitudes de URL y responde con el recurso correspondiente. La mayoría de los recursos se almacenan como archivos en el sistema de archivos del servidor, así que las URL de esos recursos suelen parecerse a rutas de archivo.

Veamos un ejemplo de estructura de directorios de un servidor:

La raíz de esta estructura de directorios se llama creating-hyperlinks. Al trabajar en local con un sitio web, tendrás un directorio que contiene todo el sitio. Dentro de la raíz tenemos un archivo index.html y un contacts.html. En un sitio web real, index.html sería nuestra página de inicio o página de destino (una página web que sirve como punto de entrada a un sitio web o a una sección concreta de un sitio web).

También hay dos directorios dentro de la raíz: pdfs y projects. Cada uno contiene un solo archivo: un PDF (project-brief.pdf) y un archivo index.html, respectivamente. Ten en cuenta que puedes tener varios archivos index.html en un proyecto, siempre que estén en ubicaciones distintas del sistema de archivos. El segundo index.html quizá sería la página de destino principal para la información relacionada con el proyecto.

Veamos algunos ejemplos de enlaces entre distintos archivos de esta estructura de directorios para mostrar los distintos tipos de rutas.

Mismo directorio

Si quieres incluir un hipervínculo dentro del index.html de nivel superior que apunte a contacts.html, puedes especificar como ruta solo el nombre del archivo al que quieres enlazar, porque está en el mismo directorio que el archivo actual. La URL que usarías es contacts.html:

<p>
  ¿Quieres contactar con un miembro del equipo? Encuentra los datos en nuestra
  <a href="contacts.html">página de contactos</a>.
</p>

También puedes empezar la ruta a un archivo del mismo directorio con un punto seguido de una barra: ./. El siguiente ejemplo equivale al anterior, pero algunas personas prefieren incluir ./ de todos modos porque les parece más claro:

<p>
  ¿Quieres contactar con un miembro del equipo? Encuentra los datos en nuestra
  <a href="./contacts.html">página de contactos</a>.
</p>

Bajar a subdirectorios

Si quieres incluir un hipervínculo dentro del index.html de nivel superior que apunte a projects/index.html, tienes que bajar al directorio projects antes de indicar el archivo al que quieres enlazar. Para ello, especificas el nombre del directorio, después una barra y después el nombre del archivo. La URL que puedes usar es projects/index.html:

<p>Visita la <a href="projects/index.html">página del proyecto</a>.</p>

Subir a directorios padre

Si quieres incluir un hipervínculo dentro de projects/index.html que apunte a pdfs/project-brief.pdf, tienes que subir un nivel de directorio y después volver a bajar al directorio pdfs. Para subir un directorio se usan dos puntos (..), así que la URL es ../pdfs/project-brief.pdf:

<p>Enlace al <a href="../pdfs/project-brief.pdf">resumen del proyecto</a>.</p>

Enlazar en relación con el directorio raíz

Las URL anteriores funcionan, pero ten en cuenta que, si mueves el archivo que enlaza o el archivo enlazado a otra ubicación, romperás el enlace.

Si quieres crear un enlace a una ubicación concreta que no se rompa si mueves el archivo que enlaza, puedes hacerlo poniendo una sola barra al principio de la ruta: esto indica que la ruta empieza en el directorio raíz del sitio. Por ejemplo, el enlace anterior dentro de projects/index.html se podría reescribir así:

<p>Enlace al <a href="/pdfs/project-brief.pdf">resumen del proyecto</a>.</p>

Ahora la ruta siempre empezará en el directorio raíz (creating-hyperlinks), irá al directorio pdfs y encontrará el archivo project-brief.pdf. Seguirá funcionando si mueves el archivo que enlaza a otra ubicación, por ejemplo, a/b/c/d/e/index.html.

Si mueves el archivo enlazado project-brief.pdf a otra ubicación, seguirás rompiendo el enlace.

Dos términos con los que te encontrarás en la web son ruta absoluta y ruta relativa.

• Ruta absoluta: apunta a una ubicación definida por su posición absoluta en tu sitio (o en otro lugar de la web). Por ejemplo, puedes crear un enlace absoluto que siempre apunte a la misma ubicación respecto al directorio raíz del sitio usando la barra al principio de la ruta, como vimos antes: /pdfs/project-brief.pdf.
• Ruta relativa: apunta a una ubicación relativa al archivo desde el que enlazas. En nuestro ejemplo anterior, usamos projects/index.html para crear un enlace relativo entre el archivo actual y un archivo llamado index.html que está dentro de un subdirectorio projects. Si movieras el archivo actual a otra ubicación, la ruta seguiría siendo relativa a ese archivo, pero apuntaría a otra ubicación absoluta.

Estos términos no siempre se usan de forma coherente. Por ejemplo, /pdfs/project-brief.pdf es absoluta respecto a la ubicación del archivo actual, pero relativa al nombre de dominio. Una URL que incluye el nombre de dominio completo, como https://example.com/pdfs/project-brief.pdf, es absoluta respecto a toda la web.

Enlazar con URL completas

Puedes especificar una URL completa como ruta, que siempre apuntará a la misma ubicación de la web, se use donde se use. Por ejemplo:

<a href="https://www.example.com/projects/">proyectos</a>

Este enlace siempre llevará a https://www.example.com/projects/, aunque tu sitio se mueva a otro dominio.

Enlaces internos y externos

Cuando un enlace apunta a un recurso de tu sitio, se llama enlace interno. Cuando un enlace apunta a un recurso de un sitio distinto, se llama enlace externo.

Al especificar un enlace externo, siempre tienes que incluir la URL completa como ruta, por ejemplo:

<a href="https://www.some-other-site.com">proyectos</a>

No puedes hacer referencia a una ubicación de otro sitio con una ruta como /pdfs/project-brief.pdf o projects/index.html, porque ambas son relativas a una ubicación de tu propio sitio, y el navegador necesita el nombre de dominio del sitio web para poder encontrarla.

Al especificar un enlace interno, puedes usar una ruta relativa o absoluta, o una URL completa. En nuestro ejemplo, estos enlaces son equivalentes:

<a href="https://www.example.com/projects/">proyectos</a>

<a href="projects">proyectos</a>

Te recomendamos la segunda opción, sin el nombre de dominio completo, por portabilidad. Como dijimos antes, si especificas https://www.example.com/projects/, siempre enlazará a https://www.example.com/projects/. Si después mueves tu sitio web a otro dominio, por ejemplo another-example.com, tendrás que cambiar todos los enlaces con URL completas. Si especificas rutas como /projects, seguirán funcionando, porque siguen siendo relativas a la estructura de directorios.

Fragmentos de documento

Es posible enlazar a una parte concreta de un documento HTML, llamada fragmento de documento, en lugar de solo al principio del documento. Los elementos del documento con un atributo id crean automáticamente un fragmento de documento al que se puede enlazar.

El caso de uso más habitual es enlazar a un encabezado concreto, que se ve así:

<h2 id="mailing_address">Dirección postal</h2>

Para enlazar a ese id concreto, lo incluyes al final de la ruta, precedido de una almohadilla (#), por ejemplo:

<p>
  ¿Quieres escribirnos una carta? Usa nuestra
  <a href="contacts.html#mailing_address">dirección postal</a>.
</p>

Incluso puedes usar la referencia al fragmento de documento por sí sola para enlazar a otra parte del documento actual:

<p>
  La <a href="#mailing_address">dirección postal de la empresa</a> está al final
  de esta página.
</p>

Cómo se traducen las URL en rutas de archivo

Todos los destinos de enlace que hemos visto hasta ahora son URL, que procesa un servidor web para encontrar el recurso correspondiente. Ningún contenido web puede ver directamente el sistema de archivos del servidor.

El ejemplo de servidor que hemos visto hasta ahora crea un sitio web estático. El servidor simplemente toma la parte pathname de la URL y busca directamente el archivo correspondiente en su sistema de archivos.

Si iniciamos un servidor web (consulta ¿Cómo configurar un servidor de pruebas local?) usando como raíz el directorio de nuestro sitio de ejemplo, y el nombre de dominio del sitio web es example.com, nuestro archivo pdfs/project-brief.pdf estaría disponible en https://www.example.com/pdfs/project-brief.pdf.

Todos los enlaces se resuelven en relación con la URL del documento actual, así que:

• En todas las páginas del dominio https://example.com, un enlace a /pdfs/project-brief.pdf siempre crea un enlace a https://www.example.com/pdfs/project-brief.pdf, cuyo pathname es /pdfs/project-brief.pdf. El servidor busca el directorio pdfs en el directorio raíz y después busca el archivo project-brief.pdf dentro de ese directorio.
• Un enlace a projects/index.html crearía un enlace a https://www.example.com/projects/index.html, pero solo si se incluye en un archivo dentro del directorio raíz, como el archivo index.html de nivel superior o contacts.html. Si lo incluyeras, por ejemplo, dentro de un archivo HTML en pdfs/index.html, enlazaría a https://www.example.com/pdfs/projects/index.html, cuyo pathname es /pdfs/projects/index.html, que no existe, así que acabarías con un enlace roto.

La página index.html predeterminada

Al hacer referencia a un archivo index.html, normalmente no hace falta incluir index.html en la URL o la ruta, porque los servidores web buscan una página de destino predeterminada llamada index.html cuando no se especifica un nombre de archivo.

Volviendo a nuestro ejemplo de la ruta projects/index.html, podríamos escribir la ruta simplemente como projects, y esto crearía un enlace a https://www.example.com/projects/index.html. Al navegar a la página, podríamos escribir la URL como https://www.example.com/projects/ y nos seguiría llevando al lugar correcto.

Buenas prácticas para los enlaces

Hay algunas buenas prácticas que seguir al escribir enlaces. Veámoslas ahora.

Redacción clara del enlace

Es fácil poner enlaces en tu página, pero no basta. Tenemos que hacer que nuestros enlaces sean accesibles para todos los lectores, sea cual sea su contexto y las herramientas que prefieran. Por ejemplo:

• A quienes usan lectores de pantalla les gusta saltar de enlace en enlace por la página y leer los enlaces fuera de contexto.
• Los motores de búsqueda usan el texto de los enlaces para indexar los archivos de destino, así que conviene incluir palabras clave en el texto del enlace para describir de forma eficaz a qué se enlaza.
• Los lectores visuales recorren la página por encima en lugar de leer cada palabra, y su vista se dirige a los elementos de la página que destacan, como los enlaces. Les resultará útil un texto de enlace descriptivo.

Veamos un ejemplo concreto:

Texto de enlace bueno: Descargar Firefox

<p><a href="https://www.firefox.com/en-US/">Descargar Firefox</a></p>

Texto de enlace malo: Pulsa aquí para obtener Firefox

<p>
  <a href="https://www.firefox.com/en-US/">Pulsa aquí</a> para obtener Firefox
</p>

Otros consejos:

• No repitas la URL como parte del texto del enlace: las URL quedan feas, y suenan aún peor cuando un lector de pantalla las lee letra por letra.
• No digas «enlace» o «enlaza a» en el texto del enlace: solo es ruido. Los lectores de pantalla ya indican que hay un enlace. Los usuarios visuales también sabrán que hay un enlace, porque los enlaces suelen tener otro color y estar subrayados (en general, no conviene romper esta convención, porque los usuarios están acostumbrados a ella).
• Haz que el texto del enlace sea lo más corto posible: es útil porque los lectores de pantalla tienen que interpretar todo el texto del enlace.
• Reduce al mínimo los casos en los que varias copias del mismo texto enlazan a sitios distintos. Esto puede causar problemas a quienes usan lectores de pantalla si hay una lista de enlaces fuera de contexto etiquetados como «haz clic aquí», «haz clic aquí», «haz clic aquí».

Enlazar a recursos que no son HTML: deja indicaciones claras

Al enlazar a un recurso que no se abrirá en la página actual como una «navegación normal», deberías añadir en el texto del enlace una indicación clara de lo que va a pasar. Por ejemplo, si se va a descargar o reproducir en streaming un recurso, o si el enlace va a abrir una ventana emergente o tener algún otro efecto potencialmente inesperado, debería indicarse en el texto. Es importante para los usuarios con conexiones de poco ancho de banda, que quizá quieran evitar descargar recursos de varios megabytes. También ayuda a que quienes usan lectores de pantalla sepan qué esperar, porque de otro modo podrían no darse cuenta de lo que está pasando.

Veamos algunos ejemplos para ver qué tipo de texto se puede usar aquí:

<p>
  <a href="/large-report.pdf" download>
    Descargar el informe de ventas (PDF, 10 MB)
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    Ver el video (se abre en otra pestaña, calidad HD)
  </a>
</p>

Usa el atributo download al enlazar una descarga

Cuando enlazas a un recurso que se va a descargar en lugar de abrirse en el navegador, puedes usar el atributo download para proporcionar un nombre de archivo predeterminado al guardarlo. Este es un ejemplo con un enlace de descarga a la última versión de Firefox para Windows:

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe">
  Descargar el último Firefox para Windows (64 bits) (inglés, EE. UU.)
</a>

Cuándo abrir los enlaces en una pestaña nueva

De forma predeterminada, los enlaces se abren en la misma pestaña que la página en la que están, lo que permite al usuario volver a la página anterior con el botón «Atrás» del navegador. Sin embargo, muchos sitios (incluido MDN) eligen abrir ciertos enlaces, sobre todo los externos, en una pestaña nueva. Para ello se establece el atributo target en "_blank".

Firefox lo desarrolla la
<a href="https://www.mozilla.org/en-US/" target="_blank">Fundación Mozilla</a>.

Abrir o no los enlaces en una pestaña nueva debería ser una decisión consciente, basada en consideraciones de diseño de la experiencia de usuario. Estas son algunas cosas que hay que pensar:

• Abrir los enlaces en una pestaña nueva presenta los dos documentos a la vez, lo que resulta útil para una navegación «en paralelo». En cambio, los enlaces que se abren en la misma pestaña son más bien una continuación de la página actual.
• Abrir los enlaces en una pestaña nueva puede desorientar a los usuarios acostumbrados a usar el botón «Atrás».
• Aunque los enlaces se abran de forma predeterminada en la misma pestaña, los usuarios pueden elegir abrirlos en una pestaña nueva con atajos de teclado u opciones del menú contextual. En cambio, los enlaces que se abren en una pestaña nueva son difíciles de abrir en la misma pestaña.
• A quienes usan lectores de pantalla les pueden confundir los enlaces que se abren en una pestaña nueva, porque quizá no se den cuenta de que se ha abierto y pierdan el contexto de dónde estaban en la página.

Un enfoque habitual es abrir los enlaces externos en pestañas nuevas y los internos en la misma pestaña. Algunos diseñadores prefieren abrir todos los enlaces en la misma pestaña. Si abres los enlaces en pestañas nuevas, se recomienda dar alguna pista sobre ellos, como un icono junto al texto del enlace.

Crear un menú de navegación

En este ejercicio, nos gustaría que enlazaras algunas páginas entre sí con un menú de navegación para crear un sitio web de varias páginas. Es una forma habitual de crear un sitio web: se usa la misma estructura en todas las páginas, incluido el mismo menú de navegación, así que al hacer clic en los enlaces da la impresión de que te quedas en el mismo sitio y se muestra contenido distinto.

Tendrás que hacer copias locales de las cuatro páginas siguientes, todas en el mismo directorio. Para ver la lista completa de archivos, consulta el directorio navigation-menu-start:

• index.html
• projects.html
• pictures.html
• social.html

Deberías:

1. Añadir en una de las páginas, en el lugar indicado, una lista no ordenada con los nombres de las páginas a las que hay que enlazar. Un menú de navegación suele ser simplemente una lista de enlaces, así que semánticamente es correcto.
2. Convertir cada nombre de página en un enlace a esa página.
3. Copiar el menú de navegación en cada página.
4. En cada página, quitar solo el enlace a esa misma página: es confuso e innecesario que una página incluya un enlace a sí misma. Además, la falta de un enlace sirve como buen recordatorio visual de en qué página estás.

El ejemplo terminado debería verse parecido a la siguiente página:

Enlace a correo electrónico

Es posible crear enlaces o botones que, al hacer clic en ellos, abran un nuevo mensaje de correo electrónico saliente en lugar de enlazar a un recurso o una página. Para ello se usa el elemento <a> y el esquema de URL mailto:.

En su forma más básica y habitual, un enlace mailto: indica la dirección de correo electrónico del destinatario. Por ejemplo:

<a href="mailto:nowhere@mozilla.org">Enviar un correo a nadie</a>

Esto da como resultado un enlace con este aspecto: Enviar un correo a nadie.

De hecho, la dirección de correo electrónico es opcional. Si la omites y tu href es «mailto:», el cliente de correo del usuario abrirá una ventana de correo saliente nuevo sin dirección de destino. Suele ser útil para los enlaces de «Compartir», en los que los usuarios pueden hacer clic para enviar un correo a la dirección que elijan.

Especificar detalles

Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes añadir cualquier campo de cabecera de correo estándar a la URL mailto que proporciones. Los más usados son «subject» (asunto), «cc» y «body» (cuerpo; que no es un verdadero campo de cabecera, pero te permite especificar un mensaje corto para el nuevo correo). Cada campo y su valor se especifican como un término de consulta.

Este es un ejemplo que incluye cc, bcc, asunto y cuerpo:

<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=El%20asunto%20del%20correo&body=El%20cuerpo%20del%20correo">
  Enviar un correo con cc, bcc, asunto y cuerpo
</a>

Estos son algunos otros ejemplos de URL mailto:

• mailto:
• mailto:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

Resumen

¡Eso es todo sobre los enlaces, al menos por ahora! Volverás a los enlaces más adelante en el curso, cuando empieces a ver cómo darles estilo. A continuación, te daremos algunas pruebas que puedes usar para comprobar si has entendido y retenido la información que te hemos dado sobre los enlaces.

• Anterior
• Overview: Estructurando la web con HTML
• Siguiente