Antes de decidir se deve <base>
ou não usar a tag, é necessário entender como ela funciona, para que pode ser usada e quais são as implicações e, finalmente, superam as vantagens / desvantagens.
A <base>
tag facilita principalmente a criação de links relativos em idiomas de modelo, pois você não precisa se preocupar com o contexto atual em cada link.
Você pode fazer por exemplo
<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" />
ao invés 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" />
Observe que o <base href>
valor termina com uma barra, caso contrário, será interpretado em relação ao último caminho.
Quanto à compatibilidade do navegador, isso causa apenas problemas no IE. A <base>
tag está em HTML especificado como não tendo uma tag final </base>
, portanto, é legítimo usar apenas <base>
sem uma tag final. No entanto, o IE6 pensa de outra maneira e, nesse caso, todo o conteúdo após a <base>
tag é colocado como filho do <base>
elemento na árvore HTML DOM. Isso pode causar problemas inexplicáveis à primeira vista em Javascript / jQuery / CSS, ou seja, os elementos sendo completamente inacessíveis em seletores específicos como html>body
, até você descobrir no inspetor HTML DOM que deve haver um base
(e head
) no meio.
Uma correção comum do IE6 está usando um comentário condicional do IE para incluir a tag final:
<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->
Se você não se importa com o W3 Validator, ou quando já está em HTML5, pode fechar automaticamente, todos os navegadores da Web o suportam de qualquer maneira:
<base href="http://example.com/en/" />
Fechar a <base>
tag também corrige instantaneamente a insanidade do IE6 no WinXP SP3 para solicitar <script>
recursos com um URI relativo src
em um loop infinito.
Outro possível problema do IE se manifestará quando você usar um URI relativo na <base>
tag, como <base href="https://stackoverflow.com//example.com/somefolder/">
ou <base href="https://stackoverflow.com/somefolder/">
. Isso falhará no IE6 / 7/8. No entanto, isso não é exatamente culpa do navegador; o uso de URIs relativos na <base>
tag está errado. A especificação HTML4 afirmou que deveria ser um URI absoluto, começando assim com o esquema http://
ou https://
. Isso foi descartado na especificação HTML5 . Portanto, se você usa HTML5 e direciona apenas navegadores compatíveis com HTML5, deve ficar bem usando um URI relativo na <base>
tag.
Quanto ao uso de âncoras de fragmentos nomeados / hash <a href="#anchor">
, como âncoras de seqüência de caracteres de consulta <a href="?foo=bar">
e âncoras de fragmentos de caminho <a href=";foo=bar">
, com a <base>
tag que você basicamente declara todos os links relativos, incluindo esse tipo de âncora. Nenhum dos links relativos é mais relativo ao URI da solicitação atual (como aconteceria sem a <base>
tag). Isso pode, em primeiro lugar, ser confuso para iniciantes. Para construir essas âncoras da maneira certa, você basicamente precisa incluir o URI,
<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>
onde ${uri}
basicamente se traduz $_SERVER['REQUEST_URI']
em PHP, ${pageContext.request.requestURI}
JSP e #{request.requestURI}
JSF. Deve-se notar que as estruturas MVC como o JSF possuem tags, reduzindo todo esse padrão e removendo a necessidade <base>
. Consulte também ao Qual URL usar para vincular / navegar para outras páginas JSF .