La etiqueta en HTML <base> es un elemento relativamente poco conocido, pero te permite hacer dos cosas:
- Establezca cualquier URL que elija como base para todas las URL relativas.
- Establecer destinos de enlace predeterminados.
Lo básico que debes saber sobre la etiqueta HTML “base”
El elemento <base> se define en la sección <head> y solo puedes usarlo una vez por documento. Debes colocarlo lo antes posible en la sección de la cabeza para que pueda usarlo a partir de ese momento. Sus dos posibles atributos son hrefy target. Puede usar cualquiera de estos atributos solo o ambos a la vez.
Las URL relativas utilizadas en los atributos href de los elementos , y harán referencia a la URL base definida en el elemento, al igual que las URL que se encuentran en el atributo de (por ejemplo) elementos.<a><area><link><base>src<img>
Ejemplo 1: acceso directo de carga de activos
Supongamos que tiene un sitio que almacena todas sus imágenes y CSS en una carpeta llamada assets. Puede definir su <base>etiqueta así:
<head>
<base href="https://www.gregohm.com/assets/">
</head>Esto le permitiría cargar cualquier imagen o CSS como este:
<head>
<base href="https://www.gregohm.com/assets/">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="image01.png" />
</body>El enlace a style.cssse resolvería https://www.gregohm.com/assets/style.css y image01.pngse cargaría desde https://www.gregohm.com/assets/image01.png.
Ejemplo 2: URL de páginas internas
¿Qué sucede si tiene un dominio de nivel superior que redirige a algo similar https://gregohm.com/app/ y todos los enlaces internos deben incluirse app/en sus URL?
Puede configurar su URL base de esta manera:
<base href="https://thisrocks.com/app/">A partir de ahí, cada vez que desee vincular de una página interna a otra, simplemente puede usar:
<a href="otra-pagina.html">Otra Pagina</a> Este enlace se resolvería en https://gregohm.com/app/otra-pagina.html.
Ejemplo 3: destino de enlace predeterminado
También puede usar <base>para establecer el destino predeterminado para todos los enlaces en su página. Si fueras a usar:
<base target="_blank">cualquier enlace que no establezca explícitamente su propio destino se abrirá en una nueva ventana. Puede utilizar el target atributo con o sin un href atributo que lo acompañe.
Esta funcionalidad podría ser potencialmente útil para el contenido cargado a través de un iframe, ya que podría tener automáticamente todos los enlaces dirigidos al marco principal.
Inconvenientes de la etiqueta HTML “base”
Si bien la URL <base> puede ser útil, sus inconvenientes se centran en el hecho de que, después de definirla, te quedas con ella. Solo puede usarlo de una sola manera y luego afectará a todas las URL. Siempre que no desee utilizar los valores predeterminados establecidos en su <base> etiqueta, debe anularlos específicamente.
Si lo usa para resolver su assets carpeta como lo hicimos anteriormente, y luego desea vincular una página de su sitio a otra, no podrá hacerlo con el HTML común de <a href="page.html">Page</a>.
Esto se debe a que con la URL base, https://www.gregohm.com/assets/ sus visitantes serían enviados a https://www.gregohm.com/assets/page.html.
Como tal, tendría que anular <base>la configuración de su etiqueta usando la URL absoluta en su lugar, es decir <a href="https://www.gregohm.com/page.html">Page</a>.
Anclajes en la página
Al usar la etiqueta html <base>, también puede tener problemas para vincular a los anclajes en la página.
Normalmente, un enlace como este <a href="#top">ir a Top</a> lo mantendría en la misma página pero saltaría a la ubicación de un elemento que contiene id="top", por ejemplo, se resolvería en https://gregohm.com/app/article.html#top.
Sin embargo, si está utilizando una etiqueta <base> con un atributo href, se le enviará a la URL base con #topun anexo al final, por ejemplo https://gregohm.com/app/#top.
Nuevamente, en este caso, tendría que anular los valores predeterminados establecidos en su etiqueta <base> especificando la página a la que desea que esté relacionado su enlace, por ejemplo <a href="article.html#top">ir a Top</a>.
Donde <base> funciona mejor
La etiqueta <base> se usa mejor en un escenario en el que sabe que podrá ejercer un control completo sobre el uso de todas las URL, es decir, sabe que podrá anular los valores predeterminados según sea necesario. Si está creando un tema para un CMS donde hay muchas variables desconocidas, probablemente sea una buena idea dejar <base>fuera de la mezcla.
Sin embargo, si está creando un sitio HTML estático, <base> puede ser muy útil. Este es el caso aún más si está utilizando un lenguaje de plantillas como Handlebars que le permitirá colocar accesos directos como <a href="{url}#top">ir a Top</a>, por lo que si necesita anular la configuración predeterminada, aún es rápido y fácil.
Si tiene una buena idea de cuál será el contenido de su proyecto, y su uso de URL y enlaces está completamente bajo su control, es posible que la etiqueta <base> le ahorre mucho tiempo.
Conclusión
La etiqueta HTML base nos facilitará mucho nuestro trabajo como desarrolladores.
¡Si necesitas ayuda con gusto puedo ayudarte en tu proyecto!
¿Te gustó este artículo? ayúdame a compartirlo.
