What are the recommendations for html base tag

Question

I ve never seen  lt base gt  HTML tag  actually used anywhere before   Are there pitfalls to its use that means I should avoid it  The fact that I have never noticed it in use on a modern production site  or any site  makes me leery of it  though it seems like it might have useful applications for simplifying links on my site   Edit After using the base tag for a few weeks  I did end up finding some major gotchas with using the base tag that make it much less desirable than it first appeared   Essentially  the changes to href   topic  and href    under the base tag are very incompatible with their default behavior  and this change from the default behavior could easily make third party libraries outside of your control very unreliable  in unexpected ways  since they will logically depend on the default behavior   Often the changes are subtle and lead to not-immediately-obvious problems when dealing with a large codebase   I have since created an answer detailing the issues that I experienced below   So test the link results for yourself before you commit to a widespread deployment of  lt base gt   is my new advice

User · Answer

The hash     currently works for jump links in conjunction with the base element  but only in the latest versions of Google Chrome and Firefox  NOT IE9   IE9 appears to cause the page to be reloaded  without jumping anywhere  If you are using jump links on the outside of an iframe  while directing the frame to load the jump links on a separate page within the frame  you will instead get a second copy of the jump link page loaded inside the frame

User · Answer

My recommendation is NOT to use the  lt base gt  element in managing url paths  Why   It just trades one problem for another  Without the base element you can use any path system you like for your relative paths and links without fear they will break  The minute you set the base element to a path you are  locked in  to designing all your url s to work off that path and will now have to change ALL paths to work from the base path  Bad idea   That means you have to now write LONGER paths AND keep track of where each path is relative to this base  Worse     when using the  lt base gt  element they recommend you use a fully qualified base path to support older browsers   https   www example com     so now you ve hard-coded your domain into your page or made all your links dependent on a valid domain path   On the other hand  the minute you remove the base path again from your website  you are now free again to use shorter relative paths  which can be fully qualified  use absolute paths from the root  or use paths that are truly relative to the file and folder you are in  Its much more flexible  And best of all fragments like   hello  work correctly without any additional fixes  Again  people are creating problems that don t exist   Also  the argument above that your use base url s to help you migrate folders of web pages to new subfolder locations doesn t really matter today since most modern servers allow you to quickly set up any subfolder as a new application root folder under any domain  The definition or the  root  of a web application is not constrained by either folders or domains now   It seems kind of silly this whole debate  So I say leave out base url and support the older native server-client default path system that does not use it   Note  If the problem you have is controlling paths due to some new API system  the solution is simple   be consistent in how you path all your url s and links in your API  Don t rely on browser support of base or HTML5 or newer circus tricks like the javascript API kiddies do  Simply path all your anchor tags consistently and you will never have issues  Whats  more  your web application is instantly portable to new servers regardless of path systems used   Whats old is new again  The base element is clearly about trying to create a solution to a problem that never existed in the Web World 20 years ago  much less today

User · Answer

It makes pages easier for offline viewing  you can put the fully qualified URL in the base tag and then your remote resources will load properly

User · Answer

Breakdown of the effects of the base tag   The base tag appears to have some non-intuitive effects  and I recommend being aware of the outcomes and testing them for yourself before relying on  lt base gt    Since I ve discovered them after trying to use the base tag to handle local sites with differing urls and only found out the problematic effects after  to my dismay  I feel compelled to create this summary of these potential pitfalls for others   I ll use a base tag of   lt base href  http   www example com other-subdirectory   gt  as my example in the cases below  and will pretend that the page that the code is on is http   localsite com original-subdirectory  Major   No links or named anchors or blank hrefs will point to the original subdirectory  unless that is made explicit   The base tag makes everything link differently  including same-page anchor links to the base tag s url instead  e g       lt a href   top-of-page  title  Some title  gt A link to the top of the page via a named anchor lt  a gt  becomes  lt a href  http   www example com other-subdirectory  top-of-page  title  Some title  gt A link to an  named-anchor on the completely different base page lt  a gt   lt a href   update 1  title  Some title  gt A link to this page lt  a gt  becomes  lt a href  http   www example com other-subdirectory  update 1  title  Some title  gt A link to the base tag s page instead lt  a gt    With some work  you can fix these problems on links that you have control over  by explicitly specifying that these links link to the page that they are on  but when you add third-party libraries to the mix that rely on the standard behavior  it can easily cause a big mess   Minor   IE6 fix that requires conditional comments  Requires conditional comments for ie6 to avoid screwing up the dom hierarchy  i e   lt base href  http   www example com   gt  lt  -- if lte IE 6  gt  lt  base gt  lt   endif -- gt  as BalusC mentions in his answer above   So overall  the major problem makes use tricky unless you have full editing control over every link  and as I originally feared  that makes it more trouble than it s worth   Now I have to go off and rewrite all my uses of it   p  Related links of testing for issues when using  fragments  hashes   http   www w3 org People mimasa test base   http   www w3 org People mimasa test base results    Edit by Izzy  For all of you running into the same confusion as me concerning the comments   I ve just tested it out myself  with the following results    trailing slash or not  makes no difference to the examples given here   anchor and  query would simply be appended to the specified  lt BASE gt    It however makes a difference for relative links  omitting the trailing slash  other html and dir other html would start at the DOCUMENT ROOT with the given example   other-subdirectory being  correctly  treated as file and thus omitted    So for relative links  BASE works fine with the moved page     while anchors and  queries would need the file name be specified explicitly  with BASE having a trailing slash  or the last element not corresponding to the name of the file it s used in    Think of it as  lt BASE gt  replacing the full URL to the file itself  and not the directory it resides in   and you ll get things right  Assuming the file used in this example was other-subdirectory test html  after it moved to the new location   the correct specification should have been       lt base href  http   www example com other-subdirectory test html         et voila  everything works as expected   anchor   query  other html  very other html   completely other html

