Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
Los enlaces son lo que convierte páginas sueltas en la web. La etiqueta <a> es simple, pero tiene detalles de seguridad y accesibilidad que vale la pena dominar.
Explicación
La etiqueta <a> (anchor) crea un enlace. Su comportamiento depende de los atributos que le agregues:
hrefLa dirección de destino: otra página, una URL externa, un correo, etc. Sin este atributo, el enlace no hace nada.
target="_blank"Abre el enlace en una pestaña nueva en vez de reemplazar la página actual.
rel="noopener noreferrer"Se agrega junto con target="_blank" por seguridad: evita que la pestaña nueva pueda manipular la pestaña original.
#seccion-finalUn enlace de ancla: salta a un elemento de la misma página que tenga id="seccion-final".
mailto: / tel:Abren el programa de correo o de llamadas del dispositivo con el destinatario ya escrito.
Reto rápido
Este enlace usa target="_blank" pero le falta rel="noopener noreferrer". Agrégalo.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
El texto del enlace debe describir a dónde lleva ("Lee el artículo completo") en vez de algo genérico como "haz clic aquí" — ayuda a la accesibilidad y al SEO.
Dato extra
Un enlace de ancla como #seccion-final solo funciona si existe, en algún lugar de la página, un elemento con exactamente ese id.
Error común
Olvidar el atributo href (el enlace deja de ser enfocable con teclado y no hace nada), o usar target="_blank" sin agregar rel="noopener noreferrer".
Siguiente paso
Ya sabes conectar páginas entre sí. Ahora veamos cómo mostrar imágenes dentro de ellas.
Ir a la siguiente lección