HTML Links

📚 Lesson 8 of 25  •  ⏱ 9 min read  •  Beginner

The Anchor Tag

Links are created with the <a> (anchor) tag. The href attribute specifies the destination:

HTML
<a href="https://annauniversityplus.com">
  Click here to visit
</a>

Types of Links

External Links (to other websites)

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

<!-- Open in new tab -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  Google (new tab)
</a>
<!-- rel="noopener noreferrer" is important for security! -->

Internal Links (within your own site)

HTML
<a href="about.html">About Page</a>
<a href="courses/html/index.html">HTML Course</a>
<a href="../index.html">Back to Home</a>   <!-- ../ goes up one folder -->

Anchor Links (jump to section on same page)

HTML
<!-- Link that jumps to the section -->
<a href="#contact">Jump to Contact Section</a>

<!-- The target section -->
<section id="contact">
  <h2>Contact Us</h2>
  <p>...</p>
</section>

Email and Phone Links

HTML
<!-- Email link -- opens the user's email app -->
<a href="mailto:contact@annauniversityplus.com">
  Email Us
</a>

<!-- With subject and body pre-filled -->
<a href="mailto:contact@example.com?subject=Hello&body=I%20have%20a%20question">
  Email with subject
</a>

<!-- Phone link -- opens dialer on mobile -->
<a href="tel:+919876543210">Call Us</a>

Download Links

HTML
<a href="files/notes.pdf" download>Download PDF</a>
<a href="files/notes.pdf" download="AU-HTML-Notes.pdf">Download with custom name</a>

Link as a Button (common pattern)

HTML
<!-- Style an <a> to look like a button with CSS -->
<a href="/courses/" class="btn">Browse Courses</a>