Nivel: Básico · HTML · Después de títulos y párrafos · 15 minutos
Al terminar sabrás crear enlaces internos y externos con <a href="...">, abrir en la misma pestaña o en otra, y evitar el texto genérico «clic aquí».
Resultado final: una mini página con tres enlaces: a otra sección, a un sitio externo y un correo mailto:.
Paso 1: La forma mínima de un enlace
<a href="https://pasoapaso.top">Ir a Paso a paso</a>href es la dirección de destino; el texto entre las etiquetas es lo que el lector ve y pulsa. Usa texto descriptivo, no solo «aquí».
Trampa: olvidar las comillas en el href o escribir htp:// — el enlace se rompe.
Paso 2: Interno, externo y ancla
| Tipo | Ejemplo href | Cuándo |
|---|---|---|
| Externo absoluto | https://ejemplo.com/pagina |
Otro sitio |
| Relativo | contacto.html o ../index.html |
Dentro de tu proyecto |
| Ancla | #seccion-2 |
Saltar dentro de la misma página |
| Correo | mailto:tu@correo.com |
Abrir el cliente de email |
<h2 id="seccion-2">Sección 2</h2>
<a href="#seccion-2">Ir a la sección 2</a>
<a href="mailto:hola@ejemplo.com">Escríbeme</a>Paso 3: Abrir en otra pestaña (opcional)
<a href="https://pasoapaso.top" target="_blank" rel="noopener noreferrer">
Paso a paso (nueva pestaña)
</a>rel="noopener noreferrer" es una buena práctica de seguridad cuando usas target="_blank".
Trampa: abrir todas las páginas internas en pestaña nueva — molesta al lector. Reserva eso para externos o descargas.
Paso 4: Código completo de práctica
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mis enlaces</title>
</head>
<body>
<h1>Enlaces de prueba</h1>
<p><a href="#recursos">Saltar a recursos</a></p>
<p><a href="https://pasoapaso.top" target="_blank" rel="noopener noreferrer">Paso a paso</a></p>
<h2 id="recursos">Recursos</h2>
<p><a href="mailto:ejemplo@correo.com">Contacto</a></p>
</body>
</html>Si algo no funciona
| Síntoma | Causa | Solución |
|---|---|---|
| 404 / no carga | URL mal escrita o archivo relativo mal ubicado | Copia la URL al navegador; revisa la carpeta |
| Ancla no salta | id distinto al #... |
Deben coincidir exactamente |
| Se ve el código | Archivo no es .html | Guarda con extensión correcta |
Reto: añade un enlace a tu red social favorita con texto claro (no «clic aquí»).
Para seguir: imágenes con <img> y el atributo alt — contenido visual accesible.
