HTML5 Links and Navigation Practice Questions with Solutions

Links are one of the most important features of HTML5. They allow users to navigate between webpages, websites, email addresses, phone numbers, and different sections of the same page.

The Anchor (<a>) tag is used to create hyperlinks.

Without links, websites would be isolated pages. Navigation menus, buttons, and internal page links all rely on the <a> element. HTML5 Links and Navigation practice questions with solutions help to build concepts.

In this chapter, you’ll learn how to create different types of links used in real-world websites.

Why Learn HTML Links?

HTML links are used to:

Connect webpages
Build navigation menus
Link to external websites
Open email applications
Make phone numbers clickable
Create download links
Jump to different sections of a webpage
Improve website navigation and user experience

Basic Syntax

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

Important Attribute

href → Specifies the destination URL.

1. Create a Link to an External Website

Problem Statement

Create a webpage containing a link that opens the official HTML website.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>External Link</title>

</head>

<body>

    <h1>Learn HTML</h1>

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

</body>

</html>

Expected Output

Learn HTML

Visit MDN HTML Documentation

The text appears as a clickable hyperlink.

Explanation

The <a> tag creates a hyperlink.

When clicked, the browser navigates to the webpage specified in the href attribute.

Concepts Covered

Anchor Tag
External Link
href Attribute

2. Open a Link in a New Browser Tab

Problem Statement

Create a hyperlink that opens in a new browser tab.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Open New Tab</title>

</head>

<body>

    <a href="https://www.wikipedia.org" target="_blank">
        Visit Wikipedia
    </a>

</body>

</html>

Expected Output

Visit Wikipedia

When clicked, the link opens in a new browser tab.

Explanation

The attribute:

target="_blank"

tells the browser to open the destination in a new tab instead of replacing the current page.

Concepts Covered

target Attribute
_blank
External Navigation

3. Create a Relative Link Between Two HTML Pages

Problem Statement

Suppose your project contains two files:

index.html
about.html

Create a link from index.html to about.html.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Relative Link</title>

</head>

<body>

    <h1>Home Page</h1>

    <a href="about.html">
        Go to About Page
    </a>

</body>

</html>

Expected Output

Home Page

Go to About Page

Clicking the link opens about.html located in the same folder.

Explanation

A relative link points to another file within the same project.

Unlike absolute URLs, it does not include:

https://
Domain name

This makes websites portable and easier to maintain.

Concepts Covered

Relative URL
Project Navigation
Internal Links

4. Create an Email Link Using `mailto:`

Problem Statement

Create a webpage containing a clickable email address.

When users click the link, their default email application should open with the recipient’s email address filled automatically.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Email Link</title>

</head>

<body>

    <h1>Contact Us</h1>

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

</body>

</html>

Expected Output

Contact Us

Send Email

Clicking Send Email opens the user’s default email client.

Explanation

The mailto: protocol creates an email link.

Syntax:

&lt;a href="mailto:info@example.com">Email Us&lt;/a>

It is commonly used on:

Business websites
Contact pages
Portfolio websites
School websites

Concepts Covered

mailto
Email Links
Contact Information

5. Create a Telephone Link Using `tel:`

Problem Statement

Create a clickable phone number that allows mobile users to call directly.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Telephone Link</title>

</head>

<body>

    <h1>Customer Support</h1>

    <a href="tel:+919876543210">
        Call Now
    </a>

</body>

</html>

Expected Output

Customer Support

Call Now

On smartphones, clicking Call Now opens the phone dialer.

Explanation

The tel: protocol creates clickable phone numbers.

Syntax:

&lt;a href="tel:+919876543210">

This is widely used on:

Business websites
Restaurant websites
Hospital websites
Contact pages

Concepts Covered

tel
Phone Links
Mobile Navigation

6. Create a Download Link

Problem Statement

Create a hyperlink that downloads a PDF file instead of opening it.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Download File</title>

</head>

<body>

    <a href="files/html-notes.pdf" download>
        Download HTML Notes
    </a>

