Links and images are two of the most common resources you can add to your web pages, so it’s important to know how to address them correctly. then what is the difference between Absolute URL and Relative URL in HTML?
Every website needs to reference some resource, be it images, files, or other web pages. Deciding to link to other Files is very important to ensure that the browser detects them correctly. You can link to resources using absolute vs relative URLs. This applies to both local files on the Desktop and protocol-based URLs accessed on the web.
Difference Betn Absolute URL and Relative URL in HTML?
Use an Absolute URL Path
An absolute URL contains the absolute path to a specific file location. Examples of these include full paths to files on your computer:
- file:///C:/Users/Presonal /Desktop/Practice.html
- file:///C:/Users/Roman /Download /Work/Video.docx
- file:///C:/Users/Loki /Documents/Music/@Music.mp3
Another example of a full protocol URL is that you can use to identify a resource to send on the internet. Mostly, these start with “https” or “HTTP”:
- https://www.Google.com
- https://calculator.google.com/ calculator
- https://www.learnically.com.au/rooms
The absolute URL Has all the detail required to locate the file which you are attempting to access. This is necessary if you are linking to any external site.
- Create a simple website in HTML by Creating a new Folder and adding two new files namely Index.html and style.css
- In index.html, add some HTML code or Boiler plat to create a basic website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My site</title>
</head>
<body>
<div class="container">
<h1>My Website</h1>
<p>Welcome to my website</p>
</div>
</body>
</html>3. In style.css, enter some style properties to the webpage.
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
}4. In index.html, add an <a> (Anchor tag) inside the containing div, and add the absolute URL to your site. Example: (Https://Google.com)
<a href="https://www.google.com" class="Link">Google.com</a>5. You can also display images online using the full absolute path of the file. You can also take extra steps to add a responsive image for your HTML webpage.
<img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" alt="catpic">6. Click on the index.html file to open it in a browser and view the image from its external location.
7. From the root folder of your website, create a new folder to save all images, namely Images. In the folder add a new image and give it a name, such as cat.jpg.
8. Identify the path to the image file you have just added. You can do this by finding it in the navigation path of your operating system’s file manager app. You will also need to add the file name to the end of the path.
Example: “C:\Users\Sharl\Desktop\Website\Images\Cat.jpg”
Difference Between Absolute URL and Relative URL Difference Between Absolute URL and Relative URL
9. In index.html, Arrange your image and it replaces your image tag that uses the absolute path pointing to the cat.jpg file saved on your Desktop. Always remember to add the file:// prefix to indicate a local filesystem resource. On Unix and mac-OS, you can then append the absolute URL you identified in the previous step. On Windows, you’ll need to replace backslashes with forward slashes and add an extra forward slash before the letter, for example
<img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" alt="catpic">10. Click on the index.html file to open it on the browser and view the image saved on your Desktop.
Use a Relative URL Path
A relative URL saves only part of a URL and is usually relative to the location of the current file or part of a website.
In the above example, to access Logo.jpg from index.html using the relative URL, you would use the path “Image/Icon/Logo.jpg “. Other examples:
- Pages/Cat1.html
- Images/Cat.jpg
- Style.css
The website will still be able to retrieve files when you use the same folder structure on another computer. When routing on the web, instead of using absolute links like “https://example.com/about”, you can also use another routing example:
- /projects/local-Project
- /contact
- /about
You can also use these relative URLs for creating a link or reference image in your HTML web page
- In the root of your website directory, create a new folder called Pages.
- In the New Pages folder, create a new file named cat1.html.
- Populate cat1.html with HTML code to create the page Inside the wrapper div, add an image tag, and use a relative URL to link to the cat.jpg image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bird 1</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../Style.css">
</head>
<body>
<div class="container">
<h1>Cat</h1>
<p>Cat is a cute Animal</p>
</div>
</body>
</html>4. Inside the wrapper div, add an image tag, and use a relative URL to link to the cat.jpg image.
<img src=“../Images/cat.jpg” alt=“cat photo” class=”mb28″ width=“900” height=“700”>
5. In the index.html file, remove the content inside the wrapper div. Replace it with a new single tag that uses a relative link to open the Cat1.html file.
<div class="container">
<h1>My Website</h1>
<p>Welcome to my website</p>
<a href="pages/cat1.html" class="mb28">Cat 1:Cat</a>
</div>6. Click the index.html file to open in a browser and click the new link to display to Cat1.html.
Now you know the difference between absolute vs relative URLs. You should always ensure that all links that your users can access are secure.