HTMLmarkup~10 mins

Absolute vs relative URLs in HTML - Browser Rendering Compared

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Absolute vs relative URLs

Read <a href>

→Parse URL

↓

Use full URL as is

↓

Combine base URL + relative path

↓

Load resource from final URL

The browser reads the link's href attribute, checks if the URL is absolute or relative, then either uses it directly or combines it with the page's base URL before loading the resource.

Render Steps - 3 Steps

Code Added:<a href="https://example.com/page">Absolute URL</a>

Before

[Empty page]

→

After

[Link: Absolute URL]

The browser shows a clickable link with text 'Absolute URL' that points to a full web address starting with https://.

🔧 Browser Action:Creates DOM node for <a>, sets href to absolute URL, prepares to load resource if clicked.

Code Sample

Two links: one uses an absolute URL that points to a full web address, the other uses a relative URL that depends on the current website's address.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>URL Example</title>
</head>
<body>
  <a href="https://example.com/page">Absolute URL</a>
  <a href="/folder/page">Relative URL</a>
</body>
</html>

Render Quiz - 3 Questions

Test your understanding

After adding the relative URL link in step 2, what does the browser do when you click it?

ALoads the relative path as if it were an absolute URL

BCombines the relative path with the current website's base URL and loads that page

CIgnores the link because it is relative

DLoads the link from the example.com domain

Common Confusions - 2 Topics

Why does my relative link sometimes go to a wrong page?

Because relative URLs depend on the current page's location. If you use a relative path without a leading slash, it appends to the current folder, which may not be what you expect. See render_step 3 for how the browser combines URLs.

💡 Relative URLs without a leading slash add to current folder; with a leading slash, they start from the website root.

Why does an absolute URL always go to the same place?

Because absolute URLs include the full web address, so the browser does not change or combine them with anything else. This is shown in render_step 1 where the link points directly to https://example.com/page.

💡 Absolute URLs always start with a protocol like https:// and point exactly where you want.

Property Reference

URL Type	Example	Starts With	How Browser Uses It	Common Use
Absolute URL	https://example.com/page	"http://" or "https://"	Used as is, points to exact location on web	Linking to external sites or full paths
Relative URL	/folder/page	"/" or no slash	Combined with current page's base URL	Linking within the same website

Concept Snapshot

Absolute URLs include the full web address starting with http:// or https://. Relative URLs depend on the current page's location and combine with the base URL. Absolute URLs always point to the exact location on the web. Relative URLs are useful for linking within the same website. Leading slash in relative URLs means start from root; no slash means relative to current folder.