HTML Links & Navigation

This path is resolved against the document's base URL. It does not automatically start at the domain root. Use a leading slash when a root-relative URL is intended.

19. Real-World Example: Course Website Navigation

Consider a learning website with a homepage, courses page, blog and contact page. The following HTML creates a semantic navigation menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Codementrix Navigation Demo</title>
</head>
<body>
    <header>
        <h1>Codementrix</h1>

        <nav aria-label="Main navigation">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses/">Courses</a></li>
                <li><a href="blogs/">Blogs</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="welcome">
            <h2>Welcome to Codementrix</h2>
            <p>Explore tutorials and practical courses.</p>

            <p>
                <a href="courses/html.html">
                    Start learning HTML
                </a>
            </p>

            <p>
                <a href="#contact-info">Contact information</a>
            </p>
        </section>

        <section id="contact-info">
            <h2>Contact Information</h2>
            <p>
                Email:
                <a href="mailto:support@codementrix.in">
                    Contact support
                </a>
            </p>
        </section>
    </main>

    <footer>
        <p>Codementrix Learning Resources</p>
    </footer>
</body>
</html>

This example demonstrates relative links, fragment navigation, semantic navigation, meaningful link text and an email link. The destination files and directories must exist for the corresponding links to work as intended.

20. Practical Exercises

Exercise 1: Create a Navigation Menu

Create an HTML page with links to Home, About, Courses and Contact. Use a nav element with a descriptive accessible name.

Exercise 2: Practice Relative Paths

Create this directory structure:

website/
    index.html
    about.html
    courses/
        html.html
        css.html

Write links that navigate:

From index.html to about.html.
From index.html to courses/html.html.
From courses/html.html back to index.html.
From courses/html.html to courses/css.html.

Exercise 3: Create In-Page Navigation

Create a long article with Introduction, Topics, Examples and Conclusion sections. Add a table of contents that links to all four sections.

Exercise 4: Build Useful Action Links

Create links for sending an email, calling a telephone number, downloading a local PDF and visiting an external documentation website.

Exercise 5: Debug Broken Links

Inspect a webpage and identify incorrect paths, missing fragment targets, duplicate IDs, vague link text and unnecessary hash-only links. Correct each issue.

21. Section 7 Quiz: Test Your Understanding

Answer these 10 questions before continuing to the next lesson. The answer key and explanations are provided below so you can check your understanding.

Question 1: Basic Hyperlinks

Which HTML element creates a hyperlink?

<link>
<a>
<href>
<nav>