Tienda
0
Alojamiento web cloud Terrassa Sabadell

Definición destacada

¿Como funciona el comando en HTML5: 'base'?

ABCDEFGHIJKLMNOPQRSTUVWXYZLinuxHTML5Dominios
La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra base

Última modificación: 2024-06-12

Descripción Detallada del Elemento <base> en HTML5

El 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>.

Atributos del Elemento <base>

El elemento <base> tiene dos atributos globales principales:

  1. 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/">
    • Valor: Una URL válida.

  2. 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">
    • Valores:
      • _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.
      • Nombre de marco: El enlace se abrirá en el marco nombrado.

Restricciones

  • Solo puede haber un único <base> elemento en el <head> de un documento.
  • El <base> elemento no debe tener contenido; solo atributos son permitidos.

Uso del Elemento <base> en HTML5 con Ejemplos

El 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.

Ejemplo 1: Definiendo una URL base

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:

  • El enlace <a href="pagina1.html">Página 1</a> apunta a https://www.example.com/pagina1.html debido al base href definido.
  • El enlace <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.

Ejemplo 2: Definiendo el destino de los enlaces

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:

  • Ambos enlaces <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.

Ejemplo 3: Combinando href y target

Puedes 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:

  • Los enlaces apuntan a https://www.example.com/pagina1.html y https://www.example.com/pagina2.html respectivamente.
  • Ambos enlaces se abrirán en nuevas pestañas debido al 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.

Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!

Contribuye a mejorar esta definición.