Spanish (Español) translation by Marilu (you can also view the original English article)
La etiqueta <base> en HTML es un elemento relativamente poco conocido, habiéndose convertido en una parte completa de HTML5 bastante recientemente. Te permite hacer dos cosas:
- Establece cualquier URL que elijas como base para todas las URLs relativas.
- Establece los objetivos de enlace por defecto.
The Base-ics
El elemento <base> está definido en la sección <head> y solo se puede usar una vez por documento. Debes colocarlo lo antes posible en la sección de la cabeza para que puedas usarlo a partir de ese momento. Sus dos posibles atributos son href y target. Puedes usar cualquiera de estos atributos solos o ambos a la vez.
Ejemplo 1: Atajo de carga de assets
Digamos que tienes un sitio que almacena todas sus imágenes y CSS en una carpeta llamada "assets". Podrías definir tu etiqueta <base> así:
1 |
<head>
|
2 |
<base href="http://www.myepicsite.com/assets/"> |
3 |
</head>
|
Esto te permitiría entonces cargar cualquier imagen o CSS como esta:
1 |
<head>
|
2 |
<base href="http://www.myepicsite.com/assets/"> |
3 |
<link rel="stylesheet" href="style.css"> |
4 |
</head>
|
5 |
<body>
|
6 |
<img src="image01.png" /> |
7 |
</body>
|
El enlace a style.css se resolvería en http://www.myepicsite.com/assets/style.css y image01.png se cargaría desde http://www.myepicsite.com/assets/image01.png.
Ejemplo 2: URLs de páginas internas
¿Qué pasa si tienes un dominio de nivel superior que redirige a algo como http://thisrocks.com/app/ y todos los enlaces internos necesitan incluir app/ en sus URLs.
Podrías establecer tu URL base de esta manera:
1 |
<base href="http://thisrocks.com/app/"> |
Desde allí, cuando quisieras enlazar de una página interna a otra, podrías simplemente usar:
1 |
<a href="anotherpage.htm">LINK</a> |
Este enlace resolvería a http://thisrocks.com/app/anotherpage.htm.
Ejemplo 3: Objetivo de enlace predeterminado
También puedes usar <base> para establecer el objetivo por defecto para todos los enlaces de tu página. Si fueras a usar:
1 |
<base target="_blank"> |
...cualquier enlace que no estableciera explícitamente su propio objetivo se abriría en una nueva ventana. Puedes usar el atributo target con o sin el atributo href que lo acompaña.
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 del mismo dirigidos al marco padre.
Desventajas
Mientras que la url <base> puede ser útil, sus desventajas se centran en el hecho de que después de definirla una vez que estás atascado con ella. Solo puedes usarlo de una manera única y entonces afectará a todas las URLs. Dondequiera que no quieras usar los valores por defecto establecidos en tu etiqueta <base> tienes que anularlos específicamente.
Si lo usas para resolver a tu carpeta assets como hicimos anteriormente, y luego quieres enlazar de una página de tu sitio a otra, no puedes hacerlo con el HTML común de <a href=''page.html''>Page</a>.
Esto se debe a que con el URL base que es http://www.myepicsite.com/assets/ tus visitantes serían enviados a http://www.myepicsite.com/assets/page.html.
Como tal, tendrías que anular la configuración de la etiqueta <base> usando la URL absoluta en su lugar, es decir, <a href=''http://www.myepicsite.com/page.html''>Page</a>.
Anclas en página
Cuando se usa <base> también puedes tener problemas para conectar con los anclajes de la página.
Normalmente, un enlace como <a href=''#top>Back to Top</a> te mantendría en la misma página pero saltaría a la ubicación de un elemento que llevara id="top", por ejemplo, resolvería a http://thisrocks.com/app/article.html#top.
Sin embargo, si estás usando una etiqueta <base> con un atributo href, serás enviado a la URL base con #top al final, por ejemplo http://thisrocks.com/app/#top.
De nuevo, en este caso tendrías que anular los valores por defecto establecidos en tu etiqueta <base> especificando la página con la que quieres que tu enlace sea relativo, por ejemplo, <a href=''article.html#top''>Back to Top</a>.
Donde <base> funciona mejor
La etiqueta <base> se utiliza mejor en un escenario en el que sabes que serás capaz de ejercer un control completo sobre el uso de todas las URLs, es decir, sabes que serás capaz de anular los valores por defecto según sea necesario. Si estás creando un tema para un CMS donde hay muchas variables desconocidas es probablemente una buena idea dejar <base> fuera de la mezcla.
Sin embargo, si estás construyendo un sitio HTML estático <base> puede ser muy útil. Este es el caso aún más si estás usando un lenguaje de plantillas como Jade o Handlebars que te permitirá colocar atajos como <a href=''{url}#top''>Back to Top</a>, así que si necesitas anular los ajustes por defecto sigue siendo rápido y fácil.
Si tienes una buena idea de cuál será el contenido de tu proyecto, y su uso de URLs y enlaces está totalmente bajo tu control, podrías encontrar que la etiqueta <base> te ahorra mucho tiempo.
Lee más sobre <base> en el wiki del W3C y en la especificación HTML5:
By
