Etiqueta HTML <base>
La etiqueta HTML <base> establece una URL base absoluta para todas las URLs relativas y un destino predeterminado para enlaces. Aprende sus atributos y el problema con los anclas.
La etiqueta HTML <base> establece una URL absoluta (base) única que el navegador utiliza para resolver todas las URL relativas del documento: enlaces, imágenes, hojas de estilo, scripts y acciones de formulario. También puede establecer un target predeterminado para que los enlaces se abran en una ventana o pestaña determinada sin repetir target en cada elemento <a>.
Esta página explica qué hace <base>, cuándo resulta genuinamente útil, los atributos que acepta y el problema más importante que sorprende a la mayoría de las personas la primera vez: cómo <base href> cambia el comportamiento de los enlaces de anclaje en la misma página.
Por qué y cuándo usar <base>
<base> desplaza el "punto de partida" para las rutas relativas. Sin ella, una URL relativa se resuelve respecto a la propia dirección del documento. Con ella, cada URL relativa se resuelve respecto al href que especifiques. Esto es exactamente lo que se necesita en determinadas situaciones:
- Recursos servidos desde un CDN. Si tu marcado usa rutas relativas como
img/logo.pngpero los archivos reales se encuentran en un CDN, una sola<base href="https://cdn.example.com/assets/">apunta todos ellos al CDN sin editar cada ruta. - Migraciones de sitios y proxies inversos. Cuando un documento se mueve o se sirve bajo una ruta diferente a la que fue creado,
<base>puede mantener sus enlaces relativos resolviendo a la ubicación original. - Generadores de sitios estáticos y plantillas. Un diseño compartido que se renderiza en muchas URL puede declarar una base para que las partes no necesiten saber en qué nivel de anidación están.
Úsala con moderación. Dado que <base> afecta a todas las URL relativas de la página a la vez —incluyendo las que no escribiste tú— es un instrumento poco preciso. La mayoría de los proyectos modernos prefieren rutas relativas o raíz-relativas correctas, o un paso de compilación, en lugar de un <base> global.
Acceder a la URL base desde JavaScript
Puedes leer la URL base resuelta de un documento con document.baseURI. Si el documento no tiene ningún elemento <base>, esto vuelve a la propia dirección del documento (document.location.href).
// With <base href="https://www.w3docs.com/"> in the document:
console.log(document.baseURI); // "https://www.w3docs.com/"Sintaxis
La etiqueta <base> es un elemento vacío, lo que significa que la etiqueta de cierre no es obligatoria. En HTML5, la barra de autocierre es opcional, pero en XHTML, la etiqueta <base> debe cerrarse (<base />).
Solo se puede usar una etiqueta <base> en la página, y debe colocarse en el elemento <head>. Debes insertarla lo antes posible, ya que su efecto se extiende desde el lugar donde se especifica.
Si usas varios elementos <base>, solo se respetarán los primeros atributos href y target. El resto serán ignorados.
Ejemplo de la etiqueta HTML <base>
El siguiente documento establece ambos atributos a la vez. La URL base pasa a ser https://www.w3docs.com/, por lo que el enlace relativo /css3-maker/border-radius se resuelve como https://www.w3docs.com/css3-maker/border-radius. Y como target="_blank" está en <base>, el enlace se abre en una nueva pestaña aunque el elemento <a> en sí no tenga target.
<!DOCTYPE html>
<html>
<head>
<title>HTML base tag</title>
<base href="https://www.w3docs.com/" target="_blank" />
</head>
<body>
<a href="/css3-maker/border-radius">Try CSS Maker Tool</a>
</body>
</html>Edita el fragmento de abajo: al hacer clic en el enlace se abre w3docs.com en una nueva pestaña, controlado completamente por la etiqueta <base>.
Usar solo href (el caso más común)
La mayoría de las veces solo querrás redirigir las URL relativas, sin cambiar cómo se abren los enlaces. Establece href y omite target:
<head>
<base href="https://cdn.example.com/assets/" />
</head>
<body>
<!-- resolves to https://cdn.example.com/assets/img/logo.png -->
<img src="img/logo.png" alt="Logo" />
</body>Usar solo target
Puedes establecer un target predeterminado sin cambiar la URL base. Aquí las URL relativas siguen resolviéndose respecto a la propia dirección del documento, pero todos los enlaces se abren en una nueva pestaña:
<head>
<base target="_blank" />
</head>
<body>
<!-- no target attribute, yet opens in a new tab -->
<a href="/pricing">Pricing</a>
</body>Cuando los enlaces se abren en una nueva pestaña mediante target="_blank", añade rel="noopener noreferrer" en los elementos <a> por seguridad. <base> no puede establecer rel, por lo que debe estar en cada enlace. Sin noopener, la página abierta puede acceder a tu página a través de window.opener e intentar un ataque de tabnabbing.
Problema: <base href> rompe los enlaces de anclaje en la misma página
Esta es la sorpresa más común. Un enlace de fragmento como <a href="#section"> es una URL relativa — es solo un fragmento sin ruta. Cuando hay un <base href> presente, el navegador resuelve ese fragmento respecto a la URL base, no respecto a la página actual.
Entonces, con <base href="https://www.w3docs.com/">, hacer clic en <a href="#section"> no desplaza hasta el elemento de la página con id="section". En cambio, navega a https://www.w3docs.com/#section — generalmente una página completamente diferente.
<head>
<base href="https://www.w3docs.com/" />
</head>
<body>
<!-- BAD: navigates to https://www.w3docs.com/#contact -->
<a href="#contact">Contact</a>
<!-- GOOD: stays on the current page -->
<a href="/current-page#contact">Contact</a>
<h2 id="contact">Contact</h2>
</body>La solución es escribir los anclas de la misma página como URL absolutas o raíz-relativas que incluyan la ruta de la página actual, de modo que el fragmento aterrice de nuevo en el documento correcto. Lee más sobre la resolución de rutas en Rutas de Archivos HTML.
Atributos
La etiqueta <base> puede contener el atributo href o target, o ambos. Si no se especifica ninguno, la etiqueta no tiene efecto.
| Atributo | Valor | Definición |
|---|---|---|
| href | URL absoluta | La URL base para todas las URL relativas de la página. Debe ser una URL absoluta (un valor relativo no es fiable y se resuelve respecto a la propia dirección del documento). |
| target | nombre del contexto de navegación | Destino predeterminado para hipervínculos y formularios. Acepta las cuatro palabras clave reservadas que se indican a continuación, o el nombre de cualquier contexto de navegación (por ejemplo, el name de un iframe o ventana con nombre). |
Los valores de palabras clave reservadas para target son:
| Valor | Definición |
|---|---|
_blank | Abre el enlace en una nueva ventana o pestaña. |
_self | Abre el enlace en la ventana actual (el valor predeterminado). |
_parent | Abre el enlace en el contexto de navegación padre. |
_top | Abre el enlace en el contexto de navegación superior (completo). |
Un nombre personalizado como target="preview" apunta a un contexto de navegación con ese nombre — por ejemplo <iframe name="preview"> — y se crea como una nueva ventana si no existe ninguno con ese nombre.
Advertencias e interacciones
<link rel="canonical">. Una URL canónica debe escribirse como URL absoluta. No confíes en<base>para convertir un<link rel="canonical" href="...">relativo en la dirección correcta — haz que el valor canónico sea absoluto por sí mismo. Consulta<link>.<form action="">. Laactionde un formulario también se resuelve respecto a la URL base. Unaction=""vacío normalmente envía el formulario a la página actual; con un<base href>envía a la URL base en su lugar, lo que raramente es la intención.- La ubicación importa.
<base>solo afecta a las URL que aparecen después de ella en el código fuente. Colócala en la parte superior del<head>, antes de cualquier<link>,<script>u otro elemento que contenga URL.