FUNDAMENTOS FRONTEND

Arquitectura de Enlaces: El Sistema Nervioso de la Web

Conecta tu aplicación utilizando rutas absolutas y relativas

Domina la navegación web con HTML. Aprende a crear enlaces con la etiqueta <a>, usar rutas absolutas y relativas, anclas internas y a estructurar la arquitectura de tu sitio.

1

La Etiqueta Ancla: Crear un Enlace

La etiqueta <a> se usa para crear enlaces (hipervínculos). Un enlace permite que el usuario haga clic y vaya a otra página, archivo o sitio web. El texto que está entre la etiqueta de apertura y la de cierre es lo que el usuario ve y puede clicar.

<!-- Comenzamos con la etiqueta <a> (ancla) -->
<!-- El atributo href indica a dónde se va a dirigir el enlace -->
<a href="destino.html">
    <!-- Este texto es el que ve el usuario y sobre el que puede hacer clic -->
    Texto visible para el usuario
</a>

<!-- También podemos escribir la etiqueta completa en una sola línea -->
<!-- Al hacer clic, el navegador abrirá la página indicada en href -->
<a href="productos.html">Ver Catálogo</a>
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas
2

Rutas Absolutas: Enlaces a Otros Sitios

Una ruta absoluta es un enlace que apunta a una página que está en otro sitio web. Para que funcione correctamente, debe incluir la dirección completa: el tipo de conexión (https://) y el nombre del sitio. Se usan cuando queremos llevar al usuario fuera de nuestro propio sitio.

<!-- Este enlace lleva a un sitio web externo -->
<!-- https:// indica el tipo de conexión -->
<!-- www.google.com es el sitio al que se va a ingresar -->
<a href="https://www.google.com">
    <!-- Texto visible para el usuario -->
    Ir a Google
</a>

<!-- Otro ejemplo de enlace externo -->
<!-- En este caso apuntamos a un sitio de documentación -->
<a href="https://developer.mozilla.org/es/">
    Documentación MDN
</a>
Ejemplo visual de un enlace que lleva desde un sitio web a otro sitio en internet
Las rutas absolutas se usan para enlazar páginas que están en otros sitios web y siempre incluyen la dirección completa.
3

Rutas Relativas: Enlaces Dentro del Proyecto

Las rutas relativas se usan para enlazar archivos que están dentro del mismo proyecto. No necesitan la dirección completa del sitio, solo el nombre del archivo o carpeta. El lugar al que llevan depende de la carpeta en la que se encuentra el archivo HTML actual.

<!-- Todo esto se encuentra en la pagina about.html -->
<!-- Este enlace apunta a un archivo que está en la misma carpeta -->
<a href="contacto.html">Contáctanos</a>

<!-- Este enlace entra a una carpeta llamada 'articulos' -->
<!-- y luego abre el archivo 'articulo-1.html' -->
<a href="articulos/articulo-1.html">Leer Artículo</a>

<!-- ../ significa 'subir una carpeta' en la estructura del proyecto -->
<!-- Luego se abre el archivo 'index.html' -->
<a href="../index.html">Volver al Inicio</a>
Diagrama de carpetas mostrando cómo un archivo HTML enlaza a otros archivos usando rutas relativas como contacto.html, blog/articulo-1.html y ../index.html
Ejemplo de estructura de carpetas donde las rutas relativas cambian según la ubicación del archivo HTML desde el que se crea el enlace.
4

Enlaces a Archivos del Proyecto

Los enlaces no sirven solo para ir a otras páginas. También se usan para abrir imágenes, descargar archivos PDF u otros documentos. Para que estos enlaces funcionen bien, los archivos deben estar guardados en carpetas organizadas dentro del proyecto.

<!-- Este enlace apunta a una imagen dentro del proyecto -->
<!-- La imagen está guardada en la carpeta assets/img -->
<a href="assets/img/mapa-ubicacion.jpg">
  <!-- Texto que el usuario puede clicar -->
  Ver mapa ampliado
</a>

<!-- Este enlace permite descargar un archivo PDF -->
<!-- El archivo está dentro de la carpeta downloads -->
<a href="downloads/temario-curso.pdf">
  Descargar Temario
</a>
Diagrama de carpetas de un proyecto web mostrando enlaces a imágenes y archivos PDF mediante rutas relativas
Ejemplo de cómo los enlaces recorren las carpetas del proyecto para abrir imágenes o descargar archivos.
5

Enlaces Internos: Moverse Dentro de la Página

Un enlace interno permite desplazarse a una parte específica de la misma página. Para lograrlo, usamos un identificador (id) en el elemento destino y lo referenciamos desde el enlace usando el símbolo #. Cada id debe ser único dentro del documento.

<!-- Este enlace no va a otra página -->
<!-- Lleva a una sección dentro del mismo archivo -->
<a href="#seccion-precios">Ver Planes</a>

<!-- Esta sección tiene un id que coincide con el enlace -->
<section id="seccion-precios">
  <h2>Nuestros Precios</h2>
</section>
Página web mostrando un enlace que desplaza al usuario a una sección inferior de la misma página
Los enlaces internos permiten moverse dentro de una misma página usando identificadores únicos (id).
6

Deep Linking: Ir a una Sección Exacta

También podemos llevar al usuario a una sección específica de otra página. Esto se logra combinando la ruta del archivo con un identificador (id). Es útil para enviar a alguien directamente al contenido que le interesa.

<!-- Este enlace abre otra página -->
<!-- y además baja directamente a una sección específica -->
<a href="contacto.html#ubicacion">
  Ver Dónde Estamos
</a>

<!-- En el archivo contacto.html -->
<section id="ubicacion">
  <h2>Nuestra Ubicación</h2>
</section>
Diagrama mostrando un enlace desde una página hacia una sección específica dentro de otra página
El deep linking combina la ruta del archivo con un id para llegar a una sección puntual.
7

Elementos Enlazables: Más que Texto

Un enlace no tiene que ser solo texto. Podemos hacer que una imagen u otro elemento sea clickeable envolviéndolo con la etiqueta <a>. Lo importante es no colocar un enlace dentro de otro enlace.

<!-- El enlace envuelve una imagen -->
<!-- Al hacer clic en la imagen, se abre el sitio indicado -->
<a href="https://industriadementes.com.ar">
  <img
    src="logo-oficial.png"
    alt="Logo de Industria de Mentes"
  />
</a>
Imagen clickeable que funciona como enlace hacia un sitio web
Las imágenes también pueden ser enlaces cuando se envuelven con la etiqueta <a>.
8

Abrir Enlaces en Otra Pestaña

En algunos casos conviene que el enlace se abra en una nueva pestaña, para que el usuario no abandone la página actual. Esto se logra con el atributo target="_blank". En enlaces externos, se recomienda acompañarlo con rel="noopener noreferrer".

<!-- Este enlace se abrirá en una nueva pestaña -->
<!-- target="_blank" indica ese comportamiento -->
<a
  href="https://twitter.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Síguenos en Twitter
</a>
Navegador web mostrando un enlace que se abre en una nueva pestaña
El atributo target permite controlar si un enlace se abre en la misma pestaña o en una nueva.
Publicidad
html-css-online-course-responsive-web-design-from-scratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas

Lección anterior

Ilustración que resume los pilares del HTML5 moderno
Ilustración que resume los pilares del HTML5 moderno

Introducción a HTML5: Tus Primeros Pasos en el Desarrollo Web

Domina la base de la web con HTML5. Aprende sintaxis, estructura, etiquetas semánticas y anidamiento correcto para crear desarrollos sólidos, accesibles y profesionales.

Comenzar Lección

Lección actual

Guía de enlaces HTML
Representación visual de la sintaxis básica y el funcionamiento de la etiqueta ancla en HTML.

Arquitectura de Enlaces: El Sistema Nervioso de la Web

Domina la navegación web con HTML. Aprende a crear enlaces con la etiqueta <a>, usar rutas absolutas y relativas, anclas internas y a estructurar la arquitectura de tu sitio.

Lección actual

Lección siguiente

Ejemplo visual de imágenes, favicons e iframes usados en HTML
Los elementos multimedia permiten enriquecer visualmente una página web y mejorar la experiencia del usuario.

Multimedia en HTML

Enriquece tu web con multimedia. Aprende a insertar imágenes, optimizar con atributos alt, añadir favicons e incrustar iframes respetando accesibilidad y rendimiento.

Comenzar Lección
¿Qué significa exactamente la sigla 'href'?⌄Significa 'Hypertext Reference'. Es el atributo que le dice al navegador dónde buscar el recurso al que se está enlazando (la dirección URL de destino).
¿Por qué mis enlaces se ven azules y subrayados por defecto?⌄Es el estilo predeterminado del 'User Agent' (el navegador) desde los inicios de la web para indicar interactividad. Se debe resetear o sobrescribir con CSS (`text-decoration: none; color: inherit;`) para adaptarlo al diseño.
¿Cuál es la diferencia principal entre una ruta absoluta y una relativa?⌄La absoluta incluye el dominio completo y protocolo (`https://sitio.com/pagina`), usada para enlaces externos. La relativa (`/pagina` o `../pagina`) depende de la ubicación actual del archivo y se usa para navegación interna.
¿Qué pasa si olvido poner `https://` en un enlace absoluto?⌄El navegador interpretará `www.google.com` como un archivo local llamado así dentro de tu carpeta actual (ruta relativa), resultando en un error 404 porque ese archivo no existe.
¿Qué significa `../` en una ruta relativa?⌄Significa 'subir un nivel' en la jerarquía de carpetas. Si estás en `/blog/articulo.html` y usas `../index.html`, el navegador saldrá de la carpeta 'blog' para buscar 'index.html' en la raíz.
¿Para qué sirve el atributo `target="_blank"`?⌄Instruye al navegador para abrir el enlace en una nueva pestaña o ventana, manteniendo la página actual abierta. Es útil para enlaces externos que sacan al usuario de tu flujo.
¿Por qué es inseguro usar `target="_blank"` sin protección?⌄Existe una vulnerabilidad de seguridad ('Tabnabbing') donde la nueva página podría manipular la original mediante JS. Siempre debes añadir `rel="noopener noreferrer"` para bloquear este acceso.
¿Puedo enlazar a una dirección de correo electrónico?⌄Sí, usando el protocolo `mailto:`. Ejemplo: `<a href="mailto:info@empresa.com">Escríbenos</a>`. Al hacer clic, se abre la aplicación de correo predeterminada del usuario.
¿Cómo hago un enlace que inicie una llamada telefónica?⌄Usando el protocolo `tel:`. Ejemplo: `<a href="tel:+54911223344">Llamar</a>`. En móviles, esto abre el marcador telefónico automáticamente.
¿Qué es un 'Ancla' o enlace interno?⌄Es un enlace que te lleva a una sección específica dentro de la misma página. Se logra poniendo un `id` único al destino y usando `#id-destino` en el `href`.