Link URLs

This article describes various ways to construct link URLs.

Of course, you know how to construct a link. I'll show the code anyway in order to have something to reference.

<a href="URL">[image/text]</a>

The URL may be the full, absolute URL. Or, a partial URL may be provided to let the browser complete it.

Here are various ways the link URL for the web page can be constructed. Following these is information about them.

https://example.com/books/info/index.php
https://example.com/books/info/
https://example.com/books/info
http://example.com/books/info

//example.com/books/info

/books/info/index.php
/books/info/
/books/info
books/info

../info
./info

In the box above are 11 URLs in 4 categories:

→ The first 4 URLs in the above box are absolute URLs.

→ The next 1 is a URL relative to the protocol used to view the current web page.

→ The next 4 are URLs relative to the web page being viewed.

→ The last 2 are relative URLs with directory tree notation.

Each category has an explanation:

• 4 Absolute URLs:

  These are link URLs that begin with https: or http: protocol. If the URL does not include a file name, the server will serve whatever is its default (usually, index.*).

• 1 URL relative to the protocol:

  This is similar to an absolute link URL. The difference is that the browser provides the protocol to make it an absolute URL. The protocol the browser provides is the protocol of the web page that the browser has loaded and where the link is found.

• 4 URLs relative to the web page:

  The link URLs are relative to the document root of the current web page or relative to the subdirectory where the web page is located. (The document root is the directory where the main or index page for the website is located.)

  When the relative URL begins with a slash ("/") character, the URL is relative to the document root. Otherwise, the URL is relative to the subdirectory where the web page with the link is at.

  Relative URLs can link only to locations within the domain where the web page is located.

• 2 Relative URLs with directory tree notation:

  Relative link URLs (see previous list item) can also have directory notation. Directory notation is one or two dots followed by a slash ("/") character.

  If the directory notation is ./ (one dot and slash), it means the same thing as relative URLs without a slash prepended — the URL is relative to the subdirectory where the web page with the link is at.

  If the directory notation is ../ (two dots and slash), it means the link URL starts with the directory further back. Relative URLs may begin with more than one ../ set, each of which tells the browser the link URL should begin still one more directory further back. Note, however, that the browser will not use a link URL beginning any further back than the document root.

  As an example, if the current web page is https://example.com/books/sale/index.php and the relative link URL is ../info, then after the directory shift the resulting relative link URL would be /books/info

The above all applies to link URLs within web pages being viewed online with a browser.

There is a caveat. If the web page is downloaded and the browser is used to view the page locally, then only absolute URLs will work. Therefore, if it is important that your web page links always will be correct, then use only absolute link URLs.

(This content first appeared in Possibilities newsletter.)

Will Bontrager