</body>

</html>

Expected Output

Download HTML Notes

Clicking the link downloads the file (if supported by the browser and server).

Explanation

The download attribute tells the browser to download the linked file.

This is commonly used for:

PDF Notes
Resume Downloads
Brochures
E-books
Reports

Concepts Covered

download Attribute
File Downloads
PDF Links

7. Use an Image as a Hyperlink

Problem Statement

Create an image that works as a clickable link.

When users click the image, they should be redirected to another webpage.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Image Link</title>

</head>

<body>

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

        <img src="logo.png" alt="Company Logo">

    </a>

</body>

</html>

Expected Output

The image logo.png appears on the webpage.

Clicking the image opens https://www.example.com.

Explanation

The <img> element is placed inside the <a> element.

This makes the entire image clickable.

Image links are commonly used for:

Company logos
Product banners
Advertisements
Homepage logos

Concepts Covered

Image Hyperlinks
Anchor Tag
img Tag

8. Create a Simple Navigation Menu

Problem Statement

Create a basic website navigation menu with four links:

Home
About
Services
Contact

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Navigation Menu</title>

</head>

<body>

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

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

    <a href="services.html">Services</a> |

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

</body>

</html>

Expected Output

Home | About | Services | Contact

Each menu item is a clickable hyperlink.

Explanation

Navigation menus help users move between different pages of a website.

This simple structure is commonly expanded with CSS to create horizontal or vertical navigation bars.

Concepts Covered

Navigation Menu
Internal Links
Website Structure

Mini Practice Challenge

Create a webpage that contains:

One external website link
One internal page link
One email link
One telephone link
One download link
One clickable image
One navigation menu

This exercise combines all the hyperlink types covered so far.

9. Create a Bookmark Link Within the Same Page

Problem Statement

Create a webpage where clicking a link jumps to another section on the same page.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Bookmark Link</title>

</head>

<body>

    <a href="#contact">Go to Contact Section</a>

    <h1>Welcome</h1>

    <p>This is the homepage.</p>

    <p>Content goes here...</p>

    <p>More content...</p>

    <p>Even more content...</p>

    <h2 id="contact">Contact</h2>

    <p>Email: info@example.com</p>

</body>

</html>

Expected Output

Go to Contact Section

Welcome

(Content...)

Contact

Email: info@example.com

Clicking Go to Contact Section scrolls directly to the Contact heading.

Explanation

The hyperlink:

&lt;a href="#contact">

points to the element having:

id="contact"

This is called a bookmark link or fragment identifier.

Concepts Covered

Bookmark Links
id Attribute
Internal Navigation

10. Link to a Specific Section Using `id`

Problem Statement

Create a webpage with three sections:

About
Services
Contact

At the top of the page, create links that jump directly to each section.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Page Navigation</title>

</head>

<body>

    <a href="#about">About</a> |

    <a href="#services">Services</a> |

    <a href="#contact">Contact</a>

    <hr>

    <h2 id="about">About</h2>

    <p>About our company.</p>

    <h2 id="services">Services</h2>

    <p>Web Development and Training.</p>

    <h2 id="contact">Contact</h2>

    <p>contact@example.com</p>

</body>

</html>

Expected Output

Navigation links appear at the top of the page.

Clicking any link scrolls directly to its corresponding section.

Explanation

The id attribute uniquely identifies an element.

Anchor links using #id-name navigate directly to that element.

This technique is commonly used in:

Documentation
FAQs
Landing pages
Single-page websites

Concepts Covered

id Attribute
Internal Links
Page Navigation

11. Create a “Back to Top” Link

Problem Statement

Create a long webpage with a Back to Top link at the bottom.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Back to Top</title>

</head>

<body>

    <h1 id="top">HTML Tutorial</h1>

    <p>Lots of content goes here...</p>

    <p>More content...</p>

    <p>Even more content...</p>

    <p>Continue reading...</p>

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

</body>

</html>

