• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Links

← Previous Next →

🔹 What are HTML Links?

HTML links (or hyperlinks) allow users to navigate from one page to another, either within the same site or to an external site. Links are created using the <a> (anchor) tag.

🔹 Basic Syntax
<a href="URL">Link Text</a>

  • href: The attribute that holds the destination URL.

  • Link Text: The clickable text shown to the user.

🔹 Example: Link to Google
<a href="https://www.google.com">Visit Google</a>

🔹 Types of Links

Type Example
External Link <a href="https://example.com">Go to site</a>
Internal Link <a href="about.html">About Us</a>
Email Link <a href="mailto:info@example.com">Email Us</a>
Telephone Link <a href="tel:+911234567890">Call Now</a>
Anchor Link <a href="#section2">Go to Section 2</a> (on same page)

🔹 Open Link in New Tab

Use the target="_blank" attribute:

<a href="https://www.google.com" target="_blank">Open in New Tab</a>

🔹 Link Titles (Tooltip)

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

When hovered, the user sees a tooltip.

🔹 Link with Image

<a href="https://example.com">
  <img src="logo.png" alt="Site Logo">
</a>

🔹 Link Colors and Styling

By default:

  • Unvisited link = blue

  • Visited link = purple

  • Active link = red

You can change these styles using CSS.

<style>
  a {
    color: green;
    text-decoration: none;
  }
</style>

Practice Questions

Q1. Create a link to https://www.google.com.

Q2. Add a link that opens in a new tab.

Q3. Make an internal link to a file named contact.html.

Q4. Add a mailto: link to send an email.

Q5. Create a link that opens the dialer with a phone number.

Q6. Use #footer to link to a section at the bottom of the same page.

Q7. Add a title to a link that says “Go to Home Page”.

Q8. Create an image link using your logo.

Q9. Change link color to green and remove underline using CSS.

Q10. Create a navigation menu using multiple <a> tags.

HTML Links Quiz

Q1: Which tag is used to create a hyperlink in HTML?

A. <link>
B. <a>
C. <href>
D. <nav>

Q2: What attribute specifies the URL of the page the link goes to?

A. src
B. link
C. href
D. target

Q3: How do you open a link in a new browser tab?

A. target="_tab"
B. open="new"
C. target="_blank"
D. newtab="true"

Q4: Which of the following creates an email link?

A. <a email="info@example.com">Email</a>
B. <a href="emailto:info@example.com">Email</a>
C. <a href="mailto:info@example.com">Email</a>
D. <mail href="info@example.com">Email</mail>

Q5: What does this do '<a href="#top">Back to top</a>' ?

A. Opens a new window
B. Scrolls to top of the current page
C. Reloads the page
D. Goes to the homepage

Q6: What is the default color of an unvisited link?

A. Red
B. Green
C. Blue
D. Purple

Q7: Which attribute is used to show a tooltip when hovering over a link?

A. hover
B. title
C. tooltip
D. alt

Q8: What will this link do '<a href="tel:1234567890">Call Us</a>' ?

A. Send an email
B. Send SMS
C. Open dialer with number
D. Do nothing

Q9: Which tag is used to link to a CSS file?

A. <css>
B. <style>
C. <link>
D. <a>

Q10: Which is the correct syntax for a hyperlink?

A. <a>https://example.com</a>
B. <a link="https://example.com">Click</a>
C. <a href="https://example.com">Click Here</a>
D. <link href="https://example.com">Click</link>
← Previous Next →
Login
Go Back Top