HTML Links & Navigation

Section 7: Links, Absolute/Relative URLs, Paths and Navigation

Welcome to Section 7 of Codementrix HTML5 Mastery. In this lesson, you will learn how hyperlinks work, how browsers resolve URLs and file paths, and how to build reliable navigation for real-world websites.

1. Learning Objectives

By the end of this lesson, you will be able to:

• Understand hyperlinks and the HTML anchor element.
• Distinguish absolute URLs, relative URLs and root-relative paths.
• Understand URL components, including schemes, hosts, paths, queries and fragments.
• Navigate between pages, directories and sections within a page.
• Create email, telephone and downloadable links.
• Use target, rel, download and other important anchor attributes.
• Build accessible navigation menus using semantic HTML.
• Identify common broken-link and URL-resolution mistakes.
• Understand security considerations for external links.

2. What Is a Hyperlink?

A hyperlink is a clickable reference that takes a user to another webpage, a section of the current page, a file or another supported destination.

In HTML, hyperlinks are created using the anchor element: <a>.

Basic Syntax

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

Explanation:

• <a> creates an anchor element.
• href specifies the destination URL.
• The text between the opening and closing tags is the link text.

When a user activates this link, the browser navigates to the specified destination.

Example: Multiple Links

<p>
    Visit <a href="https://developer.mozilla.org/">
    MDN Web Docs</a> to learn web development.
</p>

<p>
    Read the <a href="https://html.spec.whatwg.org/">
    HTML Living Standard</a>.
</p>

Use meaningful link text that tells users what to expect when they follow a link.

3. Understanding URLs

URL stands for Uniform Resource Locator. It identifies a resource and specifies how it can be accessed.

Example URL

https://codementrix.in/courses/html?level=beginner#lesson-7

The URL can be divided into several components:

Not every URL contains every component. A query or fragment may be absent, for example.

4. Absolute URLs

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

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.

Important Rules

• IDs must be unique within a document.
• The fragment identifier is not sent to the server as part of the HTTP request target.
• Fragments can identify elements or other supported resource-specific locations.
• Do not use an ID that does not exist in the destination document.

9. Navigation Using the nav Element

The <nav> element represents a section containing major navigation links.

Example: Website Navigation

<header>
    <h1>Codementrix</h1>

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

This example creates a semantic navigation region with a list of links. CSS can style the list horizontally, vertically or as a responsive menu.

Multiple Navigation Regions

A webpage may contain more than one navigation region, such as a main menu, a table of contents and pagination.

<nav aria-label="Main navigation">
    <a href="/">Home</a>
    <a href="/courses/">Courses</a>
</nav>

<nav aria-label="Pagination">
    <a href="?page=1">Previous</a>
    <a href="?page=3">Next</a>
</nav>

Use distinct accessible names when multiple navigation regions appear on the same page.

10. The target Attribute

The target attribute specifies the browsing context in which a linked resource should open.

Open in the Current Context

<a href="about.html">About Us</a>

Without a target attribute, a link normally navigates in the current browsing context.

Open in a New Tab or Window

<a href="https://developer.mozilla.org/"
   target="_blank"
   rel="noopener noreferrer">
    Open MDN
</a>

The browser usually opens a new tab for target="_blank", but the actual behavior depends on the browser and user settings.

Modern browsers generally provide implicit noopener behavior for target="_blank". Explicitly adding rel="noopener" can still make your intent clear. Add noreferrer when you also want to suppress the Referer header.

Other Common Target Values

• _self: the current browsing context.
• _blank: a new browsing context, typically a tab or window.
• _parent: the parent browsing context, if one exists.
• _top: the top-level browsing context.

Parent and top targets are particularly relevant to documents embedded in frames.

11. The rel Attribute

The rel attribute describes the relationship between the current document and the linked resource.

Common Values

Example

<a href="https://example.com/"
   target="_blank"
   rel="noopener noreferrer">
    Visit External Website
</a>

Do not add rel="nofollow" to every external link automatically. Choose relationship values based on the purpose of the link.

12. Email and Telephone Links

The mailto and tel URI schemes let users open a compatible email or telephone application.

Email Link

<a href="mailto:support@codementrix.in">
    Email Support
</a>

Email with a Subject

