John Mwaniki /   30 Nov 2021

[Explained]: What is the difference between a Link and URL?

Most people often use the terms Link and URL interchangeably to mean the same thing. But are they really the same?

In this article, we will cover in detail what a URL is, what a link is, and their similarities and differences.

Examples

This is a URL -> https://www.webdevsplanet.com/post/difference-between-link-and-url

This is a link -> How to get the full URL of the current page in PHP

What is a URL?

Uniform Resource Locator (URL) is a unique address of a specific resource on a computer network (mostly Internet) such as a web page or file. It specifies the absolute path/location of the resource on the network, and the mechanism of retrieving it.

These resources can be web pages, images, videos or other file types such as CSS, Javascript, PDF, word document, spreadsheets, etc.

URL Structure

A typical URL comprises 3 main parts which include the protocol, the domain name, and the file path.

The protocol indicates the access mechanism for the resource, i.e how the information about the resource should be retrieved. Most used protocols include http:// and https://. These are the web standards, with the https:// being the secure and most preferred one.

Other widely used protocols include ftp: (for handling file transfers) or mailto: (for opening the default mail client).

The domain part is the name of the host computer on which the file is located. It can be the domain name of a website or the IP address of the computer/server that hosts it. Your domain name may or may not contain the www part. With or without it, the address is still the same... It's just a matter of preference. The domain part can also contain a subdomain such as example.webdevsplanet.com if the resource is located within the "example" subdomain of the webdevsplanet.com domain.

The path specifies the name of the file and its location on the host computer. ie the path to follow in order to open the file once you are in the root directory of that domain.

Some URLs contain port numbers such as port 80, 8080, 2083, 2096, etc. For a URL with a port number, the port immediately follows the domain part in the URL.

Examples

https://example.com:2083 - for accessing the web hosting CPanel account
https://example.com:2096 - for accessing webmail of a domain

Some URLs may contain some parameters that pass some vital information to the resource such as on the web page.

Example

https://www.example.com/register.php?refcode=48321

The URL above is the path to a registration page named "register.php" located on the domain example.com. We use the question mark (?) to pass a parameter called refcode whose value is "48321". We use the equal sign (=) to assign a value to the parameter. The registration page will be able to pick the information from the URL and know who referred the user to register and some actions can be performed based on that such as giving the referrer some commission, etc.

A URL to a web page may also contain a fragment identifier. A fragment identifier is a string at the end of the URL starting with a hash, which is associated with a specific element or section of the page. For example, we may have a very long web page, which is subdivided into various sections. To easily navigate through the web page, we create multiple links with fragment identifiers for each section. On accessing the page via a URL that has a fragment identifier, it will scroll automatically to the section associated with it.

Example

https://www.example.com/about-us#team

On accessing the URL above, it will open the "about us" page of example.com domain and scroll automatically to the team section.

Some URLs may contain a slug. A slug is the last in a pretty/user-friendly URL that uniquely identifies a specific page/post on a website. A slug is useful especially in the case of dynamic URLs, where one file is used to display different content depending on the parameter passed. Passing parameters this way: https://www.example.com/post?id=94 is discouraged and that's where the slugs come in. A URL with a slug looks much cleaner, easy to read and remember. It's the preferred way (according to the search engines) of making URLs.

Example

https://www.webdevsplanet.com/post/difference-between-link-and-url

The above is the URL for this page. The page is using the https:// protocol, the domain name is "www.webdevsplanet.com", the file name for this page is "post" and "difference-between-link-and-url" is the slug, which uniquely identifies this article. The extension for this file (post) has been removed/hidden. By default, if you don't remove the file extension, the file name will look something like "post.html", "post.php", "post.jsp", etc.

To open a web page or other types of files on the internet, all we have to do is simply type or paste the URL on the address bar of a web browser, or click on a shared URL.

When someone is asking to be sent a link to a certain web page or file on the Internet, he/she is technically asking to be sent the URL (not a link).

Under some circumstances, you may not be able to access or open a resource on a certain URL. In such cases, the server responds with an error message.

For instance, if the URL has changed, the resource has been removed or you make a mistake typing the URL, the server responds with an error code: 404 and message: Page not found.