User · Answer

I ve never really seen a point in using it  Provides very little advantage  and might even make things harder to use   Unless you happen to have hundreds or thousands of links  all to the same sub-directory  Then it might save you a few bytes of bandwidth   As an afterthought  I seem to recall there being some problem with the tag in IE6  You could place them anywhere in the body  redirecting different portions of the site to different locations  This was fixed in IE7  which broke a lot of sites

User · Answer

Base href example  Say a typical page with links    lt a href home gt home lt  a gt   lt a href faq gt faq lt  a gt   lt a href etc gt etc lt  a gt     and links to a diff folder      lt a href    p2 home gt Portal2home lt  a gt   lt a href    p2 faq gt p2faq lt  a gt   lt a href    p2 etc gt p2etc lt  a gt      With base href  we can avoid repeating the base folder    lt base href    p2  gt   lt a href home gt Portal2-Home lt  a gt   lt a href faq gt P2FAQ lt  a gt   lt a href contact gt P2Contact lt  a gt    So that s a win   yet pages too-often contain urls to diff bases And the current web supports only one base href per page  so the win is quickly lost as bases that aint base  x2219 hrefed repeats  eg    lt a href    p1 home gt home lt  a gt   lt a href    p1 faq gt faq lt  a gt   lt a href    p1 etc gt etc lt  a gt   lt  --    lt    p1  gt  basepath is repeated -- gt    lt base href    p2 gt   lt a href home gt Portal2-Home lt  a gt   lt a href faq gt P2FAQ lt  a gt   lt a href contact gt P2Contact lt  a gt     Conclusion   Base target might be useful   Base href is useless as    page is equally WET since    default base   ndash parent folder   rlhar  perfect  unless unnecessary rare exceptions  Cscr 1  amp   Cscr 2   current web  rlhar  multiple base hrefs unsupported       Related   comparison with Apache  x2219 rewrite base

User · Answer

Well  wait a minute   I don t think the base tag deserves this bad reputation   The nice thing about the base tag is that it enables you to do complex URL rewrites with less hassle     Here s an example   You decide to move http   example com product category thisproduct to http   example com product thisproduct   You change your  htaccess file to rewrite the first URL to the second URL   With the base tag in place  you do your  htaccess rewrite and that s it   No problem   But without the base tag  all of your relative links will break   URL rewrites are often necessary  because tweaking them can help your site s architecture and search engine visibility   True  you ll need workarounds for the     and    problems that folks mentioned   But the base tag deserves a place in the toolkit

User · Answer

I have found a way to use  lt base gt  and anchor based links  You can use JavaScript to keep links like  contact working as they have to  I used it in some parallax pages and it works for me    lt base href  http   www mywebsite com templates   gt  lt  -- if lte IE 6  gt  lt  base gt  lt   endif -- gt      content      lt script gt  var link    pathname   window location href     a   each function        link     this  attr  href        if link 0                   this  attr  href   pathname   link              lt  script gt    You should use at the end of the page

User · Answer

