HTML Links & Navigation

An absolute URL specifies a complete destination, including a scheme and authority when applicable.

Example

<a href="https://codementrix.in/">
    Visit our website
</a>

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">
    Learn HTML on MDN
</a>

Absolute URLs are useful when linking to external websites or when you need to specify an explicit destination.

Common Examples

<!-- External webpage -->
<a href="https://example.com/">Example</a>

<!-- Email address -->
<a href="mailto:hello@example.com">Email us</a>

<!-- Telephone number -->
<a href="tel:+911234567890">Call us</a>

The email and telephone examples use absolute URI references with different schemes. They do not use HTTP or HTTPS.

5. Relative URLs

A relative URL specifies a destination in relation to a base URL, usually the current document's URL.

Relative URLs are useful when pages belong to the same website. They can make projects easier to move between domains or environments.

Example Project Structure

my-website/
    index.html
    about.html
    contact.html
    courses/
        html.html
        css.html
    assets/
        documents/
            syllabus.pdf

Link to a Page in the Same Directory

<!-- Inside index.html -->
<a href="about.html">About Us</a>
<a href="contact.html">Contact Us</a>

If the current document is index.html in the project root, these links point to the other HTML files in the same directory.

Link to a File in a Subdirectory

<!-- From index.html -->
<a href="courses/html.html">HTML Course</a>

The browser resolves the relative path against the current document's base URL.

Link to a Parent Directory

<!-- From courses/html.html -->
<a href="../index.html">Home</a>

The .. path segment refers to the parent directory during relative URL resolution.

Link to a Deeper Directory

<!-- From index.html -->
<a href="assets/documents/syllabus.pdf">
    Download Course Syllabus
</a>

6. Root-Relative Paths