HTML Links

Table of Contents +

Links are what make the web “the web”! They connect pages together and help users to navigate to different pages and websites. In this lesson, you’ll learn how to create links in HTML.🚀

🔗 What Are HTML Links?

HTML links (also called hyperlinks) are clickable elements that take users from one location to another. We can use links to:

  • Navigate to other pages on your website
  • Link to external websites
  • Jump to specific sections on the same page
  • Open email programs on your computer
  • Dial phone numbers on mobile devices
  • Download files

💡 Fun Fact

The “www” in web addresses stands for “World Wide Web” - and links are what make it truly “wide” by connecting everything together!

All HTML links use the anchor tag (<a>) with an href attribute that specifies the destination:

<a href="destination">Link text that users see</a>
  • <a> = Anchor tag
  • href = Hypertext REFerence (where the link goes)
  • The text between tags is what users click on

🌟 Your First Link

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

This creates: Visit Google (clickable text that opens Google) like below:

Output

Visit Google

🌍 Types of Links

1. 🌐 External Links (to Other Websites)

We can provide links to other websites, for that we need to provide the full url of that site, for example:

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

🔒 HTTPS is Important

Always use https:// (not http://) for security. Most modern websites use HTTPS, and browsers warn users about non-secure HTTP sites.

2. 🏠 Internal Links (Within Your Website)

We can provide links to other pages within our own website. For that we can use relative paths.

What are Relative Paths in HTML?

Relative paths are the location of a file relative to the current page. They don’t include the full URL. It’s like how you can reach to the page from your current page without typing the full address.

For Examples: If your folder structure is like this:

src/
└── content
    └── courses
        └── html
            ├── index.html
            ├── about.html
            └── blog
                └── my-first-post.html

Then to link to the about.html page from index.html, you can simply use:

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

Similarly, if you want to link to my-first-post.html from index.html, you can use:

<a href="blog/my-first-post.html">My First Blog Post</a>

And if you want to link to index.html from my-first-post.html, you can use:

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

📂 Folder Structure Matters

Your project folder structure is key to using relative paths effectively. Always consider the location of your HTML files when creating links!

3. ⚓ Anchor Links (Same Page Sections)

We can also provide link to navigate to specific sections within the same page. This is useful for long pages where some users may want to see a specific section without scrolling.

For this, we need to use the id attribute from the target element that we want to link to. Here’s how it works:

if we have a section like this:

<h2 id="about">About Us</h2>
<p>We are a company that does amazing things...</p>

Then we can link to it like this:

<a href="#about">Jump to About Section</a>

When users click this link, it will scroll the page to the “About Us” section.

4. 📧 HTML Email Links

We can create links that open the user’s email application to send an email. We have to use the mailto: protocol in the href attribute for the same.

  1. Basic email link: if we just to want to open the email application with a blank email and to filled with email, we just need to provide the email address in mailto link as below:
<a href="mailto:hello@example.com">Send us an email</a>

This will open the user’s default email client with a new message sending to hello@example.com email id.

  1. Email with subject line: if we want to pre-fill the subject line of the email then we can use the ?subject= query parameter in the mailto link as below:
<a href="mailto:support@example.com?subject=Need Help">Contact Support</a>
  1. Email with subject and body text: if we want to pre-fill the subject line and body text of the email then we can use the ?subject= and &body= query parameters in the mailto link as below:
<a href="mailto:info@example.com?subject=Question&body=Hi there!"
  >Ask a Question</a
>

We can create links that makes the user’s device dial a phone number when clicked on. This is especially useful for mobile users. To create a phone link, we use the tel: protocol in the href attribute:

<a href="tel:+1-555-123-4567">Call us: (555) 123-4567</a>

6. 📁 Download Links

We can also create links, when we click on them, the browser will download a file instead of going to a new page.

We don’t need to use any special word for this, we just need to provide the path to the file in the href attribute. However, if we want to force the browser to download the file instead of opening it, we can use the download attribute.

<a href="documents/resume.pdf">Download my resume (PDF)</a>
<a href="images/photo.jpg">View full-size image</a>
<a href="files/report.pdf" download="Annual_Report_2023.pdf"
  >Download Annual Report</a
>

🎯 Link Attributes

There are many attributes we can use with links to enhance their functionality and usability. Here are some of the most common ones:

Attribute Purpose Example
href Destination URL or path href="https://example.com"
target Where to open the link target="_blank" (new tab)
title Tooltip text on hover title="Visit our homepage"
download Force download instead of navigation download="filename.pdf"
rel Relationship between pages rel="noopener noreferrer"

🆕 Opening Links in New Tabs

<!-- Opens in a new tab/window -->
<a href="https://www.example.com" target="_blank">External Site</a>


<!-- Best practice: add rel attribute for security -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Secure External Link
</a>
Value Description
_blank Open link in a new tab or window
_self Open link in the same frame (default behavior)
_parent Open link in the parent frame
_top Open link in the full body of the window

💡 Link Tooltips

Sometime we want to provide additional information about the link when users hover over it. We can do this using the title attribute:

