Course Index

HTML · Module 05 · Lesson 21 of 54

Absolute vs. Relative Paths

What are Absolute and Relative Paths?

Imagine giving someone directions:
  • Absolute Path: "Go to Paris, France, and visit the Eiffel Tower." (This address is the same no matter where you currently are in the world).
  • Relative Path: "Go to the next room and open the drawer." (This only makes sense based on where you are sitting right now).

    • In HTML:

  • Absolute Paths are full URLs that include the protocol and domain (e.g., https://google.com/index.html). Use them to link to external websites.
  • Relative Paths point to files on your own server relative to the current file (e.g., about.html or ../images/photo.jpg). Use them to link your own website's pages together.

    • Why does it matter?

    Using relative paths for your own pages means your website links won't break if you rename your domain or move your code from a local computer to a live web host server. It is a vital concept for building portable, professional websites.

    How to write it

  • Absolute URL:
    •     <a href="https://google.com">Google</a>
  • Relative URL:
  • Same folder: href="contact.html"
  • Up one level: href="../about.html"
  • Down a folder: href="lessons/what-is-html.html"

    • Absolute: https://domain.com/index.html
    Relative: ../lessons/doctype.html

    Common Mistakes

  • Using local drive paths: Linking to a file on your hard drive (e.g., href="C:/Users/hassan/index.html") will work on your computer, but once you upload the site to the internet, it will break for every other visitor! Always use relative paths for your local files.

    • Quick Reference

  • href="https://site.com" — Absolute path to an external page.
  • href="folder/file.html" — Relative path to a local page in a subfolder.
  • href="../file.html" — Relative path up one level in the folder structure.
    • Your Task
    Create two links: 1. An absolute link `<a>` pointing to 'https://google.com' with text 'Google'. 2. A relative link `<a>` pointing to '../lessons/what-is-html.html' with text 'Lesson'.
    index.html
    Type code above to start the lesson.
    Live Preview