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:

Component	Example	Purpose
Scheme	https	Identifies the access protocol.
Host	codementrix.in	Identifies the domain.
Path	/courses/html	Identifies a resource path.
Query	?level=beginner	Supplies query parameters.
Fragment	#lesson-7	Identifies a location within a resource.

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