BTC -
Click to copy address
Make it root-relative.
If you’re new-ish to web development, you may have seen the <base> element while looking through an HTML reference. On paper, it seems useful: put one in the <head>, give the href="" attribute an absolute URL such as href="http://www.yourwebsite.com", and then you never have to worry about internal links again. Just set it and forget it. No more images with relative links breaking when you move things around. No links within dynamic components breaking when they’re rendered on a page with a different folder structure. Just sit back, relax, and know that everything always points to your base.
Just let Base handle it. Base knows what you like. Base is a good worker. Base will never leave you when you’re sad.
Seems great right? Well don’t let it tempt you with its sweet promises. We can accomplish the same things through better methods. Ultimately base will cause you more pain than it's worth, and the situations where it was useful in the past are now largely irrelevant.
Let’s take a second to compare using base with a similar approach: using root-relative links sitewide.
Advantage 1:
Both techniques allow you to structure your web app using dynamically rendered components without having to worry about variable/changing folder structures.
For example: if you render the HTML for the header on every page using a single javascript component, then the links within your header will continue to function no matter where each page lives. If both /index.html and /portfolio/mywebapp.html use your header component, you’re good to go even though those two pages sit in different folders. This situation would normally break relative links, so using base or using root-relative links would both solve this.
Advantage 2:
Both techniques allow you to avoid typing out entire URLs for every internal site link.
And that’s where the advantages end for base. So what’s so bad about that? Well, the element has a few pitfalls that you may not realize that you have fallen into until the end of your project... which is the most painful type of architectural error.
One disadvantage is that you can only have one base tag per website. This means that if you had the element set up for your test server, your site will most likely break when moved to your production domain. It will break again when you upgrade your HTTP site to HTTPS, thus changing the absolute path. This means that every time you make changes to your site, and move code back and forth between the test server and the production server, you have to change the base href appropriately. This problem would be annoying but could be remedied by simply setting the base href value to href="/".
The problem that can’t be remedied, however is that using base will break the behavior of any jump links. In other words, if you attempt to jump to a section of a page using <a href="#mySection">...</a>, the base element will cause this link to resolve to http://yourwebsite.com/#mySection, which doesn’t exist.
I encourage you to use root-relative links for all sitewide links instead of ever playing with the base element. This simply means appending / to the beginning of your internal links. All of the advantages, none of the headaches.
Keep an eye out for base when working with legacy code, however try to avoid using it if you can unless you're 100% sure that you need it and there is no other possible solution._