HTML Links & Navigation

A root-relative URL begins with a single forward slash. It resolves from the root of the URL's authority, rather than from the current document's directory.

<a href="/courses/html.html">HTML Course</a>
<a href="/about.html">About Us</a>
<a href="/contact.html">Contact Us</a>

For a site hosted at https://example.com/, the path /about.html resolves to https://example.com/about.html.

Important: the URL root is not necessarily the root directory of a computer's filesystem. If a website is hosted under a path prefix, such as https://example.com/myapp/, root-relative paths still begin at the domain root.

Path Comparison

7. URL Resolution and the Base Element

Browsers resolve relative URLs against a base URL. Normally, the document's own URL provides that base.

The HTML <base> element can change the base URL used to resolve relative URLs throughout the document.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>URL Resolution</title>
    <base href="https://example.com/courses/">
</head>
<body>
    <a href="html.html">HTML Course</a>
    <a href="../about.html">About Us</a>
</body>
</html>

In this example:

• html.html resolves to https://example.com/courses/html.html.
• ../about.html resolves to https://example.com/about.html.

Important considerations:

• Place the base element in the document head.
• Only one base element is permitted in a document.
• The first base element with an href attribute determines the document's base URL.
• A base element can also affect the target used by links without their own target attribute.
• Use base carefully because it can change the destination of many relative links at once.

8. Navigation Within the Same Page

Fragment identifiers allow users to jump to a specific element within the current document.

To create a fragment link, use a hash followed by the target element's ID.

Example

<nav aria-label="On this page">
    <a href="#introduction">Introduction</a>
    <a href="#examples">Examples</a>
    <a href="#practice">Practice</a>
</nav>

<section id="introduction">
    <h2>Introduction</h2>
    <p>Introduction content goes here.</p>
</section>

<section id="examples">
    <h2>Examples</h2>
    <p>Example content goes here.</p>
</section>

<section id="practice">
    <h2>Practice</h2>
    <p>Practice content goes here.</p>
</section>

When the user selects a navigation link, the browser navigates to the matching element when it exists.

Link to a Section on Another Page

<a href="courses/html.html#forms">
    Learn About HTML Forms
</a>

The browser navigates to the specified page and targets the element whose ID is forms, if present.