Why do relative paths like '../style.css' break when previewed through the file:/// protocol compared to a local server?

File systems allow traversing up directories indefinitely, but web servers confine root-relative paths ('/') strictly to the public document root. Testing via local HTTP servers ensures consistent path resolution.

What is the purpose of the tag in the HTML ?

The element specifies the base URL for all relative URLs in a document. All relative links will be resolved against this base URL.

Why are root-relative paths (e.g. /images/logo.png) preferred in modern web applications?

They remain identical across every page of your website, whether the page is at /index.html or deeply nested at /blog/2026/09/article.html.

Topic 28 of 57 5. HTML Layout and Structure Interactive Tutorial

HTML File Paths: Absolute and Relative Paths with Examples

11 mins read Last updated: 12 Nov 2026 15,300 views

HTML Editor HTML Cheat Sheet 0.00%

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

What is the difference between absolute, root-relative, and relative file paths in HTML?

Direct Answer & Overview

HTML file paths describe the location of a file in a website's folder structure. Absolute paths specify the complete URL including protocol and domain (https://example.com/logo.png). Relative paths point to files in relation to the current document's directory (./images/logo.png or ../logo.png). Root-relative paths (/images/logo.png) begin from the web server root.

Comprehensive Step-by-Step Concepts

1) Understanding File Paths: Whenever you reference an external resource in HTML (stylesheets in , scripts in