A relative path depends on the current document's location; an absolute URL includes a scheme and host; a root-relative path begins at the site's root.
What You Need to Know
Choose a path deliberately so pages keep working when they move between folders or hosting locations. Test links from the actual page that contains them.
Example: See It in Action
Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<a href="about.html">Relative to this page</a>
<a href="/help/">Relative to the website root</a>
<a href="https://example.test/help">Absolute URL</a>Let’s Understand the Example
- An a element becomes a working link when it has an href. Its visible text should tell readers where they will go.
- Href contains the destination of a link. A value starting with # points to an id on the same page.
The first example link points to about.html. Check whether that destination exists relative to the document. A link changes where readers go; it does not perform an action such as saving a form.
What Should You See?
The page should include “Relative to this page”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.
Try It Yourself
- Write three links to the same local page using the three path styles.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Treating an absolute web URL and a root-relative path as interchangeable during local development.
- The title in the browser tab and the heading visible in the page are different pieces of information.
Key Takeaways
- A relative path depends on the current document's location; an absolute URL includes a scheme and host; a root-relative path begins at the site's root.
- An a element becomes a working link when it has an href. Its visible text should tell readers where they will go.
- Choose a path deliberately so pages keep working when they move between folders or hosting locations. Test links from the actual page that contains them.