Part 10: Hyperlinks with Anchor Tags (a): Relative vs Absolute URLs

Part 10 Technology Updated September 12, 2026

Hyperlinks with Anchor Tags (a): Relative vs Absolute URLs

The hyperlink is the defining mechanism of the web. The anchor tag <a> allows users to navigate between documents, jump to file downloads, or trigger external protocols.


1. The Anatomy of an Anchor Tag

<a href="https://devifyblog.com/tutorials/">Explore Devify Tutorials</a>
  • href: The Hypertext Reference target URL.
  • Link Text: The clickable anchor content.

2. Absolute vs Relative Paths

<!-- 1. Absolute URL: Points to a specific domain and protocol -->
<a href="https://github.com/torvalds/linux">Linux Kernel on GitHub</a>

<!-- 2. Root-Relative Path: Starts at domain root -->
<a href="/tutorials/django/">Django Tutorials</a>

<!-- 3. Directory-Relative Path: Relative to current page -->
<a href="../part-2-models/">Next Chapter</a>
<a href="./assets/diagram.png">View Architecture Diagram</a>

3. SEO-Friendly Anchor Text

  • BAD: <a href="/guide.html">Click here</a> (Offers zero search engine context).
  • GOOD: <a href="/guide.html">Read the complete Django 5 production deployment guide</a>.