fbpx

HTML Base

Descripción

La etiqueta HTML <base> sirve para especificar la dirección URL base que será empleada en todas las direcciones relativas que se encuentran dentro del documento HTML en cuestión. En todo el documento, solo puede existir un único elemento <base>.

Además, podemos consultar la URL base de un sitio mediante la secuencia de comandos document.baseURI.

La etiqueta <base> está englobada en las etiquetas de contenido de metadatos y, al igual que todas las etiquetas presentes en el elemento padre <head>, no debe contener ninguna etiqueta de cierre.

Otra cuestión a tener en cuenta es que solo puede haber una etiqueta <base> en un contenedor <head>.

Ejemplo de uso

El uso de la etiqueta <base> sería en el supuesto que tengamos un sitio en el que se muestran diversas imágenes. En este caso, con esta etiqueta definirías la dirección en donde están alojadas las imágenes, con el objetivo de hacer más fácil el enlazamiento.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Imagenes</title>

    <base href="https://loremflickr.com/g/320/240/" />
  </head>
  <body>
    <img src="ford" alt="" /> <!-- forf.jpg-->
    <img src="audi" alt="" />
    <img src="ferrari" alt="" />
  </body>
</html>

Con esto, conseguiríamos facilitar el enlazamiento de todas las imágenes de coches que obtenemos del sitio que especificamos en la etiqueta <base>.

Atributos

El elemento <base> cuenta con los siguientes atributos globales:

Href

Con este atributo definimos la dirección URL base que se empleará en el documento para todas las URL relativas.

Target

Este atributo indica la ubicación predeterminada para navegar en el resultado del enlace, en el caso de los elementos que no cuenten con una referencia explícita del objetivo.

Los valores que se le pueden otorgar son:

  • _self: Es el valor por defecto y abre el enlace en el mismo lugar donde se haya realizado el clic.
  • _blank: Abre el enlace en una nueva ventana del navegador o una nueva pestaña.
  • _parent: Cargar el resultado en el contexto de navegación padre del actual. En el caso de que no exista un padre, esta opción se comporta de la misma manera que _self.
  • _top: Carga el resultado en el contexto de nivel superior de navegación (es decir, el contexto de navegación que es un ancestro de la actual, y no tiene padre). Si no hay padre, esta opción se comporta de la misma manera que _self.

Más ejemplos

Atributo Href y Target

  • _self.- Es el valor por defecto. Abre el enlace en el mismo marco en el que se hizo clic.
  • _blank.- Abre el enlace en una nueva ventana o pestaña.
  • _parent.- Abre el enlace en el marco principal.
  • _top.- Abre el enlace en todo el cuerpo de la ventana.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page</title>

    <base href="https://oregoom.com/html/" target="content" />
  </head>
  <body>
    <ul>
      <li><a href="base">Etiqueta Base</a></li>
      <li><a href="head">Etiqueta Head</a></li>
      <li><a href="body">Etiqueta body</a></li>
    </ul>
  </body>
</html>

Para entender mejor sobre los valores _top y Parent trabajaremos con Iframe. para esto crear otro archivo de HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body>
    <iframe src="page.html" width="350" height="900"></iframe>
    <iframe src="otro.html" name="content" width="850" height="900"></iframe>
  </body>
</html>

Tambien puede crear otro archivo de html para que se cargue el contenido po nombre de Iframe.

<p>A qui va el contenido </p>

Referencias



Share This