HTML

La etiqueta <a href="{URL}">texto o bloque</a> permite navegar a:

  • Otra web, con una URL absoluta
  • Otra página dentro de la web actual, con una URL relativa
  • Un elemento de la página actual, indicando el #fragmento

❓ Ejercicio 1: Crea los 3 enlaces indicados en los comentarios del siguiente HTML:

#contenido { margin:120px 0 120px 0; }

<body>
<h1>Navegación</h1>
<!-- 1. Enlace al elemento cuyo id es "contenido" -->
<a>Contenido</a>
<!-- 2. Enlace absoluto a https://en.wikipedia.org/wiki/Hyperlink -->
<a>Externo</a>
<!-- 3. Enlace relativo a ./dir/file.html -->
<a>Interno</a>

<p id="contenido">Este elemento puede enlazarse utilizando su id en el fragmento de la URL: #contenido</p>
<a href="#">Volver arriba</a>
</body>

🔍 Nota: Para volver tras pulsar tus enlaces, dale al botón "Rerun".

Los enlaces relativos pueden ser al dominio1 o al path actual:

Para que un enlace se abra en una nueva pestaña o ventana del navegador se utiliza el atributo target="_blank".

Algunos enlaces pueden tener un protocolo diferente a HTTP. Al pulsarlo, se abrirá la aplicación del SO asociada a dicho protocolo2 si la hubiera. Por ejemplo, este abrirá el programa de correo electrónico:

href="mailto:usuario@email.com?subject=Asunto&body=Contenido"

❓ Ejercicio 2: Modifica uno de los enlaces anteriores para que se abra en una ventana/pestaña nueva, y otro para que al pulsar se redacte un correo.

1

El enlace relativo del primer ejercicio lo es al dominio en el que se encuentra alojado que es Codepen.io, donde probablemente no exista el fichero ./dir/file.html.

2

Existen muchos otros protocolos o esquemas URI que podrían potencialmente utilizarse en un enlace.