¿Recuerdas cuando hablamos de Tim Berners-Lee y el nacimiento de HTML? Su gran idea fue conectar documentos entre sí, crear una telaraña de información. Y la herramienta que hace posible esa conexión es el enlace.
Sin enlaces, la web sería una colección de documentos aislados — como libros en una biblioteca donde nadie escribió el índice. Los enlaces son los portales mágicos que te transportan de un lugar a otro con un solo clic.
<a>: el anclaLos enlaces se crean con la etiqueta <a>, que viene de "anchor" (ancla).
¿Por qué ancla? Porque un enlace ancla un texto a un destino,
como una cuerda que conecta dos puntos.
Aquí está la anatomía:
<a> — La etiqueta que define el enlacehref — "Hypertext Reference", la dirección a donde lleva el portalEl href es el ingrediente esencial. Sin él, tienes un ancla sin destino —
como una puerta que no lleva a ningún lugar.
No todos los enlaces llevan a otros sitios web. Puedes crear enlaces a otras páginas de tu propio proyecto:
Estos son enlaces relativos — la ruta se calcula desde donde estás ahora.
Los ../ significan "sube un nivel" en la estructura de carpetas,
como subir las escaleras de un edificio.
target: controlando la puertaPor defecto, cuando haces clic en un enlace, la nueva página reemplaza la actual. Pero a veces quieres que se abra en una nueva pestaña — especialmente cuando enlazas a sitios externos y no quieres que el usuario abandone tu página.
El atributo target controla este comportamiento:
| Valor | ¿Qué hace? |
|---|---|
_self | Abre en la misma pestaña (el comportamiento por defecto) |
_blank | Abre en una nueva pestaña o ventana |
_parent | Abre en el marco padre (raro, de la época de los frames) |
_top | Abre ocupando toda la ventana (también de la época de los frames) |
En la práctica, solo usarás _self (implícito) y _blank.
Los otros dos son reliquias de una web antigua que usaba "frames" —
algo que hoy está prácticamente extinto.
A veces no quieres ir a otra página, sino saltar a una sección específica de la página actual. Piensa en un índice de contenidos que te lleva directamente al capítulo que te interesa.
Para esto necesitas dos cosas:
id — Marca la sección a la que quieres llegar# — Apunta a ese idEl # le dice al navegador: "No busques un archivo, busca un elemento con este id en la página actual".
Esto es increíblemente útil para páginas largas. Los usuarios pueden saltar directamente a lo que les interesa sin tener que hacer scroll eternamente.
Los enlaces parecen simples, pero son la esencia de lo que hace la web... web. Cada vez que añades un enlace, estás tejiendo una conexión más en esa telaraña global.
Los buscadores como Google siguen los enlaces para descubrir nuevas páginas. Los usuarios los usan para explorar y navegar. Una buena estructura de enlaces hace tu sitio más útil, más descubrible, y más conectado con el resto del mundo.
Crea una pequeña página con al menos tres enlaces:
target="_blank")about.html)id y #Los enlaces son hilos. Cada uno que creas conecta tu mundo con otro...