La etiqueta <a>
Enlaces
En el código fuente HTML los enlaces se identifican mediante la etiqueta <a> y su atributo href, que contiene el URI del destino al que conduce el enlace. Los URI del destino pueden ser absolutos (http://www....) o relativos (con respecto al directorio actual).
Los enlaces de texto se muestran en los navegadores de color azul y subrayados.
<p>Enlace a la <a href="https://www.cdlibre.org/">página principal de cdlibre</a>.</p>
Enlace a la página principal de cdlibre.
<p>Logotipo de cdlibre: <a href="https://www.cdlibre.org/"><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre" title="Logotipo de cdlibre" width="118" height="70"></a></p>
Logotipo de cdlibre: 
Si en el atributo href se escribe simplemente el carácter almohadilla (#), casi todos los navegadores se desplazan al principio de la página (aunque creo que este comportamiento no está definido en ninguna recomendación).
<p>Este es un <a href="#">enlace al principio de esta página</a>.</p>
Este es un enlace al principio de esta página.
Destinos
Con relación a los destinos de los enlaces, podemos distinguir tres tipos de destinos:
- archivos (página web, imagen o cualquier otro tipo de archivo)
- directorios
- elementos dentro de una página web
En cada caso, la situación es ligeramente distinta:
- Si el destino es un archivo, es suficiente con conocer la dirección (URL) del archivo. Si el navegador puede mostrar el archivo, el archivo se mostrará en el navegador. Los navegadores pueden mostrar ciertos archivos directamente (por ejemplo, páginas web o imágenes) o mediante plug-ins (por ejemplo, archivos flash, pdf, etc.). Si el navegador no puede mostrar el archivo, el navegador preguntará al usuario qué quiere hacer con el archivo (guardarlo, elegir el programa con el que abrir el archivo, etc.)
<p>Enlace a la <a href="https://www.cdlibre.org/otros/novedades.html"> página de novedades de cdlibre</a>.</p>Enlace a la página de novedades de cdlibre.
<p>Enlace al <a href="https://www.cdlibre.org/img/cdlibre_logo.png">logotipo de cdlibre</a>.</p>Enlace al logotipo de cdlibre.
<p>Enlace al <a href="../ejercicios/imagenes/florencia/florencia-plantilla.zip">archivo .zip de un ejercicio</a> de estos apuntes</p>Enlace al archivo .zip de un ejercicio de estos apuntes
- Si el destino es un directorio, el servidor puede estar configurado para mostrar un archivo determinado (index.html, home.html, index.php, etc.), para mostrar el contenido del directorio, o incluso para rechazar la petición.
<p>Enlace a la <a href="https://www.cdlibre.org/">página principal de cdlibre</a>.</p>Enlace a la página principal de cdlibre.
<p>Enlace al <a href="https://www.cdlibre.org/consultar/catalogo/">catálogo de software de cdlibre</a>.</p>Enlace al catálogo de software de cdlibre.
<p>Enlace al <a href="https://www.mclibre.org/consultar/htmlcss/html/">directorio de lecciones de html de estos apuntes</a>.</p>
- Si el destino es un elemento de una página web (por ejemplo, un párrafo en el interior de una página web), es necesario identificar de forma única el punto de destino mediante el atributo id.
En este caso, el atributo href contiene la dirección de la página, el carácter almohadilla (#) y el atributo id del destino. En caso de ser un enlace dentro de la misma página sólo se necesita el carácter almohadilla (#) y el atributo id del destino.
<p>Enlace a <a href="https://www.cdlibre.org/otros/faq.html#descargado">una pregunta de la FAQ de cdlibre</a>.</p>Enlace a una pregunta de la FAQ de cdlibre.
<p>Enlace al <a href="#ejemplo">párrafo siguiente</a>.</p> <p id="ejemplo">Este párrafo es el destino del enlace anterior.</p>Enlace al párrafo siguiente.
Este párrafo es el destino del enlace anterior.
Como se comenta en la lección sobre elementos obsoletos, en HTML 3.2 y anteriores los destinos se identificaban mediante la etiqueta <a> y el atributo name. En HTML 4.X y XHTML 1.0, los destinos se podían seguir identificando así, pero se recomendaba utilizar el entonces nuevo atributo id. En XHTML 1.1 se eliminó el atributo name de la etiqueta <a> y sólo se podía utilizar el atributo id para identificar los destinos. En HTML 5 también se eliminó el atributo name de la etiqueta <a> y sólo se podía utilizar el atributo id para identificar los destinos.
Enlaces no HTTP
Los navegadores son capaces de gestionar algunos tipos de enlaces no HTTP, aunque normalmente lo que hacen es redirigir la petición a otra aplicación del sistema operativo, por lo que se necesita configurar el navegador.
Por ejemplo, se puede configurar el navegador de manera que un enlace con el atributo href con el valor mailto:dirección_de_correo_electrónico abra automáticamente el cliente de correo electrónico (Thunderbird, Outlook, Evolution, etc.) con un correo dirigido a la dirección indicada. El uso cada vez más extendido del correo web hace que esta opción sea un engorro más que una ayuda.
<p>Haciendo clic en este enlace se abrirá el cliente de correo para <a href="mailto:fulanito@example.org">enviar un correo a fulanito@example.org</a> (dirección ficticia).</p>
Haciendo clic en este enlace se abrirá el cliente de correo para enviar un correo a fulanito@example.org (dirección ficticia).
Contexto de navegación: Atributo target
El atributo target permite especificar el contexto en el que se resuelve el enlace. Los valores posibles son:
- _blank: el enlace se abre en una nueva pestaña
- _self: el enlace se abre en el mismo elemento que contiene el enlace (puede ser la propia pestaña o un elemento contenedor como <object> o <iframe>). Por motivos de seguridad, si el elemento incrustado pertenece a un dominio distinto, sólo se mostrará si el servidor de dicho dominio lo autoriza (aclaración en ayuda de Firefox)
- _parent: el enlace se abre en el elemento de nivel inmediatamente superior al que contiene el enlace
- _top: el enlace se abre en el elemento del nivel más alto (es decir, la pestaña del navegador)
Como la posibilidad de incrustar un sitio web dentro de otro puede facilitar que se engañe a los visitantes, cada vez más sitios web impiden que su contenido se incruste en otros sitios. Lo que sí podemos es incrustar contenido del propio sitio.
Los siguientes ejemplos funcionan con cualquier destino porque al hacer clic en los enlaces los destinos no se muestran incrustados, sino ocupando la pestaña completa (tanto si se trata de una nueva pestaña como de la misma pestaña).
<p>Esta página contiene un <a href="https://mclibre.org/" target="_blank">enlace a mclibre.org</a> que se abre en una nueva pestaña.</p>
<p>Esta página contiene un <a href="https://mclibre.org/" target="_blank">enlace a mclibre.org</a> que se abre en una nueva pestaña.</p>
<p>Esta página contiene un <a href="https://www.w3.org/" target="_parent">enlace a w3.org</a> que se abre que se abre en la misma pestaña en la que se muestra esta página (pero lo hace porque está incluida en un <strong>iframe</strong>)</p>
<p>Esta página contiene un <a href="https://www.w3.org/" target="_top">enlace a w3.org</a> que se abre en la misma pestaña en la que se muestra esta página.</p>
Los siguientes ejemplos funcionan porque los destinos de los enlaces son del mismo dominio que esta página (mclibre.org) y se pueden mostrar incrustados.
<p>Esta página contiene un <a href="https://mclibre.org" target="_self">enlace a mclibre.org</a> que se abre en el elemento que contiene esta página.</p>
<p>El enlace se abre porque la página que contiene esta página está en el dominio mclibre.org.</p>
<p>Esta página contiene un <a href="https://mclibre.org/" target="_parent">enlace a mclibre.org</a> que se abre en el elemento que contiene el elemento que contiene esta página.</p>
<p>El enlace se abre porque la página que contiene esta página está en el dominio mclibre.org.</p>
Los siguientes ejemplos NO funcionan porque los destinos de los enlaces pertenecen a un dominio distinto al de esta página (mclibre.org) y NO se pueden mostrar incrustados.
<p>Esta página contiene un <a href="https://www.w3.org/" target="_self">enlace a w3.org</a> que se abre en el elemento que contiene esta página.</p>
<p>Como el sitio web w3.org está configurado para NO poderse abrir en este tipo de elementos, el destino NO se mostrará.</p>
<p>Esta página contiene un <a href="https://www.w3.org/" target="_parent">enlace a w3.org</a> que se abre en el elemento que contiene el elemento que contiene esta página.</p>
<p>Como el sitio web w3.org está configurado para NO poderse abrir en este tipo de elementos, el destino NO se mostrará.</p>
El comportamiento predeterminado de los navegadores es abrir los enlaces en el mismo nivel en que se encuentra el enlace (es decir, el valor _self):
<p>Esta página contiene un <a href="http://www.example.com/">enlace a example.com</a> que se abre en el elemento predeterminado.</p>
<p>Como el sitio web w3.org está configurado para NO poderse abrir en este tipo de elementos, el destino NO se mostrará.</p>
El atributo target con el valor _blank provoca que el navegador abra el enlace en una nueva pestaña. Por desgracia, desde esa nueva pestaña se puede cambiar la página que muestra la pestaña inicial, lo que permite engañar al usuario (como explica Mathias Bynens). Esta posibilidad se puede controlar mediante el atributo rel="noopener", que impide que la nueva pestaña pueda manejar la primera. Por ese motivo, para proteger a nuestros visitantes, se recomendaba añadir siempre este atributo a cualquier enlace a una página externa que se abriera en una nueva pestaña.
En 2018 los navegadores empezaron a tratar de impedir este tipo de ataque, aplicando automáticamente el atributo rel="noopener" a cualquier página que contenga target="_blank". Safari lo hace desde Safari 12.1 (octubre de 2018). Firefox lo hace desde Firefox 79 (julio de 2020). Google Chrome lo hace desde Chrome 88 (enero de 2021).