Antes de decidir si usar la <base>etiqueta o no, debe comprender cómo funciona, para qué se puede usar y cuáles son las implicaciones y, finalmente, superar las ventajas / desventajas.
La <base>etiqueta facilita principalmente la creación de enlaces relativos en lenguajes de plantillas, ya que no necesita preocuparse por el contexto actual en cada enlace.
Puedes hacer por ejemplo
<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />
en vez de
<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />
Tenga en cuenta que el <base href>valor termina con una barra diagonal, de lo contrario se interpretará en relación con la última ruta.
En cuanto a la compatibilidad del navegador, esto solo causa problemas en IE. La <base>etiqueta está en HTML especificado como que no tiene una etiqueta final </base>, por lo que es legítimo usarla <base>sin una etiqueta final. Sin embargo, IE6 piensa lo contrario y todo el contenido después de la <base>etiqueta se coloca en tal caso como hijo del <base>elemento en el árbol HTML DOM. Esto puede causar a primera vista problemas inexplicables en Javascript / jQuery / CSS, es decir, los elementos son completamente inalcanzables en selectores específicos como html>body, hasta que descubra en el inspector HTML DOM que debería haber un base(y head) en el medio.
Una solución común de IE6 es usar un comentario condicional de IE para incluir la etiqueta final:
<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->
Si no te importa el Validador W3, o cuando ya estás en HTML5, puedes cerrarlo automáticamente, todos los navegadores web lo admiten de todos modos:
<base href="http://example.com/en/" />
Cerrar la <base>etiqueta también corrige instantáneamente la locura de IE6 en WinXP SP3 para solicitar <script>recursos con un URI relativo srcen un bucle infinito.
Otro posible problema de IE se manifestará cuando use un URI relativo en la <base>etiqueta, como <base href="https://stackoverflow.com//example.com/somefolder/">o <base href="https://stackoverflow.com/somefolder/">. Esto fallará en IE6 / 7/8. Sin embargo, esto no es exactamente culpa del navegador; El uso de URI relativos en la <base>etiqueta es, en sí mismo, incorrecto. La especificación HTML4 indicó que debería ser un URI absoluto, comenzando así con el esquema http://o https://. Esto se ha eliminado en la especificación HTML5 . Entonces, si usa HTML5 y solo busca navegadores compatibles con HTML5, entonces debería estar bien usando un URI relativo en la <base>etiqueta.
En cuanto al uso de anclas de fragmentos con nombre / hash como <a href="#anchor">, anclas de cadena de consulta como <a href="?foo=bar">y anclas de fragmentos de ruta como <a href=";foo=bar">, con la <base>etiqueta básicamente está declarando todos los enlaces relativos relacionados, incluidos ese tipo de anclas. Ninguno de los enlaces relativos es relativo al URI de solicitud actual (como sucedería sin la <base>etiqueta). En primer lugar, esto puede ser confuso para empezar. Para construir esos anclajes de la manera correcta, básicamente debes incluir el URI,
<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>
donde ${uri}básicamente se traduce $_SERVER['REQUEST_URI']en PHP, ${pageContext.request.requestURI}en JSP y #{request.requestURI}en JSF. Se debe tener en cuenta que los marcos MVC como JSF tienen etiquetas que reducen todo este estándar y eliminan la necesidad de hacerlo <base>. Consulte también ao Qué URL usar para vincular / navegar a otras páginas JSF .