<a href="mailto:support@example.com?subject=HTML%20Course%20Question">
    Ask a Question
</a>

In a mailto URI, the subject is a header field and spaces can be percent-encoded as %20.

Telephone Link

<a href="tel:+911234567890">
    Call Our Team
</a>

Telephone links are particularly useful on mobile websites. They depend on the user's device having a suitable application or handler.

13. Download Links

The download attribute indicates that the browser should download the linked resource rather than navigate to it when supported and permitted.

Example

<a href="assets/documents/syllabus.pdf" download>
    Download HTML Syllabus
</a>

Suggest a Filename

<a href="assets/documents/syllabus.pdf"
   download="html-course-syllabus.pdf">
    Download Course Syllabus
</a>

The suggested filename is not a guarantee. Browser policies, response headers and security restrictions can affect download behavior.

The download attribute is generally limited to same-origin URLs and supported blob or data URLs. It should not be relied upon to force downloads from arbitrary external websites.

14. Query Parameters and Navigation

A query string can pass information in a URL. It begins with a question mark and can contain key-value pairs.

Example

<a href="/courses/?category=html&level=beginner">
    Beginner HTML Courses
</a>

Here:

• category=html specifies a category.
• level=beginner specifies a difficulty level.
• & represents the ampersand character in HTML source.

The destination application decides how to interpret the query parameters. HTML alone does not filter database records or validate submitted information.

15. Percent-Encoding and Special Characters

URLs sometimes need percent-encoding for characters that are not permitted in a particular context or that have a reserved meaning.

Examples

For example, a path containing a space might be represented as:

<a href="/courses/html%20basics.html">
    HTML Basics
</a>

Percent-encoding must be applied to the appropriate URL component. Reserved characters such as /, ? and # can have structural meanings, so encoding or decoding them indiscriminately may change a URL's meaning.

16. Accessible Link Text

Link text should communicate the destination or action clearly, even when users encounter the link outside its surrounding paragraph.

Weak Example

<p>To learn HTML, <a href="/courses/html.html">
click here</a>.</p>

Better Example

<p>
    Learn HTML through our
    <a href="/courses/html.html">
        complete HTML beginner course
    </a>.
</p>

Additional best practices:

• Use descriptive link text rather than repeated vague labels.
• Ensure links can be identified and activated with a keyboard.
• Do not use an empty anchor when a meaningful link is required.
• Use accessible names for navigation landmarks.
• Indicate when a link opens a new tab if that behavior may surprise users.
• Do not rely on color alone to distinguish links from ordinary text.

17. Links Versus Buttons

Links and buttons serve different purposes.

• Use an anchor with href when the user navigates to a resource or location.
• Use a button when the user performs an action, such as opening a dialog, submitting a form or toggling a control.

Correct Navigation Example

<a href="/courses/">Browse Courses</a>

Correct Action Example

<button type="button">Open Course Details</button>

The button example needs JavaScript or another suitable implementation to perform an action. Do not use a button styled as a link merely to navigate to another page when an anchor is appropriate.

18. Common Link Mistakes

Mistake 1: Missing href

<a>Visit Course</a>

Without href, the anchor is not an ordinary hyperlink. Provide a valid destination when navigation is intended.

Mistake 2: Incorrect Relative Path

<!-- Current page: /courses/html.html -->
<a href="about.html">About</a>

This resolves to /courses/about.html, not /about.html. If the intended destination is /about.html, use an appropriate path such as ../about.html or /about.html.

Mistake 3: Missing Fragment Target

<a href="#registration">Registration</a>

<!-- No element with id="registration" exists -->

Ensure that the target element exists and its ID matches the fragment.

Mistake 4: Duplicate IDs

<h2 id="details">Course Details</h2>
<h2 id="details">Contact Details</h2>

IDs should be unique within the document. Use a different ID for each target.

Mistake 5: Using a Placeholder Destination

<a href="#">Learn More</a>

A hash-only link generally targets the top of the current document. It is not a substitute for a real destination or a button action.

Mistake 6: Assuming Every Relative Link Is Domain-Rooted

<a href="courses/html.html">HTML Course</a>

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?

1. <link>
2. <a>
3. <href>
4. <nav>

Question 2: Absolute URLs

