Enlaces y Rutas

Internet existe gracias a los enlaces. Son el hilo que conecta una página con otra. Con la etiqueta <a> puedes crear ese hilo desde tu propio HTML.

1. La etiqueta <a>: el ancla

La "a" viene de anchor (ancla en inglés). Su atributo más importante es href, que define a dónde va el enlace.

<!-- Enlace externo: va a otra web -->
<a href="https://google.com">Ir a Google</a>

<!-- Abre en pestaña nueva -->
<a href="https://google.com" target="_blank">Abrir en nueva pestaña</a>

<!-- Enlace interno: va a otra página de tu sitio -->
<a href="contacto.html">Ir a Contacto</a>

2. Rutas: ¿cómo le dices dónde está el archivo?

Aquí es donde muchos principiantes se confunden. Una ruta es la dirección de un archivo dentro de tu computadora o servidor. Hay dos tipos:

• 📍 Ruta Absoluta
  La dirección completa desde el inicio. Incluye el protocolo (https://).
  
  "https://misitioweb.com/paginas/contacto.html"
  Úsala para enlaces a otras webs.
• 📂 Ruta Relativa
  La dirección desde donde está tu archivo actual. Sin protocolo.
  
  "contacto.html" — mismo nivel de carpeta
  "paginas/contacto.html" — entra a una carpeta
  "../contacto.html" — sube un nivel y busca el archivo
  Úsala para navegar dentro de tu propio sitio.

📁 MiWeb/
├── 📄 index.html         ← estás aquí
├── 📄 contacto.html
└── 📁 paginas/
    ├── 📄 sobre-mi.html
    └── 📄 proyectos.html

3. Casos especiales

• ⚓ Ancla en la misma página
  Con # puedes saltar a una sección de la misma página. Primero le pones un id al elemento destino, luego enlazas a ese id.

  <!-- El destino -->
  <h2 id="contacto">Contacto</h2>
  
  <!-- El enlace que salta a él -->
  <a href="#contacto">Ir a Contacto</a>

• 📧 Enlace de correo
  Con mailto: abres el cliente de correo del usuario directamente.

  <a href="mailto:hola@ejemplo.com">Escríbeme</a>

• 🚧 Enlace vacío (placeholder)
  Cuando todavía no sabes a dónde va un enlace, usa # como destino temporal. No redirige a ningún lado.

  <a href="#">Próximamente</a>