Links
Links refer to objects on a web page that navigate to another page when clicked. This article will give information regarding links and their usage.
Contents
How Links Are Created
Links are most often created using the HTML <a> tag. The href attribute of the <a> tag allows you to specify the location to which the link will navigate. Any HTML elements within the opening and closing elements of the <a> tag will be clickable.
Example:
<a href="newpage.html">Click here to go to newpage.html</a>
How Links Work
There are three main types of links. This section will discuss them.
Page-Relative Links
A page-relative link gives the location of the new page relative to the location of the current page. It cannot start with a forward slash.
An example of a page-relative link is:
<a href="aFolder/aPage.html">Go to aPage</a>
The above link will start in the current folder (as seen by the web browser in the current URL) and navigate to the aPage.html page within the aFolder sub-folder. For example, if the current URL is "http://someSite.com/someFolder/somePage.html", then the link would take you to "http://someSite.com/someFolder/aFolder/aPage.html".
Site-Relative Links
A site-relative link gives the location of the new page relative to the root of the current site. It must start with a forward slash.
An example of a site-relative link is:
<a href="/aFolder/aPage.html">Go to aPage</a>
The above link will start at the root of the site and navigate to the aPage.html page within the aFolder folder. For example, if the current URL is "http://someSite.com/someFolder/somePage.html", then the link would take you to "http://someSite.com/aFolder/aPage.html".
Absolute Links
An absolute link gives the entire location of the new page, including the site. It must start with http:// or https://(for secure links on SSL secured sites).
An example of an absolute link is:
<a href="http://aSite.com/aFolder/aPage.html">Go to aPage</a>
The above link will always go to "http://aSite.com/aFolder/aPage.html" regardless of the current site, folder, or page.
Considerations When Using URL Rewriting and Page-Relative Links
When using rewrite rules to change the URLs seen by the web browser, it is important to understand the impact on page-relative links. For instance, given the URL "http://aSite.com/aFolder/aPage.html", you decide that you want to use a rewrite rule so that visitors instead see the page "http://aSite.com/aFolder-aPage". Since the browser interpolates the location of page-relative links based on the current location, all page-relative links on aPage.html will point to locations under the root folder when viewing the rewritten URL instead of pointing to locations under the /aFolder folder. Here is an example to demonstrate:
Contents of aPage.html:
<a href="somePage.html">Go to Some Page</a>
When viewed at "http://aSite.com/aFolder/aPage.html", the link on aPage.html would take you to:
http://aSite.com/aFolder/somePage.html
When viewed at "http://aSite.com/aFolder-aPage", the link on aPage.html would take you to:
http://aSite.com/somePage.html