Enlaces, anclas y navegación entre páginas

Qué son los enlaces?

Los enlaces (hipervinculos) son la base de la web. Permiten conectar páginas entre si, creando la red de documentos que conocemos como World Wide Web. En HTML, los enlaces se crean con el elemento <a> (anchor o ancla).

La estructura básica de un enlace es:

<a href="destino">Texto del enlace</a>

El atributo href (Hypertext Reference) indica el destino al que apunta el enlace. Puede ser una URL completa, una ruta relativa, un ancla interna o incluso un protocolo especial.

Tipos de enlaces

Enlaces externos

Apuntan a otra página web fuera de tu sitio. Usan una URL completa que incluye el protocolo (https://):

<a href="https://www.google.com">Buscar en Google</a>

Enlaces internos (relativos)

Conectan páginas dentro del mismo sitio web. Usan rutas relativas al documento actual o al directorio raiz:

<!-- Relativo al directorio actual -->
<a href="contacto.html">Ir a contacto</a>

<!-- Relativo a la raiz del sitio -->
<a href="/blog/primer-post.html">Leer post</a>

Anclas internas

Permiten navegar a una sección específica dentro de la misma página. Se usa el simbolo # seguido del id del elemento destino:

<a href="#conclusion">Ir a la conclusion</a>

<!-- Más abajo en la página -->
<h2 id="conclusion">Conclusion</h2>

Enlaces de correo y telefono

HTML permite crear enlaces que abren el cliente de correo o la aplicación de telefono del dispositivo:

<a href="mailto:[email protected]">Enviar correo</a>
<a href="tel:+59170012345">Llamar</a>

El atributo target

El atributo target controla donde se abre el enlace:

Cuando usas target="_blank", es importante agregar rel="noopener" por seguridad:

<a href="https://ejemplo.com" target="_blank" rel="noopener">
  Abrir en nueva pestana
</a>

Navegación con nav

El elemento <nav> define un bloque de navegación. Es un elemento semántico que ayuda a los lectores de pantalla a identificar la navegación del sitio:

<nav aria-label="Menu principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/cursos">Cursos</a></li>
  </ul>
</nav>

El atributo aria-label proporciona un nombre accesible para la navegación. Si tienes multiples bloques <nav> en la página (por ejemplo, menu principal y menu del pie de página), cada uno debe tener un aria-label distinto.

Enlaces como botones vs botones reales

Un error comun es usar <a> como boton o <button> como enlace. La regla general es:

• Usa <a> cuando el usuario navega a otra página o sección
• Usa <button> cuando el usuario ejecuta una accion (enviar formulario, abrir modal, etc.)

<!-- Correcto: navega a otra página -->
<a href="/registro">Registrate</a>

<!-- Correcto: ejecuta una accion -->
<button type="button" onclick="abrirMenu()">Menu</button>

Descarga de archivos

El atributo download indica al navegador que debe descargar el recurso en lugar de navegar a el:

<a href="/archivos/guia.pdf" download>Descargar guia PDF</a>
<a href="/archivos/guia.pdf" download="mi-guia">Descargar con nombre personalizado</a>

Práctica

1. Crea una barra de navegación: Construye un <nav> con aria-label que contenga una lista de al menos 4 enlaces internos usando rutas relativas.
2. Implementa anclas internas: Agrega al menos 3 secciones con id en tu página y crea un índice al inicio con enlaces ancla (#seccion) que naveguen a cada sección.
3. Agrega enlaces especiales: Anade un enlace mailto: para correo, un enlace tel: para telefono y un enlace con el atributo download para descargar un archivo.

En la siguiente leccion aprenderemos a insertar imagenes y contenido multimedia en nuestras páginas HTML.