<base> en HTML5El elemento <base> en HTML5 se utiliza para especificar la base URL y/o el destino predeterminado de todos los enlaces relativos y URL en un documento HTML. Solo puede haber un elemento <base> por documento, y debe ubicarse dentro del elemento <head>.
<base>El elemento <base> tiene dos atributos globales principales:
href: Este atributo especifica la URL base que debe usarse para todos los enlaces relativos en el documento. Es necesario que la URL esté bien formada. Si el atributo href no está presente, el navegador considera la URL del documento actual como la URL base.
<base href="https://www.example.com/">target: Este atributo especifica la ventana o el marco en el que se deben abrir todos los enlaces del documento. Se puede usar para establecer el destino predeterminado para todos los enlaces y formularios.
<base target="_blank">_self: El enlace se abrirá en la misma ventana o pestaña._blank: El enlace se abrirá en una nueva ventana o pestaña._parent: El enlace se abrirá en el marco padre._top: El enlace se abrirá en la ventana completa del navegador.<base> elemento en el <head> de un documento.<base> elemento no debe tener contenido; solo atributos son permitidos.<base> en HTML5 con EjemplosEl uso del elemento <base> en HTML5 implica principalmente dos escenarios: la definición de una URL base para recursos relativos y la determinación del comportamiento predeterminado al hacer clic en enlaces.
Si tienes un documento HTML donde deseas especificar una URL base para todos los enlaces relativos, puedes hacerlo de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de base href</title>
<base href="https://www.example.com/">
</head>
<body>
<a href="pagina1.html">Página 1</a>
<a href="http://www.otrodominio.com/pagina2.html">Página 2 en Otro Dominio</a>
</body>
</html>En este ejemplo:
<a href="pagina1.html">Página 1</a> apunta a https://www.example.com/pagina1.html debido al base href definido.<a href="http://www.otrodominio.com/pagina2.html">Página 2 en Otro Dominio</a> no se ve afectado por el base href ya que es un enlace absoluto.Puedes utilizar el atributo target del elemento <base> para especificar el comportamiento de los enlaces del documento:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de base target</title>
<base target="_blank">
</head>
<body>
<a href="https://www.example.com/pagina1.html">Página 1</a>
<a href="https://www.example.com/pagina2.html">Página 2</a>
</body>
</html>En este ejemplo:
<a href="https://www.example.com/pagina1.html"> y <a href="https://www.example.com/pagina2.html"> se abrirán en nuevas pestañas debido al base target definido.href y targetPuedes combinar ambos atributos para especificar tanto la URL base como el destino predeterminado de los enlaces:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de base href y target</title>
<base href="https://www.example.com/" target="_blank">
</head>
<body>
<a href="pagina1.html">Página 1</a>
<a href="pagina2.html">Página 2</a>
</body>
</html>En este ejemplo:
https://www.example.com/pagina1.html y https://www.example.com/pagina2.html respectivamente.base target="_blank".El uso correcto del elemento <base> puede simplificar la gestión de enlaces relativos y mejorar la experiencia del usuario mediante el control del comportamiento de los enlaces en un documento HTML.