Etiqueta base en HTML: cómo cambian las rutas relativas

La etiqueta <base> establece la URL base para resolver referencias relativas de un documento HTML y puede definir el destino predeterminado de navegación. Sirve cuando una página necesita tomar otra dirección como punto de partida para sus recursos y enlaces. Su efecto alcanza todo el documento. HTML Living Standard: <base>.

Ejemplo mínimo de base href

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Enlaces del curso</title>
    <base href="https://example.com/curso/">
  </head>
  <body>
    <a href="leccion-1.html">Primera lección</a>
  </body>
</html>

Verás el enlace «Primera lección». Su dirección será https://example.com/curso/leccion-1.html, aunque hayas guardado el documento en otra carpeta. Calcular esa URL no exige visitar el dominio de ejemplo. <base> no produce contenido visible: se escribe en la cabecera <head>; el enlace que lee la persona está en <body>.

Sintaxis y ubicación

<base> es un elemento vacío: no contiene texto ni tiene etiqueta de cierre. Usa una sola declaración en <head>, con href, target o ambos. Colócala antes de cualquier elemento con atributos que reciben URLs, como una hoja de estilos <link href="...">, y antes de los enlaces afectados por target.

Duplicar <base> no es HTML válido. Si ocurre, el navegador toma el primer href y el primer target en el orden del documento, que incluso pueden pertenecer a declaraciones distintas; ignora los posteriores. Restricciones de <base>.

Cómo cambian las rutas relativas

En una página ordinaria sin base href, el punto de partida es su propia URL. Supón que está en https://sitio.test/articulos/introduccion.html. Al añadir <base href="https://example.com/curso/">, estos destinos cambian:

La barra inicial de /ayuda.html conserva la raíz del origen de la base, no necesariamente el dominio de la página. Una URL absoluta como https://otro.example/ayuda.html mantiene su dirección. La resolución sigue las reglas del estándar de URL; la elección de la base está definida en URLs base del documento.

Presta atención a la barra final: con https://example.com/curso/, leccion-2.html queda dentro de /curso/; con https://example.com/curso, sustituye el último segmento y resulta https://example.com/leccion-2.html.

Caso práctico: comprobar destinos sin cargar recursos

Guarda este documento como base.html en UTF-8 y ábrelo en el navegador. Es una calculadora: los elementos de <template> permanecen sin mostrar ni cargar la imagen. No necesitas una fotografía, un servidor de formularios ni acceso al dominio de ejemplo. El script lee las referencias escritas y las resuelve explícitamente contra la base del documento. Contenido de <template>.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Comprobar las rutas del curso</title>
    <base href="https://example.com/curso/">
  </head>
  <body>
    <h1>Destinos del curso</h1>
    <template id="referencias">
      <img src="imagenes/portada.jpg" alt="Portada del curso">
      <a href="leccion-2.html">Segunda lección</a>
      <a href="#tema">Ir al tema</a>
      <a href="https://otro.example/ayuda.html">Ayuda externa</a>
      <form action="inscripcion" method="post"></form>
    </template>
    <p>Resultados previstos con la base original:</p>
    <ul>
      <li>Imagen: https://example.com/curso/imagenes/portada.jpg</li>
      <li>Lección: https://example.com/curso/leccion-2.html</li>
      <li>Fragmento: https://example.com/curso/#tema</li>
      <li>Ayuda: https://otro.example/ayuda.html</li>
      <li>Formulario: https://example.com/curso/inscripcion</li>
    </ul>
    <h2 id="tema">Cálculo de esta ejecución</h2>
    <pre id="resultado">Activa JavaScript para recalcular las rutas.</pre>
    <script>
      const contenido = document.getElementById("referencias").content;
      const elementos = contenido.querySelectorAll("[src], [href], [action]");
      const lineas = ["document.baseURI: " + document.baseURI];
      for (const elemento of elementos) {
        const atributo = elemento.hasAttribute("src") ? "src"
          : elemento.hasAttribute("href") ? "href" : "action";
        const referencia = elemento.getAttribute(atributo);
        lineas.push(referencia + " → " + new URL(referencia, document.baseURI).href);
      }
      document.getElementById("resultado").textContent = lineas.join("\n");
    </script>
  </body>
