What is a URL?
A URL (Uniform resource locator) is a way to point to the location of a specific resource. It is a unique Identifier. URLs in their various forms are used to link :
Media (like images, music or video)
Websites (internally and externally)
Websites can link internally and externally to files. But you knew that, right?!
A document with its resources (as we will see with the
link
element),Websites within websites (using an
iframe
element)
URL syntax
Like the human body, HTML document, or in our case a URL, we can understand it by studying the anatomy (a term I like, but let’s go with syntax in this case). Below we have an absolute URL with a domain(location of file) and port (communication endpoint).
In the middle we have the path, and towards the end are the parameter(s) (many Developers I know call them query parameter(s) ). This is how we pass server-side data to the front end (the website). And last but not least we have the anchor, which allows the URL to highlight the text that is associated with an HTML
id
.
Types of URL
There are two types of URL:
Absolute
The complete (also called fully qualified) web address of the file. The fully qualified term refers to the anatomy of an absolute URL. It contains the protocol (
HTTP/HTTPS
), the domain or IP address, and the specific path/file name.While definitions defer (like a lot of web concepts by the way) a URL is considered absolute if the output (the result of accessing the URL) is always the same. Because they provide the full path to a file, they are independent of the context in which they are used.
//index.php // Usually right before the closing </body> tag, to make sure all the HTML is loaded before the JS <script src="scripts/script.js"></script>
Relative
Specifies the location of a resource in relation to the current page or resource. Developers often use relative file paths for linking the internal resources to build websites. Let’s say I want to include the
HTML
for a reusable website component, like aheader
.I can use the
php
include keyword (often mistaken for afunction
by the way!) along with a string which is the relative file path for the file I am linking. For example://index.php <?php include “./partials/header.php“; ?> <h1>welcome to the homepage</h1> <?php include “./partials/footer.php“; ?>
An absolute URL can link to any website in the world. The benefits: It uses a protocol such as HTTP/HTTPS
and as a result is more secure than a relative URL. It also prevents duplicate content.
This is when two URLs refer to sites with similar content, which can confuse human and robots (like site crawlers) alike. With the help of a canonical (absolute) URL for internal linking we can prevent duplicate content. This tells the computer which URL to treat as the primary one.
For example, if you have both http://example.com/page
and http://example.com/page?parameter=1
, you can use a canonical
tag to indicate that http://example.com/page
is the preferred version.
A Relative URL can only link to internal resources (files that are on the same web server). It is often used to link website pages internally and to help UX, by providing hyperlinks to different pages so users can navigate.
URLs in HTML
You use a URL as an attribute value for a handful of HTML elements, usually those that support the src
and href
global attributes. In my work I have used them with the a
, link
, and img
elements. It looks like this:
// index.php, assuming regular HTML structure
<link href="./styles/style.css" rel="stylesheet" type="text/css">
<a href = "https://perpetual.education">PE<a/> // absolute URL
<img src="./images/ragdoll-cat.jpg" alt="a ragdoll cat smiling in the sun"> // a relative URL pointing to a jpg in the images folder
Benefits and downsides to URL type
The benefits of an absolute URL are:
Allows for linking of external resources
An explicit, human-readable way to access a resource
Easily sharable as they are context-independent
The downsides of an absolute URL:
Maintenance issues: if you change the structure of your files, it can be time consuming to change the URLs.
Problems with portability: If you change domains or servers the URL might not work as expected, requiring you to update all the old URLs.
Longer to type, and can give information about server infrastructure. This can aid malicious actors in site attacks. It also comes with an overhead, as a server can accumulate lots of absolute URLs and confuse people and robots (as mentioned earlier).
The benefits of a relative URL are:
Flexible: adapts to the users location relative to the document root (index.html or index.php)
Shorter and cleaner: no explanation needed here, just compare the length of the relative and absolute URLs.
The downsides of a relative URL:
Not sharable due to their relative nature
Dependency on context
Brittle, as links can break due to changing of file structure on the server
By the way, isn’t it funny that a strength can be a weakness (and vice versa) depending on context? Something to think about! Do you find yourself using absolute or relative URLs in your development, and why?
Resources
Code
Nothing yet… suggest something!