Internal & External Links

Difficulty: Beginner

Understanding the difference between internal and external links is fundamental to building well-structured websites. Internal links connect pages within the same website, while external links point to resources on other domains. How you write the URL in your href attribute determines how the browser resolves the destination path.

Absolute URLs specify the complete address of a resource, including the protocol (http:// or https://), domain name, and path. For example, https://www.example.com/about/team.html is an absolute URL. These are primarily used for external links because they work regardless of where the linking page is located. However, using absolute URLs for internal links can cause problems if your domain changes or if you develop locally on a different hostname.

Relative URLs specify the path relative to the current page's location. There are several forms: a simple filename like contact.html links to a file in the same directory; a path like ../about/team.html goes up one directory and then into the about folder; a path starting with / like /about/team.html is relative to the site root, regardless of the current page's location. Root-relative URLs (starting with /) are generally the best choice for internal navigation because they work correctly no matter where the linking page is in the directory structure.

The <base> element in the HTML <head> can set a default base URL for all relative URLs on the page. For example, <base href="https://www.example.com/docs/"> would cause all relative links on that page to resolve against that base URL instead of the current page's URL. While useful in some scenarios, the base element can cause confusion and unexpected behavior, so it should be used sparingly.

When structuring a multi-page website, organize your files in a logical directory hierarchy and use consistent linking patterns. Most modern web projects use root-relative URLs for navigation and asset references. This approach is predictable, easy to maintain, and works correctly even when pages are nested at different depths in the directory structure.

Code examples

Absolute vs Relative URLs

<!-- Absolute URL (full path including domain) -->
<a href="https://www.example.com/products/shoes.html">
  View Shoes
</a>

<!-- Relative to current directory -->
<a href="shoes.html">View Shoes</a>

<!-- Relative going up one directory -->
<a href="../index.html">Back to Home</a>

<!-- Root-relative (starts from site root) -->
<a href="/products/shoes.html">View Shoes</a>

Absolute URLs include the full protocol and domain. Relative URLs are resolved based on the current page location. Root-relative URLs (starting with /) always resolve from the site's root directory, making them the most reliable for internal linking.

Multi-Page Site Structure

<!--
  Site structure:
  /
  ├── index.html
  ├── about/
  │   ├── index.html
  │   └── team.html
  └── products/
      ├── index.html
      └── details.html
-->

<!-- From /about/team.html linking to other pages -->

<!-- Link to site home (root-relative) -->
<a href="/">Home</a>

<!-- Link to about index (same directory) -->
<a href="./index.html">About Overview</a>

<!-- Link to products (root-relative) -->
<a href="/products/">Products</a>

<!-- Link to products (relative path) -->
<a href="../products/index.html">Products</a>

When your site has nested directories, root-relative URLs (starting with /) are the safest choice. They resolve the same way regardless of which page contains the link. Relative paths like '../' can become confusing in deep directory structures.

The Base Element

<!DOCTYPE html>
<html>
<head>
  <!-- Sets the base URL for all relative links -->
  <base href="https://www.example.com/docs/">
</head>
<body>
  <!-- Resolves to: https://www.example.com/docs/guide.html -->
  <a href="guide.html">User Guide</a>

  <!-- Resolves to: https://www.example.com/docs/api/reference.html -->
  <a href="api/reference.html">API Reference</a>

  <!-- Absolute URLs are NOT affected by <base> -->
  <a href="https://www.google.com">Google</a>
</body>
</html>

The <base> element changes how all relative URLs on the page are resolved. It can be useful when serving content from a subdirectory, but use it carefully as it affects all relative URLs including links, images, scripts, and stylesheets.

Distinguishing Internal and External Links with CSS

<!-- Internal links -->
<a href="/about">About Us</a>
<a href="/contact">Contact</a>

<!-- External links with visual indicator -->
<a href="https://github.com" 
   target="_blank" 
   rel="noopener noreferrer"
   class="external-link">
  GitHub
</a>

<style>
  /* Style external links with an icon */
  .external-link::after {
    content: " \2197"; /* northeast arrow */
    font-size: 0.8em;
  }
</style>

It is a good UX practice to visually distinguish external links from internal ones. Users should know when a click will take them to a different website. A small arrow icon or different styling helps set this expectation.

Key points

Use root-relative URLs (starting with /) for internal navigation. They are consistent regardless of page depth and easier to maintain than relative paths.
Always use absolute URLs for external links. Include the protocol (https://) to avoid ambiguity.
The <base> element affects ALL relative URLs on the page, including images, stylesheets, and scripts -- not just links. Use it with caution.

Concepts covered

Relative URLs, Absolute URLs, Path Resolution, Linking Between Pages, Base Element