Before deciding whether to use the  lt base gt  tag or not  you need to understand how it works  what it can be used for and what the implications are and finally outweigh the advantages disadvantages     The  lt base gt  tag mainly eases creating relative links in templating languages as you don t need to worry about the current context in every link   You can do for example   lt base href    host    context    language    gt       lt link rel  stylesheet  href  css style css    gt   lt script src  js script js  gt  lt  script gt       lt a href  home  gt home lt  a gt   lt a href  faq  gt faq lt  a gt   lt a href  contact  gt contact lt  a gt       lt img src  img logo png    gt    instead of   lt link rel  stylesheet  href     context    language  css style css    gt   lt script src     context    language  js script js  gt  lt  script gt       lt a href     context    language  home  gt home lt  a gt   lt a href     context    language  faq  gt faq lt  a gt   lt a href     context    language  contact  gt contact lt  a gt       lt img src     context    language  img logo png    gt    Please note that the  lt base href gt  value ends with a slash  otherwise it will be interpreted relative to the last path     As to browser compatibility  this causes only problems in IE  The  lt base gt  tag is in HTML specified as not having an end tag  lt  base gt   so it s legit to just use  lt base gt  without an end tag  However IE6 thinks otherwise and the entire content after the  lt base gt  tag is in such case placed as child of the  lt base gt  element in the HTML DOM tree  This can cause at first sight unexplainable problems in Javascript jQuery CSS  i e  the elements being completely unreachable in specific selectors like html gt body  until you discover in the HTML DOM inspector that there should be a base  and head  in between   A common IE6 fix is using an IE conditional comment to include the end tag    lt base href  http   example com en   gt  lt  -- if lte IE 6  gt  lt  base gt  lt   endif -- gt    If you don t care about the W3 Validator  or when you re on HTML5 already  then you can just self-close it  every webbrowser supports it anyway    lt base href  http   example com en     gt    Closing the  lt base gt  tag also instantly fixes the insanity of IE6 on WinXP SP3 to request  lt script gt  resources with an relative URI in src in an infinite loop   Another potential IE problem will manifest when you use a relative URI in the  lt base gt  tag  such as  lt base href    example com somefolder   gt  or  lt base href   somefolder   gt   This will fail in IE6 7 8  This is however not exactly browser s fault  using relative URIs in the  lt base gt  tag is namely at its own wrong  The HTML4 specification stated that it should be an absolute URI  thus starting with the http    or https    scheme  This has been dropped in HTML5 specification  So if you use HTML5 and target HTML5 compatible browsers only  then you should be all fine by using a relative URI in the  lt base gt  tag     As to using named hash fragment anchors like  lt a href   anchor  gt   query string anchors like  lt a href   foo bar  gt  and path fragment anchors like  lt a href   foo bar  gt   with the  lt base gt  tag you re basically declaring all relative links relative to it  including those kind of anchors  None of the relative links are relative to the current request URI anymore  as would happen without the  lt base gt  tag   This may in first place be confusing for starters  To construct those anchors the right way  you basically need to include the URI    lt a href    uri  anchor  gt hash fragment lt  a gt   lt a href    uri  foo bar  gt query string lt  a gt   lt a href    uri  foo bar  gt path fragment lt  a gt    where   uri  basically translates to   SERVER  REQUEST URI   in PHP    pageContext request requestURI  in JSP  and   request requestURI  in JSF  Noted should be that MVC frameworks like JSF have tags reducing all this boilerplate and removing the need for  lt base gt   See also a o  What URL to use to link   navigate to other JSF pages

User · Answer

Drupal initially relied on the  lt base gt  tag  and later on took the decision to not use due to problems with HTTP crawlers  amp  caches   I generally don t like to post links  But this one is really worth sharing as it could benefit those looking for the details of a real-world experience with the  lt base gt  tag   http   drupal org node 13148

User · Answer

have also a site where base - tag is used  and the problem described occured    after upgrading jquery    was able to fix it by having tab urls like this    lt li gt  lt a href    smarty server REQUEST URI  tab 1  gt  lt  li gt    this makes them  local   references i used   http   bugs jqueryui com ticket 7822 http   htmlhelp com reference html40 head base html http   tjvantoll com 2013 02 17 using-jquery-ui-tabs-with-the-base-tag

User · Answer

