So, I’ve spent most of the day with my good friend, Mr. Anchor Tag, and I thought I would share something I have learned about him today. Primarily…
Quick, what is the difference between <a href=”page.html”> and <a href=”/page.html”> ? It’s totally the beginning slash (/) before “page”. But does this make a difference? Turns out, yes it does. The first link without the slash is a relative link – the server will give the requested file from the same directory as the file that contains the link. The second link containing the beginning slash is called an absolute link. This means that the server will start from your website’s document root (www.example.com) instead of the current directory. For example, suppose the page containing these links is located at www.example.com/stuff/index.html. The link, <a href=”page.html”>, will go to www.example.com/stuff/page.html if the server has it. However, the link, <a href=”/page.html”> will go to www.example.com/page.html.
But What Does This Mean?
I’m Glad you asked. Suppose you are editing a page that is going to end up at danielhoenes.com/2011/12/archives/whatever/tag/blah or perhaps you are using a web application or CMS that is going to display your page at different URLS. The shortest way to link to a fixed resource (such as danielhoenes.com/logo.gif) is to use the /absolute link. No matter which sub directory your page gets put, the static resource will be found. You could also just include your whole domain in the link (http://www.example.com), but that is at least 10 extra characters and another problem. Domain dependency. Suppose you are now sitting between multiple domains. Your client has said “hey, I’d like to use this theme you are making me on tomatos.com and relish.com. Can you make that happen?” Well, with the absolute link – you can.