Expected Output

At the bottom of the page:

Back to Top

Clicking it scrolls to the top heading.

Explanation

The hyperlink:

&lt;a href="#top">

navigates to the element:

id="top"

This feature improves navigation on long webpages.

Concepts Covered

Back to Top
Bookmark Navigation
User Experience

12. Create Navigation Between Multiple HTML Pages

Problem Statement

Assume your website contains:

index.html
about.html
contact.html

Create navigation links that connect these pages.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Website Navigation</title>

</head>

<body>

    <h1>Home Page</h1>

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

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

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

</body>

</html>

Expected Output

Home Page

Home About Contact

Each link opens its corresponding HTML page.

Explanation

Large websites are divided into multiple HTML files.

Navigation links connect these pages together.

Concepts Covered

Multi-page Websites
Internal Navigation
Relative Links

13. Create a Footer with Useful Links

Problem Statement

Create a webpage footer containing useful links.

Include:

Home
Privacy Policy
Contact Us

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Footer Links</title>

</head>

<body>

    <h1>Welcome</h1>

    <p>Website Content</p>

    <hr>

    <footer>

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

        <a href="privacy.html">Privacy Policy</a> |

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

    </footer>

</body>

</html>

Expected Output

Home | Privacy Policy | Contact Us

Explanation

Website footers usually contain:

Navigation links
Privacy Policy
Terms & Conditions
Contact Information
Copyright

Although you’ll study the semantic <footer> element in a later chapter, this example introduces its practical use.

Concepts Covered

Footer
Navigation Links
Website Layout

Mini Practice Challenge

Create a webpage containing:

Navigation menu
Internal section links
Bookmark link
Back to Top link
Footer navigation

Try completing it without referring to the solutions.

14. Build a Complete Website Navigation Layout

Problem Statement

Create a basic website homepage that contains a navigation menu linking to different pages.

The navigation menu should include:

Home
About
Courses
Gallery
Contact

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Website Navigation</title>

</head>

<body>

    <h1>VSIT Computer Institute</h1>

    <nav>

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

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

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

        <a href="gallery.html">Gallery</a> |

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

    </nav>

    <hr>

    <h2>Welcome</h2>

    <p>Learn Programming, Data Analytics, Digital Marketing and Web Development.</p>

</body>

</html>

Expected Output

VSIT Computer Institute

Home | About | Courses | Gallery | Contact

--------------------------------------------

Welcome

Learn Programming, Data Analytics, Digital Marketing and Web Development.

Explanation

A navigation bar helps users move between different pages of a website.

Most websites place the navigation menu at the top for easy access.

The <nav> element is a semantic HTML5 tag that groups navigation links together.

Concepts Covered

<nav>
Navigation Bar
Website Layout
Internal Links

15. Create a Multi-Section Webpage with Different Types of Links

Problem Statement

Create a webpage that includes:

Navigation menu
Internal bookmark links
External website link
Email link
Telephone link
Download link
Footer navigation

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Complete Navigation Example</title>

</head>

<body>

    <h1 id="top">HTML5 Learning Portal</h1>

    <nav>

        <a href="#about">About</a> |

        <a href="#contact">Contact</a> |

        <a href="#downloads">Downloads</a>

    </nav>

    <hr>

    <h2 id="about">About</h2>

    <p>Learn HTML5 through practical coding exercises.</p>

    <p>

        Visit

        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">

            MDN HTML Documentation

        </a>

    </p>

    <h2 id="contact">Contact</h2>

    <p>

        Email:

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

            info@example.com

        </a>

    </p>

    <p>

        Phone:

        <a href="tel:+919876543210">

            +91 9876543210

        </a>

    </p>

    <h2 id="downloads">Downloads</h2>

    <a href="files/html-notes.pdf" download>

        Download HTML Notes

    </a>

    <hr>

    <footer>

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

    </footer>

</body>

</html>

Expected Output

The webpage contains:

Navigation menu
Internal section navigation
External website link
Clickable email
Clickable phone number
Download button
Back to Top link

