Back to course

Lesson 12: Absolute vs. Relative Paths

The HTML Masterclass: From Zero to Web Developer

12. Absolute vs. Relative Paths

Understanding how to reference files (images, CSS, or other HTML pages) is crucial.

12.1 Absolute Paths

An absolute path is a full URL, including the protocol (http:// or https://) and the domain name. This is used for linking to external websites.

html

Company Logo

12.2 Relative Paths (Internal Linking)

A relative path describes the location of a file relative to the current document. This is used for linking between pages and resources within your own project.

Assume the current file is my-project/pages/about.html.

NotationMeaningExample
filename.extSame directory as the current file.<a href="contact.html">
directory/filename.extInside a subdirectory.<a href="blog/post-1.html">
../filename.extUp one directory level.<a href="../index.html">

Example File Structure:

If you are on about.html (inside the pages folder) and want to link to home.html (in the root folder):

html

Back to Home