CodeBlanks Logo Icon CodeBlanks

Absolute and relative URLs

HTML course · Beginner · Lesson 19/68

Learn the difference between absolute and relative URLs.

What is an absolute URL?

An absolute URL is the full address of a resource; it carries every part — protocol, server and path. Example: https://www.city-guide.com/contact.html. Here https:// is the protocol, www.city-guide.com is the server, and /contact.html is the path.

Absolute addresses are used when linking to a page on another site; the browser reads them as-is and ignores the current page's location. Their clearest sign is that they start with a protocol, so they open the same page in any context.

What is a relative URL?

A relative URL is an address interpreted against the current page's location. No protocol or server is written; only the path is given. For a page in the same folder you write menu.html, for the parent folder ../contact.html.

The browser combines these addresses with the current page's address. When moving around within one site, relative addresses stay short and portable; if the site moves to another server, most links keep working.

Exercise Add two links to a library site.

Add two links to the skeleton: one absolute, pointing to an external archive (https://archive-library.example); one relative, to contact.html in the same folder. Choose your own anchor text.

Show example solution
<h1>Çamlık Library</h1>
<p>Welcome.</p>
<a href="https://archive-library.example">Archive</a>
<a href="contact.html">Contact</a>

Test yourself

  1. Which one is an absolute URL?

    • /about.html
    • https://www.city-guide.com/istanbul
    • menu.html
    • ../faq
    Show answer

    https://www.city-guide.com/istanbul — Correct. An address with protocol and server is absolute.

  2. Relative link to a page in the same folder.

    <a href="____">See the menu</a>
    Show answer
    <a href="menu.html">See the menu</a>
  3. Sort absolute and relative addresses.

    https://www.city-guide.com
    Absolute
    menu.html
    Relative — same folder
    ../contact.html
    Relative — parent folder
    /about.html
    Relative — site root
  4. What is the best choice when moving between pages of the same site?

    • Write an absolute URL for every link
    • Avoid using links at all
    • Use relative URLs
    • Use only paragraphs
    Show answer

    Use relative URLs — Correct. Relative addresses stay short and survive a site move.

All lessons in Beginner