Explanation

This exercise combines almost every hyperlink type learned in this chapter.

It demonstrates how different navigation techniques work together in a real website.

Professional websites commonly include:

Header navigation
Internal section links
External resources
Contact links
Downloadable resources
Footer navigation

Concepts Covered

Navigation Menu
Bookmark Links
External Links
Email Links
Phone Links
Download Links
Footer Navigation

Chapter Summary

In this chapter, you learned how to create hyperlinks and navigation systems using HTML5. Links are one of the most important building blocks of the web because they connect webpages, websites, documents, and different sections of the same page.

You practiced creating:

External website links
Internal page links
Relative links
Links that open in a new tab
Email links using mailto:
Telephone links using tel:
Download links
Image hyperlinks
Navigation menus
Bookmark links
Internal page navigation
Back to Top links
Footer navigation

By completing these exercises, you now understand how navigation works on modern websites and how users move between different pages and sections efficiently.

Key Takeaways

The <a> tag is used to create hyperlinks.
The href attribute specifies the destination of the link.
target="_blank" opens a link in a new browser tab.
Relative links connect pages within the same project.
Absolute links point to external websites.
mailto: creates clickable email links.
tel: creates clickable phone numbers.
The download attribute downloads files instead of opening them.
Bookmark links use the id attribute to navigate within the same page.
Navigation menus improve user experience and website usability.

Frequently Asked Questions (FAQs)

1. What is the purpose of the `<a>` tag?

The <a> (Anchor) tag creates hyperlinks that allow users to navigate between pages or websites.

Example:

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

2. What is the difference between an absolute link and a relative link?

Absolute Link

Includes the complete website address.

Example:

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

Relative Link

Points to another page within the same project.

Example:

&lt;a href="about.html">About&lt;/a>

3. Why do we use `target="_blank"`?

It opens the linked webpage in a new browser tab.

Example:

<a href="https://www.google.com" target="_blank">
Google
</a>

This allows users to keep the current webpage open while visiting another site.

4. What is a bookmark link?

A bookmark link jumps to a specific section within the same webpage.

Example:

<a href="#contact">Contact</a>

<h2 id="contact">Contact Section</h2>

5. What is the purpose of `mailto:`?

The mailto: protocol opens the user’s default email application.

Example:

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

6. What is the purpose of `tel:`?

The tel: protocol creates clickable phone numbers.

Example:

<a href="tel:+919876543210">
Call Now
</a>

This feature is especially useful for mobile users.

7. How does the `download` attribute work?

The download attribute tells the browser to download the linked file instead of opening it.

Example:

<a href="notes.pdf" download>
Download Notes
</a>

8. Why are navigation menus important?

Navigation menus help users:

Find information quickly
Move between pages
Improve website usability
Enhance user experience
Reduce confusion

Almost every professional website includes a navigation menu.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Why Learn HTML Links?

Basic Syntax

Important Attribute

1. Create a Link to an External Website

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

2. Open a Link in a New Browser Tab

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

3. Create a Relative Link Between Two HTML Pages

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

4. Create an Email Link Using mailto:

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

5. Create a Telephone Link Using tel:

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

6. Create a Download Link

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

7. Use an Image as a Hyperlink

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

8. Create a Simple Navigation Menu

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

Mini Practice Challenge

9. Create a Bookmark Link Within the Same Page

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

10. Link to a Specific Section Using id

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

11. Create a “Back to Top” Link

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

12. Create Navigation Between Multiple HTML Pages

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

13. Create a Footer with Useful Links

Problem Statement

HTML Solution

Expected Output

4. Create an Email Link Using `mailto:`

5. Create a Telephone Link Using `tel:`

10. Link to a Specific Section Using `id`

1. What is the purpose of the `<a>` tag?

3. Why do we use `target="_blank"`?

5. What is the purpose of `mailto:`?

6. What is the purpose of `tel:`?

7. How does the `download` attribute work?