HTML Links – Solved Practice Questions

By /

Introduction

HTML links connect one webpage to another. Using the <a> tag, you can create links to websites, web pages, email addresses, phone numbers, and different sections of the same page. In this chapter, you’ll practice creating different types of links through simple real-world solved questions.

Question 1

Problem Statement

Create a school website homepage that contains a link to the About Us page.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>School Website</title>
</head>
<body>

    <h1>ABC Public School</h1>

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

</body>
</html>

Output

ABC Public School

About Us

(Clicking About Us opens the about.html page.)

Step-by-Step Explanation

  • <a> creates a hyperlink.
  • href specifies the destination page.
  • about.html is a relative link.

Question 2

Problem Statement

Create a portfolio webpage with a link that opens your GitHub profile in a new tab.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Portfolio</title>
</head>
<body>

    <h1>My Portfolio</h1>

    <a href="https://github.com/" target="_blank">
        Visit My GitHub
    </a>

</body>
</html>

Output

My Portfolio

Visit My GitHub

(Clicking the link opens GitHub in a new browser tab.)

Step-by-Step Explanation

  • href stores the website URL.
  • target="_blank" opens the link in a new tab.
  • This is useful for external websites.

Question 3

Problem Statement

Create a company contact page with a clickable email link.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Contact</title>
</head>
<body>

    <h1>Contact Us</h1>

    <a href="mailto:info@company.com">
        Email Support
    </a>

</body>
</html>

Output

Contact Us

Email Support

(Clicking the link opens the default email application.)

Step-by-Step Explanation

  • mailto: creates an email link.
  • Clicking it opens the email application.
  • The email address is written after mailto:.

Question 4

Problem Statement

Create a restaurant webpage with a clickable phone number.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Restaurant Contact</title>
</head>
<body>

    <h1>Food Corner</h1>

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

</body>
</html>

Output

Food Corner

Call Now

(On supported devices, clicking the link opens the phone dialer.)

Step-by-Step Explanation

  • tel: creates a telephone link.
  • Mobile devices open the dialer automatically.
  • This is commonly used on contact pages.

Question 5

Problem Statement

Create a blog homepage with links to Home, Articles, and Contact pages.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
</head>
<body>

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

    <br><br>

    <a href="articles.html">Articles</a>

    <br><br>

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

</body>
</html>

Output

Home

Articles

Contact

(Each link opens its respective webpage.)

Step-by-Step Explanation

  • Three hyperlinks are created.
  • Each link points to a different HTML page.
  • <br> adds space between the links.

Question 6

Problem Statement

Create a shopping website with a link that opens the Products page.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Shopping Website</title>
</head>
<body>

    <h1>Online Shopping</h1>

    <a href="products.html">View Products</a>

</body>
</html>

Output

Online Shopping

View Products

(Clicking View Products opens the products.html page.)

Step-by-Step Explanation

  • <a> creates a clickable link.
  • href points to the Products page.
  • Relative links are commonly used for pages within the same website.

Question 7

Problem Statement

Create a webpage with a link that jumps to the Contact section on the same page.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Jump Link</title>
</head>
<body>

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

    <br><br>

    <h2>About Us</h2>

    <p>Welcome to our company website.</p>

    <br><br><br><br><br>

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

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

</body>
</html>

Output

Go to Contact

About Us

Welcome to our company website.

...

Contact

Email: info@example.com

(Clicking Go to Contact jumps directly to the Contact section.)

Step-by-Step Explanation

  • href="#contact" creates an internal page link.
  • id="contact" marks the destination.
  • Both values must match exactly.

Question 8

Problem Statement

Create a webpage with an image that acts as a clickable link to the Google homepage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Link</title>
</head>
<body>

    <a href="https://www.google.com">
        <img src="google-logo.png" alt="Google Logo" width="150">
    </a>

</body>
</html>

Output

[Google Logo Image]

(Clicking the image opens the Google homepage.)

Step-by-Step Explanation

  • An <img> tag is placed inside the <a> tag.
  • The entire image becomes clickable.
  • This technique is often used for company logos.

Question 9

Problem Statement

Create a webpage that contains links to Google, YouTube, and Wikipedia, each opening in a new browser tab.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Useful Websites</title>
</head>
<body>

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

    <br><br>

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

    <br><br>

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

</body>
</html>

Output

Google

YouTube

Wikipedia

(Each website opens in a new browser tab.)

Step-by-Step Explanation

  • target="_blank" opens links in a new tab.
  • Each hyperlink has its own destination URL.
  • This is useful for external websites.

Question 10

Problem Statement

Create a company homepage with navigation links for Home, About, Services, Gallery, and Contact.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Company Website</title>
</head>
<body>

    <h1>ABC Technologies</h1>

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

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

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

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

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

</body>
</html>

Output

ABC Technologies

Home | About | Services | Gallery | Contact

(Each navigation link opens its corresponding webpage.)

Step-by-Step Explanation

  • Multiple hyperlinks create a navigation menu.
  • The | symbol separates the links.
  • Navigation menus are used on almost every website.

Key Takeaways

  • <a> creates hyperlinks.
  • href specifies the destination URL or page.
  • target="_blank" opens links in a new browser tab.
  • mailto: creates email links.
  • tel: creates phone links.
  • href="#id" creates links to sections on the same page.
  • Images can also be used as clickable links.

Frequently Asked Questions (FAQs)

1. Which HTML tag is used to create a hyperlink?

The <a> tag is used to create hyperlinks.

2. What is the purpose of the href attribute?

The href attribute specifies the destination of the hyperlink.

3. Which attribute opens a link in a new tab?

The target="_blank" attribute opens a link in a new browser tab.

4. How do I create an email link?

Use href="mailto:email@example.com".

5. How do I create a clickable phone number?

Use href="tel:+911234567890".

6. Can an image be used as a hyperlink?

Yes. Place the <img> tag inside the <a> tag.

7. How do I link to another section on the same page?

Use href="#section-id" and assign the same value to the destination element’s id attribute.

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

Related Posts

Scroll to Top