Para crear enlaces en HTML utiliza la etiqueta <a> con el atributo href. Entre la apertura y el cierre escribe el texto que verá la persona que navega por tu página:
<a href="https://mastercodepro.com/html/">Aprender HTML desde cero</a>Ese enlace lleva a otra página. La misma etiqueta sirve para moverse entre secciones de un documento, iniciar un correo o abrir el marcador del teléfono. Aquí verás qué cambia en cada caso y cómo resolver los errores habituales.
Qué hacen a y href en un enlace
a define el enlace y href indica su destino. Sin un destino válido, el texto no funciona como el hipervínculo que esperas. Utiliza un texto descriptivo: «Ver tutoriales de HTML» comunica mejor el destino que «haz clic aquí».
Enlaces absolutos y relativos: cuál utilizar
Una URL absoluta incluye el protocolo y el dominio. Una ruta relativa se interpreta desde la ubicación del documento. Si empieza por una barra, parte de la raíz del sitio.
<a href="https://mastercodepro.com/">Visitar MasterCodePro</a>
<a href="contacto.html">Contacto en esta carpeta</a>
<a href="../index.html">Subir una carpeta</a>
<a href="/html/">Ruta de HTML desde la raíz</a>En un proyecto local, /html/ no equivale necesariamente a una carpeta junto a tu archivo: depende del servidor con el que estés trabajando. Comprueba las rutas en el entorno donde publicarás la web.
Cómo abrir un enlace en otra pestaña
<a href="https://developer.mozilla.org/es/" target="_blank" rel="noopener">Consultar MDN (abre en otra pestaña)</a>target="_blank" solicita otro contexto de navegación, normalmente una pestaña. noopener evita que la página abierta controle la ventana de origen a través de window.opener. Los navegadores modernos ya aplican esa protección de forma implícita en este caso; declararla hace explícita la intención.
No necesitas abrir todos los enlaces en pestañas nuevas. Úsalo cuando resulte útil y avisa en el texto si el cambio puede sorprender al usuario.
Cómo enlazar una sección de la misma página
Asigna un identificador único al destino y utiliza una almohadilla delante de ese identificador:
<a href="#precios">Consultar precios</a>
<section id="precios">
<h2>Precios del servicio</h2>
<p>Consulta las opciones disponibles.</p>
</section>El valor debe coincidir exactamente. Si tu cabecera es fija y tapa el título al navegar, añade scroll-margin-top al destino:
#precios { scroll-margin-top: 100px; }Enlazar un correo o un teléfono
<a href="mailto:contacto@example.com">Escribir un correo</a>
<a href="tel:+34910000000">Llamar al teléfono de ejemplo</a>Sustituye los datos de ejemplo por los tuyos. Estos enlaces abren la aplicación configurada en el dispositivo: no envían correos ni realizan llamadas por sí solos. En un ordenador sin aplicación asociada pueden no producir el resultado esperado.
¿Enlace o botón?
Utiliza un enlace para navegar a un destino. Utiliza button para realizar una acción, como abrir una ventana o desplegar un panel. Puedes dar aspecto de botón a un enlace con CSS sin cambiar su función.
Errores que conviene revisar
- Olvidar
https://en una dirección externa: puede interpretarse como una ruta local. - Escribir un identificador de sección diferente al del enlace.
- Colocar botones u otros enlaces dentro de un enlace.
- Eliminar el foco visible: dificulta la navegación con teclado.
Preguntas frecuentes
¿Por qué mi enlace devuelve un error 404?
Comprueba que el archivo existe, revisa mayúsculas y minúsculas y confirma desde qué carpeta se resuelve la ruta.
¿Cómo enlazo una imagen?
Coloca la imagen dentro de a y utiliza un texto alternativo que comunique el propósito del enlace. Tienes ejemplos de imágenes en nuestra guía para insertar una imagen en HTML.
Para practicar, crea un pequeño índice con tres enlaces a secciones y comprueba cada destino con ratón y teclado. Continúa en la ruta de HTML.
