Relative links (also known as “document relative“) have the advantage of being shorter, and more portable as they refer to other pages relative to themselves.

For example, ../foobar.html refers to a file named foobar on level above the current page.

Absolute links are sometimes called root relative as absolute links, for some, refer to entire URL (http://www.example.com/). Despite the two different names for this kind of link, the logic is the same, both are based on the named directory structure of site.

The link <a href="http://www.example.com/ first/second/foobar.html"> (or <a href="/first/second/foobar.html">) goes to the file named foobar two directories down from the root directory. Because of that structure, absolute links can get quite long.

If the site has a basic hierarchical structure, relative links are the best choice. Complex sites, or those with dynamically generated pages (like this one), are usually best served by absolute links.

There is nothing preventing you from using a mix, though. For example, the navigation on this page uses absolute links, while these tips generally use relative links.