To decide whether it should be used or not  you should be aware of what it does and whether it s needed  This is already partly outlined in this answer  which I also contributed to  But to make it easier to understand and follow  a second explanation here  First we need to understand   How are links processed by the browser without  lt BASE gt  being used   For some examples  let s assume we have these URLs   A  http   www example com index html B  http   www example com  C  http   www example com page html D  http   www example com subdir page html  A B both result in the very same file  index html  be sent to the browser  C of course sends page html  and D sends  subdir page html   Let s further assume  both pages contain a set of links   1  fully qualified absolute links  http   www     2  local absolute links   some dir page html  3  relative links including file names  dir page html   and 4  relative links with  segments  only   anchor   foo bar    The browser receives the page  and renders the HTML  If it finds some URL  it needs to know where to point it to  That s always clear for Link 1   which is taken as-is  All others depend on the URL of the rendered page   URL       Link   Result -------- ------ -------------------------- A B C D      2   http   www example com some dir page html A B C        3   http   www example com dir page html D            3   http   www example com subdir dir page html A            4   http   www example com index html anchor B            4   http   www example com  anchor C            4   http   www example com page html anchor D            4   http   www example com subdir page html anchor   Now what changes with  lt BASE gt  being used    lt BASE gt  is supposed to replace the URL as it appears to the browser  So it renders all links as if the user had called up the URL specified in  lt BASE gt   Which explains some of the confusion in several of the other answers    again  nothing changes for  fully qualified absolute links    type 1   for local absolute links  the targeted server might change  if the one specified in  lt BASE gt  differs from the one being called initially from the user  relative URLs become critical here  so you ve got to take special care how you set  lt BASE gt     better avoid setting it to a directory  Doing so  links of  type 3  might continue to work  but it most certainly breaks those of  type 4   except for  case B   set it to the fully qualified file name produces  in most cases  the desired results     An example explains it best  Say you want to  prettify  some URL using mod rewrite    real file   lt DOCUMENT ROOT gt  some dir file php lang en real URL  http   www example com some dir file php lang en user-friendly URL  http   www example com en file   Let s assume mod rewrite is used to transparently rewrite the user-friendly URL to the real one  no external re-direct  so the  user-friendly  one stays in the browsers address bar  while the real-one is loaded   What to do now    no  lt BASE gt  specified  breaks all relative links  as they would be based on http   www example com en file now   lt BASE HREF  http   www example com some dir gt   Absolutely wrong  dir would be considered the file part of the specified URL  so still  all relative links are broken   lt BASE HREF  http   www example com some dir  gt   Better already  But relative links of  type 4  are still broken  except for  case B     lt BASE HREF  http   www example com some dir file php gt   Exactly  Everything should be working with this one    A last note  Keep in mind this applies to all URLs in your document     lt A HREF   lt IMG SRC   lt SCRIPT SRC

User · Answer

Working with AngularJS the BASE tag broke  cookieStore silently and it took me a while to figure out why my app couldn t write cookies anymore  Be warned

User · Answer

One thing to keep in mind   If you develop a webpage to be displayed within UIWebView on iOS  then you have to use BASE tag  It simply won t work otherwise  Be that JavaScript  CSS  images - none of them will work with relative links under UIWebView  unless tag BASE is specified   I ve been caught by this before  till I found out

User · Answer

In the case of SVG images inlined in the page there is another important issue that arises when the base tag is used   Since with the base tag  as noted above already  you effectively loose the ability to use relative hash URLs like in   lt a href   foo  gt    because they will be resolved against the base URL rather than the current document s location and thus are not relative anymore   So you will have to add the path of the current document to these kinds of links like in    lt a href   path to this page name html foo  gt    So one of the seemingly positive aspects of the base tag  which is to move the long URL prefixes away from the anchor tag and get nicer  shorter anchors  completely backfires for local hash URLs   This is especially annoying when inlining SVG in your page  be it static SVG or dynamically generated SVG because in SVG there can be a lot of such references and they will all break as soon as a base tag is used  on most  but not all user agent implementations  Chrome at least still works in these scenarios at the time of writing    If you are using a templating system or another tool-chain that processes generates your pages  I would always try to get rid of the base tag  because as I see it  it brings more problems to the table than it solves

User · Answer

It s probably not very popular because it s not well known  I wouldn t be afraid of using it since all major browsers support it   If your site uses AJAX you ll want to make sure all of your pages have it set correctly or you could end up with links that cannot be resolved   Just don t use the target attribute in an HTML 4 01 Strict page

User · Answer

Also  you should remember that if you run your web server at non-standard port you need to include port number at base href too    lt base href    localhost 1234    gt      from base url  lt base href         gt      for one step above

[html] What are the recommendations for html <base> tag?

Examples related to html

Examples related to contextpath

Examples related to base-tag