Curso HTML 5.2 Enlaces internos y externos

Enlaces en HTML 5.2

En HTML, los enlaces son uno de los elementos fundamentales para crear navegación, tanto dentro de un sitio (enlaces internos) como hacia otros recursos externos (enlaces externos). La etiqueta principal es <a>, que en HTML 5.2 incorpora mejoras y nuevos atributos para seguridad, accesibilidad y experiencia de usuario.

1. Enlaces externos

Un enlace externo apunta a un recurso ubicado fuera de nuestro sitio. Puede apuntar a una página web de otro dominio, a un archivo PDF, a un repositorio de medios, etc. La sintaxis básica es:

<!-- Enlace externo básico -->
<a href='https://www.ejemplo.com/pagina' 
   target='_blank' 
   rel='noopener noreferrer'>
   Visitar Ejemplo.com
</a>

• href: URL absoluta que incluye el protocolo (http, https, ftp…).
• target='_blank': abre el enlace en una nueva pestaña o ventana.
• rel='noopener noreferrer':
  • noopener: evita que la página externa acceda al window.opener de la nuestra (riesgos de tabnabbing).
  • noreferrer: no envía la cabecera HTTP Referer al sitio externo.
• title (opcional): descripción breve para accesibilidad y SEO.

Podemos añadir otros atributos como hreflang (idioma del destino), type (tipo MIME) o download si queremos forzar la descarga:

<!-- Forzar descarga de un PDF -->
<a href='/docs/manual.pdf' 
   download='instructivo_usuario.pdf' 
   type='application/pdf'>
   Descargar manual de usuario
</a>

2. Enlaces internos

Son enlaces que apuntan a recursos dentro de nuestro propio sitio. Pueden ser a otras páginas o a secciones (anclajes) dentro de la misma página.

2.1 Rutas relativas y absolutas

• Ruta relativa: respecto al documento actual.
• Ruta absoluta interna: comienza desde la raíz del sitio (/ruta/al/archivo.html).

<!-- Ruta relativa -->
<a href='../seccion/productos.html'>Productos</a>

<!-- Ruta absoluta interna -->
<a href='/blog/articulo.html'>Leer artículo</a>

2.2 Anclajes y fragmentos

Con los fragment identifiers podemos enlazar directamente a un elemento que tenga un atributo id. Es útil para índices o navegación interna en páginas largas.

<!-- Definir punto de anclaje en la misma página -->
<h3 id='contacto'>Contacto</h3>

<!-- Enlace que salta a ese ancla -->
<a href='#contacto'>Ir a Contacto</a>

También podemos enlazar a secciones de otras páginas:

<!-- Ancla en otra página -->
<a href='/info/faq.html#pregunta5'>Ver respuesta a la Pregunta 5</a>

3. Atributos adicionales y buenas prácticas

Buenas prácticas:

• Usar texto de enlace descriptivo: evita “haz clic aquí”.
• Aplicar rel='noopener noreferrer' en target='_blank'.
• Añadir title sólo si aporta valor adicional, no para repetir el texto.
• Verificar accesibilidad: el enlace debe ser navegable con teclado y claro para lectores de pantalla.
• Considerar atributos ARIA si el enlace cumple un rol especial (role='button' en caso de comportamiento de botón).

4. Casos avanzados

• mailto: abre cliente de correo.
• tel: inicia llamada en dispositivos móviles.
• data: incrusta recursos (imágenes, SVG) inline.
• file: acceso a sistema de archivos local (solo intranets).

<!-- Enlace mailto -->
<a href='mailto:soporte@ejemplo.com?subject=Consulta'>
  Contactar Soporte
</a>

<!-- Enlace tel -->
<a href='tel:+34123456789'>
  Llamar al +34 123 456 789
</a>

<!-- Recurso data URI en enlace -->
<a href='data:text/plain;base64,SG9sYSBNdW5kbw==' 
   download='hola.txt'>
  Descargar saludo
</a>

5. Resumen

Enlaces internos y externos en HTML 5.2 ofrecen flexibilidad y control sobre la navegación, la seguridad y la accesibilidad. Aprovechar atributos como target, rel, download o hreflang, y seguir buenas prácticas de texto descriptivo y políticas de referer, garantiza experiencias más seguras y usables.