Goal
You’ll be able to write correct, working links using both absolute and relative paths, and understand exactly when each type is the right choice.
Learn
The anchor element <a> creates a hyperlink, using the href attribute to specify the destination:
<a href="https://example.com">Visit Example</a>
This is an absolute path — a complete URL including the protocol (https://) and domain, pointing to a specific location regardless of where the current page lives. Absolute paths are necessary for linking to external websites.
For linking between pages within your own site, a relative path is usually better:
<a href="/about.html">About Us</a> <a href="about.html">About Us</a> <a href="../about.html">About Us</a>
A path starting with / is relative to the site’s root, regardless of which folder the current page is in. A path with no leading slash is relative to the current page’s own folder. ../ means “go up one folder level” before looking for the file.
Relative paths are usually preferred within one site because they keep working correctly if the whole site moves to a different domain (during a redesign or migration, for example) — absolute paths hardcoded to the old domain would all break, while relative paths continue working since they don’t reference the domain at all.
Links can also jump to a specific spot within the same page, using an id and a # reference:
<a href="#section2">Jump to Section 2</a> ... <h2 id="section2">Section 2</h2>
Decision Task
You’re linking from your homepage to your own site’s “Contact” page, both hosted on the same domain. Before reading on: would an absolute or relative path be the better practice here, and why specifically?
Show Answer
Relative path. Since both pages live on the same site, a relative path avoids hardcoding the domain name, which means the link keeps working correctly even if the site is later moved to a different domain — an absolute path would need to be manually updated in that scenario, while a relative one wouldn’t.
Common Mistake
Using an absolute path (with the full domain) for every internal link out of habit or copy-pasting, even for links within the same site. This creates unnecessary fragility: if the domain ever changes, every single one of those hardcoded absolute links breaks and needs manual updating, whereas relative links would have continued working automatically.
Practice Questions
1. Write a relative link (with no leading slash) to a page called “services.html” in the same folder as the current page.
Show Answer
<a href="services.html">...</a>
2. What does a leading slash (/) at the start of a path mean, specifically?
Show Answer
The path is relative to the site’s root/domain, regardless of which folder the current page happens to be in.
3. Write a link that jumps to an element with id=”pricing” further down the same page.
Show Answer
<a href="#pricing">...</a>
4. True or False: relative paths work correctly even if the entire site moves to a completely different domain.
Show Answer
True — since relative paths don’t reference the domain at all, only the folder/file structure, they continue working after a domain change, unlike hardcoded absolute paths.
5. What does ../ mean at the start of a relative path?
Show Answer
Go up one folder level before looking for the specified file.
Try It Yourself
Without looking back, write a link with href pointing to a file called “faq.html” located one folder up from the current page.
Show Answer
<a href="../faq.html">...</a> — the ../ moves up one directory level before looking for faq.html.
Quick Check
1. What HTML element creates a hyperlink?
Show Answer
<a>
2. What attribute specifies a link’s destination?
Show Answer
href
3. When is an absolute path necessary rather than optional?
Show Answer
When linking to an external website outside your own site/domain.
4. Why are relative paths generally preferred for internal links within the same site?
Show Answer
They keep working correctly even if the site later changes domains, since they don’t hardcode the domain name at all.
5. How do you link to a specific spot within the same page?
Show Answer
Using a # followed by the target element’s id value, matching an id set on the destination element.