</html>

El cálculo muestra document.baseURI: https://example.com/curso/ y los cinco destinos de la lista. document.baseURI es una propiedad DOM consultada con JavaScript, no un atributo de <base> ni una propiedad CSS. Crear un objeto URL calcula una dirección; no descarga su contenido.

Cambia el href de la base a https://example.com/biblioteca/ y vuelve a abrir el archivo: las referencias relativas usarán /biblioteca/ y la ayuda absoluta permanecerá igual. La lista «Resultados previstos» sigue describiendo el caso original; el bloque de cálculo muestra los valores actuales. Si retiras <base>, document.baseURI vuelve a la dirección del archivo local y las rutas se calculan desde ella. Sin JavaScript se conserva la lista original, pero no se recalcula.

La imagen y el formulario son referencias inertes para el cálculo. Este ejemplo no muestra una fotografía, no envía datos ni guarda una inscripción. Si insertaras esos elementos fuera de <template>, necesitarías preparar la imagen y un destino que procese el formulario.

Atributos: href y target

href recibe una URL válida, absoluta o relativa a la dirección del documento. Para evitar ambigüedades en una base compartida, suele resultar más claro escribirla completa. Los esquemas data: y javascript: no pueden actuar como base. target cambia dónde se navega, sin cambiar el cálculo de la URL. Ambos son atributos específicos; id y class son globales. Atributos de <base>.

Los destinos de navegación incluyen _self para el contexto actual, _blank para uno nuevo, _parent para el padre y _top para el superior, además de nombres válidos de ventanas o marcos. Sin un destino indicado se usa el contexto actual. Un target explícito en <a>, <area> o <form> prevalece sobre el predeterminado de <base>.

Por ejemplo, con <base target="_blank">, un enlace sin target pide abrir otro contexto. Para mantener uno concreto en la página actual, escribe <a href="leccion-2.html" target="_self">Segunda lección</a>. Si la base solo tiene target, las rutas conservan la base habitual del documento.

Abrir todos los enlaces en pestañas o ventanas nuevas puede desorientar. Prefiere decidirlo en cada enlace y avisar en su texto cuando corresponda. Para aperturas necesarias, rel="noopener" se coloca en el enlace y evita darle acceso a la ventana de origen mediante window.opener; no es un atributo de <base>. Relación noopener.

Errores frecuentes y cuándo evitar base

¿Base cambia todos los enlaces? Cambia la resolución de referencias relativas, incluidas imágenes y acciones de formularios. Las URLs absolutas conservan su dirección, aunque el destino de navegación puede heredar target.

¿Por qué dejó de funcionar una ancla local? #tema se resuelve contra la base: en el ejemplo apunta a https://example.com/curso/#tema, no al encabezado del archivo que estás leyendo. Para enlazar el documento actual debes indicar su URL explícita con el fragmento, o prescindir de la base.

Si una ruta falla, comprueba en este orden: la ubicación de <base> en <head>, declaraciones duplicadas, la barra final de href y el destino obtenido con new URL(referencia, document.baseURI). Revisa después la consola: CSP base-uri puede impedir usar una base no autorizada. Además, un documento dentro de un marco con sandbox puede tener restringidas las aperturas de _blank; target no concede esos permisos.

Evita <base> si solo quieres corregir un enlace o si distintas partes de la página necesitan puntos de partida diferentes. Escribe rutas explícitas en cada recurso. Para crear enlaces visibles usa <a>; <link> relaciona recursos desde la cabecera y <img> incorpora una imagen. Ninguno necesita <base> para funcionar.

Compatibilidad

Consultado el 3 de octubre de 2026: <base>, href y target tienen soporte consolidado en los navegadores actuales, según los datos de compatibilidad de MDN. La referencia de MDN sobre <base> permite revisar su explicación y compatibilidad. Las políticas de seguridad y los recursos disponibles deben comprobarse por separado del soporte del elemento.