Absolute vs relative URLs in HTML - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to link to an absolute URL for Google.

HTML

<a href="[1]">Visit Google</a>

Drag options to blanks, or click blank then click option'

A/about.html

Bhttps://www.google.com

Ccontact.html

Dimages/logo.png

Attempts:

3 left

💡 Hint

Common Mistakes

Using a relative URL when an absolute URL is needed.

Forgetting to include https:// in the absolute URL.

An absolute URL includes the full web address starting with https://. Here, https://www.google.com is an absolute URL.

2fill in blank

medium

Complete the code to link to a relative URL for the about page in the same folder.

HTML

<a href="[1]">About Us</a>

Drag options to blanks, or click blank then click option'

Aabout.html

B/about.html

Chttps://example.com/about.html

Dhttp://about.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using a leading slash which points to the root folder.

Using an absolute URL when a relative URL is needed.

A relative URL like about.html points to a file in the same folder as the current page.

3fill in blank

hard

Fix the error in the relative URL to correctly link to the contact page in a subfolder named 'pages'.

HTML

<a href="[1]">Contact</a>

Drag options to blanks, or click blank then click option'

Apages/contact.html

B/pages/contact.html

Ccontact.html

Dhttp://pages/contact.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using a leading slash which points to the root instead of the subfolder.

Using an absolute URL when a relative URL is intended.

To link to a file inside a subfolder relative to the current page, use pages/contact.html without a leading slash.

4fill in blank

hard

Fill both blanks to create a link to the image 'logo.png' located in the 'assets' folder relative to the current page.

HTML

<img src="[1]/[2]" alt="Company Logo">

Drag options to blanks, or click blank then click option'

Aassets

Bimages

Clogo.png

Dlogo.jpg

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong folder name.

Using the wrong file extension.

The image is inside the 'assets' folder, so the path is assets/logo.png.

5fill in blank

hard

Fill all three blanks to create a link to the 'services.html' page located one folder up and inside the 'pages' folder.

HTML

<a href="[1]/[2]/[3]">Our Services</a>

Drag options to blanks, or click blank then click option'

A..

Bpages

Cservices.html

Dhome.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using too many or too few .. to go up folders.

Mixing up folder and file names.

To go one folder up into the 'pages' folder, use ../pages/services.html.

Practice

1. Which of the following best describes an absolute URL?

easy

A. A link that starts with a slash, like /images/photo.jpg

B. A full web address including protocol and domain, like https://example.com/page

C. A link that points to a file in the same folder, like photo.jpg

D. A URL that only works on your local computer

Solution

1. Step 1: Understand what an absolute URL is

   An absolute URL includes the full address: protocol (http/https), domain, and path.

2. Step 2: Compare options to definition

   A full web address including protocol and domain, like https://example.com/page shows a full address with protocol and domain, matching the absolute URL definition.

3. Final Answer:

   A full web address including protocol and domain, like https://example.com/page -> Option B

4. Quick Check:

   Absolute URL = full web address [OK]

Hint: Absolute URLs always start with http:// or https:// [OK]

Common Mistakes:

• Confusing relative URLs with absolute URLs
• Thinking a URL starting with / is absolute
• Believing file names alone are absolute URLs

2. Which of these is the correct way to write a relative URL to link to a file named style.css in the same folder?

easy

A. style.css

B. https://example.com/style.css

C. /style.css

D. ../style.css

Solution

1. Step 1: Understand relative URLs in the same folder

   A relative URL to a file in the same folder can be just the file name.

2. Step 2: Check options for correct relative URL

   style.css uses just style.css, which correctly points to the file in the same folder.

3. Final Answer:

   style.css -> Option A

4. Quick Check:

   Relative URL same folder = file name only [OK]

Hint: Use just the file name for same-folder relative URLs [OK]

Common Mistakes:

• Using a leading slash which points to root folder
• Using full URLs when relative is needed
• Using ../ which points to parent folder

3. Given the current page URL is https://example.com/blog/post1.html, what will the browser load for the relative URL ../images/pic.jpg?

medium

A. https://example.com/images/pic.jpg

B. https://example.com/blog/images/pic.jpg

C. https://example.com/blog/post1.html/images/pic.jpg

D. https://images/pic.jpg

Solution

1. Step 1: Understand the meaning of .. in relative URLs

   .. means go up one folder from the current page location.

2. Step 2: Apply to current URL

   Current URL folder is /blog/. Going up one folder leads to /. Then adding images/pic.jpg gives /images/pic.jpg.

3. Final Answer:

   https://example.com/images/pic.jpg -> Option A

4. Quick Check:

   .. moves up one folder [OK]

Hint: .. means go up one folder in URL path [OK]

Common Mistakes:

• Thinking .. stays in the same folder
• Appending path without going up folder
• Confusing relative with absolute URLs

4. You wrote this HTML link: <a href="images/photo.jpg">Photo</a> on the page https://example.com/about/index.html, but the image does not load. What is the likely problem?

medium

A. The URL should be absolute starting with https://

B. The relative URL is missing a leading slash to start from root

C. The file extension .jpg is incorrect

D. The relative URL points to a folder that does not exist relative to current page

Solution

1. Step 1: Understand relative URL resolution

   The relative URL images/photo.jpg looks for an images folder inside the current folder /about/.

2. Step 2: Check folder existence

   If the images folder is not inside /about/, the link will break. This is the likely cause.

3. Final Answer:

   The relative URL points to a folder that does not exist relative to current page -> Option D

4. Quick Check:

   Relative URLs depend on current folder [OK]

Hint: Check if relative folder exists where page is located [OK]

Common Mistakes:

• Assuming relative URLs start from root without slash
• Using absolute URLs unnecessarily
• Ignoring folder structure when linking

5. You want to link to the homepage from a page at https://example.com/products/item.html. Which URL should you use to ensure the link works correctly regardless of the current page location?

hard

A. /index.html

B. index.html

C. https://example.com/index.html

D. ../index.html

Solution

1. Step 1: Understand absolute vs relative URL behavior

   Relative URLs depend on current page location, so they may break if page moves.

2. Step 2: Choose URL that works anywhere

   An absolute URL with full domain always works regardless of page location.

3. Final Answer:

   https://example.com/index.html -> Option C

4. Quick Check:

   Absolute URL works anywhere [OK]

Hint: Use full URL to avoid relative path issues [OK]

Common Mistakes:

• Using relative URLs that break if page moves
• Assuming leading slash always works for all pages
• Not including protocol and domain for absolute URLs