¿Qué es la referencia de hipertexto (HREF)?
HREF es un atributo utilizado en HTML para definir el destino de un enlace. Básicamente, es lo que permite que, al hacer clic en texto o elementos interactivos, se abra una nueva página, sección o recurso. Es como una indicación digital para tu navegador de hacia dónde debe ir.
¿Cómo se ve un atributo HREF en HTML?
HREF se encuentra dentro de una etiqueta <a> en HTML. Por ejemplo, si quieres enlazar a example.com, lo harías así:
<a href="http://www.example.com">Visita Example</a>. Al hacer clic en ese texto, serás dirigido al enlace especificado.
HREF y URLs relativas
Cuando deseas vincular algo dentro de tu propio sitio web, puedes usar URLs relativas en lugar de absolutas. Por ejemplo:
- Para vincular un archivo en el mismo directorio, usarías algo como href="archivo.html".
- Para subir un nivel en el directorio y luego acceder a otro archivo, podrías usar href="../archivo.html".
¿Cómo funciona HREF con anclas en la misma página?
HREF puede dirigir a una parte específica de la misma página usando un símbolo # seguido de un identificador (id). Por ejemplo:
<div id="seccion1"></div> puede ser visitado mediante un enlace como <a href="#seccion1">Ir a Sección 1</a>.
Enlaces a partes específicas de otra página
También puedes usar HREF para dirigir a una sección específica en otra URL, como:
<a href="http://www.example.com/pagina.html#seccion2">Enlace a Sección 2</a>.
¿Qué hace el esquema "tel" en un HREF?
El esquema tel permite crear enlaces que inician una llamada telefónica desde dispositivos que soportan esta función. Por ejemplo:
<a href="tel:+1234567890">Llámanos</a>.
Protocolos adicionales compatibles con HREF
Además de HTTP y HTTPS, HREF también soporta:
- mailto: para correo electrónico.
- file: para rutas locales en tu computadora (aunque tiene limitaciones de seguridad).
- ftp: para archivos en servidores FTP.
Significado de rel="nofollow" en HREF
El atributo rel="nofollow" indica a los motores de búsqueda que no sigan ese enlace ni lo consideren para el ranking de la página. Esto se utiliza a menudo en enlaces pagos o de contenido no confiable.
Abrir enlaces en una nueva pestaña
Cuando añades target="_blank" al enlace, el destino se abrirá en una nueva pestaña o ventana:
<a href="http://www.example.com" target="_blank">Abrir en otra pestaña</a>.
Interacción con JavaScript
JavaScript puede modificar o interactuar dinámicamente con HREF para cambiar los destinos de los enlaces basándose en eventos o condiciones específicas en una página web.
Descargar archivos con HREF
Puedes iniciar la descarga directa de un archivo añadiendo el atributo download al vínculo:
<a href="archivo.zip" download>Descargar Archivo</a>.
Vinculación a archivos locales
Con el protocolo file, es posible crear enlaces a archivos locales, como:
<a href="file:///C:/ruta/al/archivo.txt">Archivo Local</a>. Sin embargo, los navegadores suelen bloquear esto por temas de seguridad.
Enlaces de "volver al inicio"
Para crear una opción de volver al inicio de una página, se usa un enlace con HREF hacia #:
<a href="#">Volver al inicio</a>.
HREF para chats o servicios de mensajería
HREF es compatible con esquemas de URL personalizados para servicios como WhatsApp o Telegram. Por ejemplo:
<a href="https://wa.me/1234567890">Chatea con nosotros</a>.
HREF en diseños responsivos
Aunque HREF como atributo no cambia en diseño responsive, su implementación sí puede adaptarse. Por ejemplo, enlaces a llamadas telefónicas (tel) son funcionales solo en dispositivos móviles.
Diferenciar enlaces visitados y no visitados
Con CSS, puedes usar pseudo-clases como :link (para enlaces no visitados) y :visited (para enlaces ya visitados) para diferenciarlos visualmente.
Menús desplegables y el uso de HREF
No es obligatorio usar HREF en elementos de un menú si estos solo activan interacciones internas. Si el propósito de los elementos es redirigir a nuevas páginas, entonces sí deben incluir un atributo HREF.
