Existe una etiqueta llamada <base> que puede utilizarse en la cabecera <head> del documento HTML. Esta etiqueta sirve para establecer una ruta base de los enlaces relativos utilizados en nuestro documento. Probablemente, esto se entienda mejor después de ver el apartado de enlaces o hipervínculos.
La etiqueta <base>
La etiqueta <base> se utiliza indicando al menos uno de los dos atributos siguientes:
| Atributos | Descripción |
|---|---|
href | Establece la ruta base para los enlaces relativos del documento HTML. |
target | Establece el destino para los enlaces relativos del documento HTML. |
Para entender su funcionamiento, imaginemos el siguiente ejemplo de la página https://manz.dev/:
<head>
<title>Documento HTML sin usar base</title>
</head>
<body>
<a href="/index.html">Página de inicio</a>
<a href="/streams/">Página de streams</a>
</body>
En este caso, los enlaces nos llevarían a las siguientes URL:
- 1️⃣ El primer enlace nos lleva a
https://manz.dev/index.html - 2️⃣ El segundo enlace nos lleva a
https://manz.dev/streams/
Al indicar una etiqueta <base>, simplemente, en los enlaces relativos de nuestra página se añade la URL indicada.
El atributo href
Veamos ahora un ejemplo donde utilizamos la etiqueta <base> con el atributo href:
<head>
<title>Documento HTML utilizando base</title>
<base href="https://manz.dev/links/" target="_blank">
</head>
<body>
<a href="index.html">Página de inicio</a>
<a href="./streams/">Página de streams</a>
</body>
Ahora, aunque nos encontremos en la página https://manz.dev/, hemos establecido la URL base https://manz.dev/links para los enlaces, por lo que:
- 1️⃣ El primer enlace nos lleva a
https://manz.dev/links/index.html - 2️⃣ El segundo enlace nos lleva a
https://manz.dev/links/streams/
Como se puede ver, la ruta establecida en la etiqueta <base> (debe ser ruta relativa) se utiliza como base de las URLs utilizadas. En el caso de utilizar en nuestros enlaces <a> una ruta absoluta o una ruta relativa que comience por /, no se tendrá en cuenta la ruta indicada en <base>.
El atributo target
Además, también hemos establecido el atributo target a _blank, por lo que los enlaces se abrirán en una pestaña nueva. El atributo target nos permite realizar ciertas tareas dependiendo de su valor:
| Atributo target | Descripción |
|---|---|
_self | El enlace se abre en la misma pestaña. Es el valor por defecto, incluso si se omite el atributo. |
_blank | El enlace se abre en una nueva pestaña. |
Otros valores menos comunes como _parent o _top permiten abrir el enlace en un contexto superior al actual, si existe. En caso contrario, se actua como si se hubiera indicado un valor _self.