Which is an absolute HTTPS URL?

1. courses/html.html
2. ../about.html
3. https://example.com/courses/html.html
4. /courses/html.html

Question 3: Relative Paths

A document is located at https://example.com/courses/html.html. What URL does the relative reference ../about.html resolve to?

1. https://example.com/courses/about.html
2. https://example.com/about.html
3. https://example.com/courses/../about.html as the final normalized path
4. https://about.html/

Question 4: Fragment Navigation

Which attribute value links to an element with id="contact" on the current page?

1. href="contact"
2. href="/contact"
3. href="#contact"
4. id="#contact"

Question 5: True or False

A URL beginning with a single slash, such as /about.html, resolves from the root of the URL authority rather than from the current document's directory.

1. True
2. False

Question 6: Opening a New Browsing Context

Which attribute value normally requests that a link open in a new browsing context?

1. target="_self"
2. target="_blank"
3. rel="external"
4. download="new"

Question 7: Email Links

Which link correctly opens a compatible email application to compose a message to support@example.com?

1. <a href="email:support@example.com">Email</a>
2. <a href="mailto:support@example.com">Email</a>
3. <a href="https://support@example.com">Email</a>
4. <a src="mailto:support@example.com">Email</a>

Question 8: Multiple Correct Answers

Which statements about HTML links are correct? Select all that apply.

1. An anchor with a valid href can navigate to another resource.
2. A fragment such as #overview can target an element with a matching ID.
3. The download attribute guarantees that every external URL will be downloaded.
4. Meaningful link text improves usability and accessibility.

Question 9: True or False

The rel="external" attribute automatically opens a link in a new tab.

1. True
2. False

Question 10: Navigation Semantics

Which element is most appropriate for a major group of website navigation links?

1. <footer>
2. <nav>
3. <aside>
4. <mark>

22. Quiz Answer Key and Explanations

Review the answers after completing the questions. Try to explain why the other options are incorrect as well.

Answer 1: B — <a>

The anchor element creates hyperlinks. Its href attribute specifies the destination. The link element is used for relationships to external resources, such as stylesheets, rather than ordinary clickable text links.

Answer 2: C — https://example.com/courses/html.html

This URL specifies the HTTPS scheme, domain and path. The other options are relative references or root-relative paths.

Answer 3: B — https://example.com/about.html

The current document is inside the courses directory. The .. segment moves to its parent directory, so the resulting path is /about.html.

Answer 4: C — href="#contact"

A fragment reference begins with # and identifies the target element by its ID. The target must exist in the document for the expected navigation to occur.

Answer 5: True

A single leading slash creates a root-relative URL reference. It starts from the URL authority's root, not the current document's directory.

Answer 6: B — target="_blank"

The _blank target requests a new browsing context, commonly a new tab. Browsers and user settings determine the actual presentation.

Answer 7: B — mailto:support@example.com

The mailto scheme allows a compatible email application to compose a message. The href attribute must contain the destination.

Answer 8: A, B and D

• A is correct because href defines the destination of an ordinary hyperlink.
• B is correct because a fragment can identify an element by its ID.
• C is incorrect because download does not guarantee downloading arbitrary external resources.
• D is correct because descriptive link text helps users understand destinations, including when navigating with assistive technology.

Answer 9: False

The external relationship value describes a relationship to an external resource. It does not itself request a new tab. The target attribute controls the requested browsing context.

Answer 10: B — <nav>

The nav element represents a major navigation section. Footer, aside and mark serve different semantic purposes.

23. Final Revision Checklist

• I understand the purpose of the anchor element and href.
• I can distinguish absolute, relative and root-relative URLs.
• I understand parent directories and URL resolution.
• I can create links to page sections using fragment identifiers.
• I know how target, rel and download work.
• I can create email and telephone links.
• I can build accessible navigation using nav and descriptive link text.
• I can identify broken paths and common hyperlink mistakes.
• I understand basic link security considerations.

Lesson Completion

Congratulations! You have completed Section 7 of Codementrix HTML5 Mastery.

You now understand how to create hyperlinks, navigate between pages and directories, work with URL components, build semantic navigation and avoid common link errors.

Next lesson: Section 8 — Images, Alt Text, Dimensions and Image Formats.