Crear hipervínculos: el <a> y sus destinos

Crear hipervínculos: el `<a>` y sus destinos

Los hipervínculos son el mecanismo central de la web: permiten navegar de una página a otra, o a otro punto del mismo documento. Se crean con el elemento <a> (anchor, ancla).

El elemento `<a>` y el atributo `href`

El atributo que define el destino del enlace es href (hypertext reference). Sin href, el elemento <a> existe en el DOM pero no es un enlace navegable — es solo texto con etiqueta de ancla.

<!-- Sintaxis mínima: <a> con href y texto -->
<a href="https://www.example.com">Visitar Example</a>

La anatomía completa:

<a> — la etiqueta de apertura.
href="..." — el atributo que fija el destino. Es el atributo más importante de <a>.
Visitar Example — el texto del enlace: lo que ve y clica el usuario.
</a> — la etiqueta de cierre.

Visitar Example

Los enlaces en esta vista previa no navegan de verdad — están dentro de un sandbox aislado. Para ver la navegación real hace falta un servidor. Lo que importa acá es la estructura.

El contenido del <a> puede usar otras etiquetas dentro como strong (texto marcado):

<a href="https://www.example.com"><strong>Visitar</strong> Example</a>

O estar dentro de un <li> del menú de una lista:

<ul>
  <li><a href="inicio.html">Inicio</a></li>
  <li><a href="acerca.html">Acerca</a></li>
</ul>

Buen texto de enlace

El texto dentro del <a> no es solo estético. Los lectores de pantalla ofrecen al usuario listar todos los enlaces de la página fuera de su contexto. Si todos dicen “click aquí” o “ver más”, esa lista es inútil.

<!-- ❌ MAL: "click aquí" no describe el destino -->
<p>Para ver la receta, <a href="recetas/pasta.html">click aquí</a>.</p>

<!-- ✅ BIEN: el texto describe el destino sin necesitar contexto -->
<p>Tenemos la <a href="recetas/pasta.html">receta de pasta con salsa</a>.</p>

La regla: el texto del enlace, leído solo, debe responder a ¿adónde llevo? o ¿qué hago?

URL absoluta vs URL relativa

El valor de href puede ser una URL absoluta (incluye el dominio completo) o una URL relativa (se resuelve en relación al archivo actual).

URL absoluta — incluye protocolo y dominio. Apuntá siempre a recursos externos con URL absoluta:

<!-- Absoluta: protocolo + dominio + path -->
<a href="https://www.wikipedia.org/wiki/HTML">Wikipedia: HTML</a>

URL relativa — se resuelve desde el archivo en el que estás. Usala para páginas del mismo sitio. Hay cuatro variantes:

Tomá esta estructura de carpetas de referencia para los ejemplos:

mi-sitio/
├── index.html           ← desde aquí estamos enlazando
├── acerca.html
├── recetas/
│   └── pasta.html
└── fotos/
    └── galeria.html

1. Misma carpeta — nombre del archivo (o con ./ explícito):

<!-- Desde index.html → acerca.html está en la misma carpeta -->
<a href="acerca.html">Acerca</a>
<!-- Con ./ explícito (equivalente) -->
<a href="./acerca.html">Acerca</a>

2. Entrar en una subcarpeta:

<!-- Desde index.html → entra en recetas/ y abre pasta.html -->
<a href="recetas/pasta.html">Receta de pasta</a>

3. Subir un nivel con ../:

<!-- Desde recetas/pasta.html → sale de recetas/ y abre acerca.html -->
<a href="../acerca.html">Acerca</a>

<!-- Desde recetas/pasta.html → sale de recetas/ y entra en fotos/ -->
<a href="../fotos/galeria.html">Galería</a>

4. Desde la raíz del dominio — una / al inicio resuelve siempre desde la raíz, sin importar desde qué carpeta:

<!-- Desde cualquier página → siempre resuelve a mi-sitio/recetas/pasta.html -->
<a href="/recetas/pasta.html">Receta de pasta</a>

Resumen con la estructura de ejemplo:

Desde	Hacia	URL relativa
`index.html`	`acerca.html`	`acerca.html` o `./acerca.html`
`index.html`	`recetas/pasta.html`	`recetas/pasta.html`
`recetas/pasta.html`	`acerca.html`	`../acerca.html`
`recetas/pasta.html`	`fotos/galeria.html`	`../fotos/galeria.html`
cualquier página	`recetas/pasta.html`	`/recetas/pasta.html`
cualquier página	sitio externo	`https://www.example.com`

Tabla de símbolos:

Símbolo	Significado	Ejemplo
Sin prefijo	Mismo directorio	`acerca.html`
`./`	Mismo directorio (explícito)	`./acerca.html`
`../`	Subir un nivel	`../acerca.html`
`../../`	Subir dos niveles	`../../logo.png`
`/` al inicio	Raíz del dominio	`/recetas/pasta.html`
`https://`	URL absoluta externa	`https://www.example.com`

Cuándo preferir cada tipo:

Paths relativos — para páginas del mismo sitio. Si el sitio se mueve a otro dominio, los paths relativos siguen funcionando sin cambios.
URL absoluta — para páginas externas (otros dominios).

Tu turno: el starter tiene los tres hrefs y textos esperados en comentarios. Creá exactamente 3 enlaces con esos hrefs literales y textos descriptivos. Luego hacé clic en “Comprobar”.