<a href="contact.html" title="Get in touch with our team">Contact Us</a>
<!-- When users hover, they'll see: "Get in touch with our team" -->

🧭 Building Navigation Menus

We can create navigation menus using lists and links. This helps users easily find important pages on your site.

🏠 Simple Navigation Bar

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

🎯 Navigation with Dropdown (Nested Lists)

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li>
      <a href="products.html">Products</a>
      <ul>
        <li><a href="products/laptops.html">Laptops</a></li>
        <li><a href="products/phones.html">Phones</a></li>
        <li><a href="products/tablets.html">Tablets</a></li>
      </ul>
    </li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

📌 Best Practices for Links

  1. Use Descriptive Text: we should always provide meaningful text for links so that users know what they can expect when they click on the link. Avoid vague phrases like “click here” or “read more”.

    • Good: <a href="about.html">Learn more about our company</a>
    • Bad: <a href="about.html">Click here</a>

  2. Keep Links Up-to-Date: Regularly check and update links to ensure they point to the correct pages.

  3. Test Links: Before publishing, test all links to confirm they work as intended.

🚨 Common Link Mistakes to Avoid

❌ Don’t Do This:

<!-- Vague link text -->
<a href="about.html">Click here</a>
<a href="report.pdf">Read more</a>


<!-- Missing protocol -->
<a href="www.google.com">Google</a>


<!-- Broken internal links -->
<a href="page-that-doesnt-exist.html">Broken Link</a>

✅ Do This Instead:

<!-- Descriptive link text -->
<a href="about.html">Learn about our company</a>
<a href="report.pdf">Download the annual report (PDF, 2MB)</a>


<!-- Include full URL for external links -->
<a href="https://www.google.com">Google Search</a>


<!-- Test your links! -->
<a href="contact.html">Contact our support team</a>

🌟 Real-World Example: Complete Website Navigation

<!DOCTYPE html>
<html>
  <head>
    <title>TechCorp - Homepage</title>
  </head>
  <body>
    <!-- Main Navigation -->
    <header>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li>
            <a href="products.html">Products</a>
            <ul>
              <li><a href="products/software.html">Software</a></li>
              <li><a href="products/hardware.html">Hardware</a></li>
              <li><a href="products/consulting.html">Consulting</a></li>
            </ul>
          </li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="blog/index.html">Blog</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>


    <!-- Main Content -->
    <main>
      <h1>Welcome to TechCorp</h1>
      <p>We provide cutting-edge technology solutions for businesses.</p>


      <!-- Call-to-action links -->
      <p>
        <a href="products.html">Explore our products</a> or
        <a href="contact.html">get in touch</a> to learn more.
      </p>


      <!-- External links -->
      <h2>Follow Us</h2>
      <ul>
        <li>
          <a
            href="https://twitter.com/techcorp"
            target="_blank"
            rel="noopener noreferrer"
            >Twitter</a
          >
        </li>
        <li>
          <a
            href="https://linkedin.com/company/techcorp"
            target="_blank"
            rel="noopener noreferrer"
            >LinkedIn</a
          >
        </li>
        <li>
          <a
            href="https://github.com/techcorp"
            target="_blank"
            rel="noopener noreferrer"
            >GitHub</a
          >
        </li>
      </ul>


      <!-- Contact links -->
      <h2>Get in Touch</h2>
      <p>
        <a href="mailto:hello@techcorp.com?subject=General Inquiry">Email us</a>
        or
        <a href="tel:+1-555-123-4567">call (555) 123-4567</a>
      </p>
    </main>


    <!-- Footer Navigation -->
    <footer>
      <nav>
        <ul>
          <li><a href="privacy-policy.html">Privacy Policy</a></li>
          <li><a href="terms-of-service.html">Terms of Service</a></li>
          <li><a href="sitemap.html">Site Map</a></li>
        </ul>
      </nav>


      <p><a href="#top">Back to Top ↑</a></p>
    </footer>
  </body>
</html>

🎮 Try It Yourself!

Create a multi-page website with these exercises:

  1. Create a folder for links practice and create 3 HTML files: index.html, about.html, and contact.html.

    • index.html (homepage)
    • about.html (about page)
    • contact.html (contact page)

  2. Add navigation to each page that links to the other pages

  3. On the contact page, add:

    • An email link
    • A phone link
    • Links to social media profiles (external)

  4. Create a long page with:

    • A table of contents with anchor links
    • Multiple sections with unique IDs
    • “Back to top” links

🎊 What You’ve Learned

Excellent progress! You now know how to:

  • ✅ Create external links to other websites
  • ✅ Build internal navigation between your pages
  • ✅ Use anchor links to jump to page sections
  • ✅ Create email and phone links
  • ✅ Build navigation menus with lists and links
  • ✅ Use proper link attributes for security and usability

🚀 What’s Next?

In our next lesson, we’ll learn HTML Images and Media - learn how to add photos, videos, and other media to make your websites! 📸

Previous HTML Lists Next HTML Images

Share & Connect

Share on LinkedIn