HTML Links and Navigation

Introduction

Links are one of the most important features of the web. They allow users to move
from one webpage to another, visit external websites, download resources, contact
people, and move between different sections of the same webpage.

The HTML element used to create a hyperlink is the anchor element,
written as <a>.

A website without links would be difficult to navigate. Links are therefore a
fundamental part of website structure and user experience.

1. What Is an HTML Link?

An HTML link is a clickable element that takes a user from one location to another.
The destination can be another webpage, another website, a section of the current
page, an email address, a telephone number, or a downloadable file.

A basic HTML link looks like this:

<a href="https://example.com">Visit Example</a>

The text Visit Example is what the user sees and clicks.
The URL inside the href attribute tells the browser where to go.

2. The Anchor Element

The anchor element is written using the <a> tag.
It normally contains two important parts:

• href — specifies the destination.
• Link text — tells the user what the link does.

Example:

<a href="https://www.google.com">Go to Google</a>

When the user clicks Go to Google, the browser navigates to the
specified address.

3. The href Attribute

The href attribute means hypertext reference.
It specifies the location or destination of a link.

Example:

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

Here, the browser looks for a file called about.html.

The href attribute is one of the most important attributes of the
anchor element.

4. Linking to an External Website

An external link points to a website outside your own website.

Example:

<a href="https://www.youtube.com">Visit YouTube</a>

Because the address includes the complete URL beginning with
https://, this is called an absolute URL.

5. Absolute URLs

An absolute URL contains the complete web address of a resource.

Example:

https://www.dwallnet.com/about-us/

An absolute link can point to any website on the internet.

Example:

<a href="https://www.dwallnet.com">Dwallnet Technologies</a>

6. Relative URLs

A relative URL points to a resource within the same website or project.
It does not normally include the complete domain name.

For example, if your website contains:

index.html
about.html
contact.html
courses.html

You can create links like this:

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

<a href="courses.html">Courses</a>

<a href="contact.html">Contact</a>

Relative URLs are especially useful when building websites with multiple pages.

7. Linking to Pages Inside Folders

Websites often organize pages into folders.
For example:

index.html
pages/
    about.html
    contact.html
courses/
    web-development.html

From index.html, you can link to the About page using:

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

You can link to the Web Development page using:

<a href="courses/web-development.html">Web Development</a>

8. Moving Up a Folder

The ../ notation tells the browser to move up one folder.

For example, suppose a page is located at:

pages/about.html

To return to index.html in the parent folder:

<a href="../index.html">Home</a>

This is an important concept when working with relative paths.

9. Opening a Link in a New Tab

The target attribute can be used to control where a linked document
opens.

The commonly used value _blank opens the destination in a new browsing
context, usually a new tab.

<a href="https://www.youtube.com" target="_blank">
    Visit YouTube
</a>

When creating links that open a new tab, it is good practice to also use
rel="noopener".

<a href="https://www.youtube.com"
   target="_blank"
   rel="noopener">
   Visit YouTube
</a>

10. Link to a Section on the Same Page

‘HTML’ allows you to create links that move the user to a specific section of the
current webpage.

This is done using an id.

First, give the destination element an ID:

<h2 id="courses">Our Courses</h2>

Then create a link pointing to that ID:

<a href="#courses">View Our Courses</a>

The # tells the browser that the destination is an ID on the current
page.

11. Creating a Back-to-Top Link

You can use the same technique to create a link that takes users back to the top
of the page.

Give the top element an ID:

<body id="top">

Then create the link:

<a href="#top">Back to Top</a>

This technique is particularly useful on long webpages.

12. Linking to an Email Address

“HTML” can create a link that opens the user\’s default email application.
Use the mailto: scheme.

<a href="mailto:info@example.com">
    Email Us
</a>

When clicked, the user’s device may open an email application with the address
already entered.

13. Linking to a Telephone Number

On mobile devices, you can create a telephone link using
tel:.

<a href="tel:+2348161886150">
    Call Us
</a>

This can be useful for business websites where users need to contact the company
quickly.

14. Creating a Navigation Menu

A navigation menu is a group of links that helps users move around a website.
A simple navigation menu can be created using an unordered list and anchor
elements.

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="courses.html">Courses</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

The <nav> element identifies a section containing navigation
links.

