Elemento base en HTML

Para comprender el elemento base es necesario saber diferenciar entre url relativas y url absolutas.

URLs absolutas

Esta hace referencia a la dirección completa, es decir que incluye el protocolo y dominio. Por ejemplo

URLs relativas

Estas url no incluye la direccion completa y depende mucho de la página en la que se encuentra. Por ejemplo

./mi-ruta
../images/image-1.webp
../../assets/css/style.css
/public/favicon.ico

Ahora que comprendes un poco sobre las URLs relativas y absolutas, veamos como funciona el elemento base.

Este elemento base se coloca dentro del head de un documento HTML y establece una URL base para todas las URLs relativas del documento. Esto significa que, si usas URLs que no están completas (relativas), el navegador sabrá cómo interpretarlas con base en la URL definida en base.

Tomar en cuenta que solo debe existir un elemento base dentro de una página HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Página sin elemento base</title>
</head>
<body>
    <a href="pagina.html">Ir a página</a>
</body>
</html>

En un contexto donde la ruta actual se encuentre como https://mipagina.com/ al darle click a "Ir a página" esta sera interpretada como <root>/página.html

Ahora si el contexto de la página actual es https://mipagina.com/mi-ruta al darle click a "Ir a pagina" esta sera interpretada como https://mipagina.com/mi-ruta/pagina.html

<!DOCTYPE html>
<html>
<head>
    <title>Página con elemento base</title>
    <base href="https://mipagina.com/">
</head>
<body>
    <a href="pagina.html">Ir a página</a>
</body>
</html>

En un contexto donde la ruta actual se encuentre como https://mipagina.com/ al darle click a "Ir a página" esta sera interpretada como <root>/página.html

Ahora si el contexto de la página actual es https://mipagina.com/mi-ruta al darle click a "Ir a pagina" esta sera interpretada como https://mipagina.com/pagina.html

El elemento base tambien puede recibir la siguiente propiedad:

target: su valor puede ser uno se lo siguiente (_blank, _self, _parent, _top)

Elemento style en HTML

El elemento style en html sirve para aplicar estilos CSS, es...

Elemento link en HTML

El elemento link sirve para indicar una conexión entre el do...

Referencias

W3Schools. HTML <base> Tag. https://www.w3schools.com/tags/tag_base.asp

MDN developers. Elemento base. https://developer.mozilla.org/es/docs/Web/HTML/Reference/Elements/base

Elemento base en HTML