La etiqueta base en HTML
🔗 La etiqueta <base>: Definiendo rutas y comportamiento de enlaces
Dentro del elemento <head> de un documento HTML podemos utilizar la etiqueta <base>, la cual permite establecer una ruta base común para todos los enlaces relativos que se encuentren en el documento. Esta funcionalidad puede no ser evidente al principio, pero resulta muy útil cuando trabajamos con estructuras de carpetas o recursos en distintas ubicaciones.
📌 ¿Para qué sirve <base>?
La etiqueta <base> establece un punto de referencia (URL base) desde el cual se resuelven todos los enlaces relativos definidos con la etiqueta <a>. Además, también puede definir cómo se abrirán esos enlaces (en la misma pestaña o en una nueva ventana), gracias al atributo target.
📄 Atributos disponibles en <base>
| Atributo | Función |
|---|---|
href | Define la dirección base a la que se agregarán las rutas relativas. |
target | Establece el comportamiento de los enlaces (misma pestaña, nueva, etc). |
Ambos atributos pueden utilizarse juntos o por separado, según lo que se necesite.
🧪 Ejemplo sin usar <base>
htmlCopiarEditar<head>
<title>Documento sin ruta base</title>
</head>
<body>
<a href="/index.html">Inicio</a>
<a href="/streams/">Transmisiones</a>
</body>
En este caso, si estás navegando desde https://ejemplo.com, los enlaces te llevarán a:
https://ejemplo.com/index.htmlhttps://ejemplo.com/streams/
🔧 Ejemplo usando <base href>
htmlCopiarEditar<head>
<title>Documento con base</title>
<base href="https://ejemplo.com/contenido/" target="_blank">
</head>
<body>
<a href="inicio.html">Inicio</a>
<a href="./streams/">Transmisiones</a>
</body>
Ahora que hemos definido la URL base como https://ejemplo.com/contenido/, los enlaces relativos apuntarán a:
https://ejemplo.com/contenido/inicio.htmlhttps://ejemplo.com/contenido/streams/
⚠️ Si se usa un enlace absoluto o relativo que comienza con /, la ruta definida en <base> no se aplicará.
🧭 Uso del atributo target
El atributo target controla cómo se abrirán los enlaces definidos en el documento. Al definirlo en <base>, todos los enlaces heredan ese comportamiento.
Valores comunes:
| Valor | Comportamiento |
|---|---|
_self | Abre el enlace en la misma pestaña (valor por defecto). |
_blank | Abre el enlace en una nueva pestaña o ventana. |
_parent | Intenta abrir el enlace en el marco superior (si existe). |
_top | Rompe cualquier marco y abre en la ventana principal. |
En el ejemplo anterior, al establecer target="_blank", todos los enlaces se abrirán en nuevas pestañas del navegador.
✅ Conclusiones
- La etiqueta
<base>se utiliza exclusivamente dentro de<head>y debe aparecer solo una vez por documento. - Es ideal para definir una ruta común que simplifique los enlaces relativos.
- Puede combinarse con el atributo
targetpara modificar el comportamiento global de los enlaces.
Este elemento es especialmente útil cuando trabajas con múltiples páginas o recursos dentro de un mismo dominio o carpeta, y quieres evitar escribir rutas completas una y otra vez.