15. Why Use the nav Element?

The <nav> element is a semantic HTML element. It tells browsers,
search engines, and assistive technologies that the content represents a major
navigation area.

This is better than using a generic <div> for every navigation
section.

16. Linking to a Downloadable File

Links can also point to files such as PDF documents.

<a href="documents/course-outline.pdf">
    Download Course Outline
</a>

The browser may display the document or download it depending on the file type,
browser settings, and server configuration.

17. Making a Link Look Like a Button

A link can be styled with CSS so that it visually looks like a button.
However, it should still remain an anchor when its purpose is navigation.

HTML:

<a href="courses.html" class="button">
    Explore Courses
</a>

CSS:

.button {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
    background: #0066cc;
    color: white;
    border-radius: 6px;
}

The HTML determines the meaning and destination, while CSS controls the visual
appearance.

18. Removing the Underline

Browsers normally display links with an underline. CSS can change this appearance.

a {
    text-decoration: none;
}

You can also style the link when the user moves the mouse over it:

a:hover {
    text-decoration: underline;
}

19. A Complete Navigation Example

Here is a simple example of a complete website navigation structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Dwallnet Technologies</title>
</head>

<body>

    <header>

        <h1>Dwallnet Technologies</h1>

        <nav>
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>

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

                <li>
                    <a href="courses.html">Courses</a>
                </li>

                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>

    </header>

    <main>

        <h2>Welcome to Dwallnet Technologies</h2>

        <p>
            Learn practical technology skills and build your digital future.
        </p>

        <a href="courses.html">
            Explore Our Courses
        </a>

    </main>

</body>
</html>

20. Common Mistakes When Creating Links

Mistake 1: Forgetting the href Attribute

<a>Click Here</a>

Without a destination, the anchor does not function as a useful navigation link.

Mistake 2: Incorrect File Path

<a href="abou.html">About</a>

If the actual file is about.html, the incorrect spelling will result
in a broken link.

Mistake 3: Incorrect Folder Path

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

If the file is actually inside a folder called pages, the correct
path may be:

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

Mistake 4: Using a Poor Link Description

Avoid creating links where every link simply says “Click Here”.

Instead, make the link text describe the destination.

<a href="courses.html">View Web Development Courses</a>

Descriptive link text improves usability and accessibility.

21. Link Text and Accessibility

Link text should help users understand what will happen when they activate the
link.

Weak example:

<a href="courses.html">Click Here</a>

Better example:

<a href="courses.html">Explore Our Courses</a>

A descriptive link gives users useful information before they click it.

22. Links and Website Structure

Links connect the pages of a website together.
A well-designed website should provide clear navigation so users can easily move
between important sections.

For example, a training website may contain:

• Home
• About
• Courses
• Students
• Blog
• Contact

These sections can all be connected using HTML links.

23. Practical Exercise

Create a small website with four pages:

1. Home
2. About
3. Courses
4. Contact

Create a navigation menu on every page that allows the user to move between all
four pages.

Your structure could look like this:

my-website/
│
├── index.html
├── about.html
├── courses.html
├── contact.html
│
└── css/
    └── style.css

24. Student Code Challenge

The following navigation code contains an error. Find and correct it:

<nav>
    <a href="index.htm">Home</a>
    <a href="about.html">About</a>
    <a href="course.html">Courses</a>
    <a href="contact.html">Contact</a>
</nav>

Assume the actual files are:

index.html
about.html
courses.html
contact.html

Challenge: Identify the broken links and correct them.

25. Corrected Version

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="courses.html">Courses</a>
    <a href="contact.html">Contact</a>
</nav>

Lesson Summary

“HTML” links allow users to navigate between webpages and resources. The
<a> element is used to create links, while the
href attribute specifies the destination.

Links can point to external websites, internal pages, specific sections, email
addresses, telephone numbers, and downloadable files.

The target="_blank" attribute can be used to open a link in a new
tab, while id values and fragment links such as
#courses can be used for navigation within the same webpage.

The <nav> element provides semantic structure for major
navigation areas.

Key Principle

Good website navigation should be clear, logical, descriptive, and easy for
users to understand.

As you continue learning HTML, remember that links are what connect individual
web resources into the interconnected system we call the World Wide Web.