If you try to open a URL in which you don't have adequate permission to access, the server responds with an error code: 403 and message: Forbidden.

Other error responses include 500, 503, etc.

What is a Link?

Link is the short form of hyperlink. A hyperlink is a clickable HTML element on a web page that opens another web page, a document, or moves to a different section/location of the same page when clicked.

Basically, links provide a pathway that allows users to navigate from page to page within the same website or from one website to another.

HTML link syntax

To create a link in HTML, we use the anchor tags, which have an opening <a> and a closing </a> tag. We add the link URL within the href attribute of the anchor tag and put the anchor text (text which will be viewed as the link) in between the opening and closing anchor tags.

<a href="URL">Link text here</a>

Output

Link text here

From our example above, the "Link text here" text is the only thing that will be visible to the user as the link. Clicking on it will send/redirect the user to the destination address specified by URL within the href attribute.

There are two ways of linking to a file/resource in HTML which include relative and absolute paths.

Relative path

This is only applicable if the linking HTML page and the page/file being linked to are both hosted on the same computer/device. In this case, you will not add the protocol and the domain name. We add the relative path to the file being linked to in relation to the linking page in the computer storage.

Let's say for example we have a website with six pages. We have 3 HTML files in the primary directory/folder named "webdevsplanet". These files include index.html, about-us.html, and contact-us.html. In the same primary directory, we have a folder named "services". In it, we have 3 files namely: webdesign.html, app-development.html, and seo.html.

To link between the 6 HTML pages, we can use relative links. For example to add a link to the about-us.html page from the index page, simply add the link in the index.html file as shown below:

<a href="about-us.html">About Us</a>

Note that we have only added the file name "about-us.html" as the URL in the anchor tag href attribute. This is because the two files are located within the same directory.

To link to the "webdesign.html" page from the index page, the relative path will change because the two files aren't in the same directory. We will have to include the name of the folder containing the webdesign.html file within the href attribute.

<a href="services/webdesign.html">Web Design</a>

Now let's do it the vice versa. If you are linking to the "index.html" file from the "webdesign.html", then add the link in the webdesign page as below:

<a href="../index.html">Home</a>

You may note that though the two files are not located in the same directory, this time we have used "../" instead of the folder name in the href attribute. The "../" simply means one level up, meaning that we have moved one level up within the directory structure to get to the "webdevsplanet" folder from the "services" folder. Then now because the index.html file is located in this directory, all we had to do is add the file name.

Absolute path

To use a relative path, the linking page and the destination file MUST be located on the same computer. On the other hand, to use an absolute path, the linking page, and the destination page/file can be located on the same computer or from different computers/websites/servers.

To use the absolute path, you must specify the full destination URL in the href attribute, containing the protocol, domain name, and file path as we covered above in the URL section.

Usually, when a text hyperlink is created, its color is blue and underlined by default to make it easily noticeable and distinguishable as a link from the other texts.

When a link has been visited, its color changes to purple.

When a link is active (has been clicked but the linked resource hasn't opened yet), its color changes to red.

These default link behaviors can easily be changed through CSS styling according to your preferences.

As you can see from our examples, unlike the URL, a link doesn't follow any given format. You can have any text as the link as long as it exists between the opening <a> and closing </a> tags.

Note: Not only the text that can be used as a link. You can make other types of HTML elements such as images to act as links. All you have to do is to enclose them in between the opening and closing anchor <a> tags.

Differences between a URL and Link

• While a link doesn't have any definite syntax/format, the URL has a standard format that includes the protocol, host/domain name or IP address, and the file path.
• The links are what people click on in websites to navigate from one page to another or to open various documents. On the other hand, the URL is the address denoted by the link. It is the destination of the link.
• The URL is unique in a computer network such as the internet. There can never exist two identical URLs. On the other hand, a link can be anything and doesn't have to be unique. Multiple pages or websites can have the same text as a link.
• As opposed to what the majority of people are used to in their day-to-day communications, a link cannot be shared. What actually gets shared when someone wants to access a certain web page or a resource on the Internet is the URL.