Absolute vs relative URLs in HTML - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Absolute URLs

Which of the following is an example of an absolute URL?

A images/photo.jpg

B /images/photo.jpg

C ../images/photo.jpg

D https://example.com/images/photo.jpg

💡 Hint

Absolute URLs include the full path starting with the protocol (like https://).

An absolute URL contains the full web address including the protocol and domain name. Relative URLs only specify the path relative to the current page.

📝 Syntax

intermediate

Correct Relative URL Usage

Given the current page URL is https://example.com/blog/post1.html, which relative URL correctly links to https://example.com/images/logo.png?

A ../../images/logo.png

B ../images/logo.png

C /images/logo.png

D images/logo.png

💡 Hint

Relative URLs starting with a slash / start from the root of the website.

Using /images/logo.png starts from the root domain, so it correctly points to the image regardless of the current page's folder.

❓ rendering

advanced

Rendering Result of Relative URL

If the current page is https://example.com/products/item.html and the HTML contains <img src="../images/pic.png" alt="Pic">, what is the full URL the browser will request?

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

B https://example.com/products/images/pic.png

C https://example.com/products/../images/pic.png

D https://example.com/pic.png

💡 Hint

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

The relative URL ../images/pic.png moves up one directory from /products/ to the root, then into /images/.

❓ selector

advanced

CSS URL Selector Behavior

In CSS, if the stylesheet is located at https://example.com/css/style.css and contains background-image: url('../img/bg.png');, which full URL will the browser load?

A https://example.com/img/bg.png

B https://example.com/css/img/bg.png

C https://example.com/css/../img/bg.png

D https://example.com/bg.png

💡 Hint

Relative URLs in CSS are relative to the CSS file location, not the HTML page.

The .. moves up one folder from /css/ to the root, then into /img/.

❓ accessibility

expert

Accessibility Impact of URL Choices

Which statement best explains how using relative URLs can affect accessibility and user experience?

A Using relative URLs disables keyboard navigation on the page.

B Relative URLs can break links if the page is moved, causing screen readers to fail loading resources.

C Absolute URLs prevent any accessibility issues because they never break.

D Relative URLs always improve accessibility by reducing page load times.

💡 Hint

Think about what happens if a page is moved or copied to a different folder.

Relative URLs depend on the page location. If the page moves, relative links may break, causing assistive technologies like screen readers to fail loading linked resources.