Introduction to HTML Links

HTML links (hyperlinks) allow users to navigate between web pages. The <a> (anchor) tag is used to create links, and the href attribute specifies the destination address.

Basic Link Types

1. External Links

Links to other websites (require full URL with http/https).

<!-- External website -->
<a href="https://www.google.com">Visit Google</a>

<!-- External link opening in new tab -->
<a href="https://www.github.com" target="_blank" rel="noopener noreferrer">
  Visit GitHub (opens in new tab)
</a>

2. Internal Links

Links to other pages within the same website.

<!-- Relative paths -->
<a href="about.html">About Us</a>
<a href="contact/contact.html">Contact Page</a>
<a href="../services.html">Our Services</a>

<!-- Absolute paths (from root) -->
<a href="/products">Products</a>
<a href="/blog/post-1">Blog Post</a>

3. Section Links (Anchor Links)

Links to specific sections within the same page.

<!-- Link to section -->
<a href="#section1">Jump to Section 1</a>
<a href="#contact-form">Go to Contact Form</a>

<!-- Target section -->
<section id="section1">
  <h2>Section 1 Content</h2>
  <p>This is the content of section 1.</p>
</section>

<div id="contact-form">
  <h2>Contact Form</h2>
  <!-- Form content here -->
</div>

Link Attributes

Common Attributes

href="page.html"

target="_blank"

rel="nofollow"

download="file.pdf"

Target Attribute Values

Rel Attribute Values

Special Link Types

1. Email Links

<!-- Basic email link -->
<a href="mailto:contact@example.com">Send Email</a>

<!-- Email with subject and body -->
<a href="mailto:contact@example.com?subject=Inquiry&body=Hello, I have a question">
  Contact Us
</a>

<!-- Multiple recipients -->
<a href="mailto:contact@example.com,support@example.com">
  Email Both Departments
</a>

2. Telephone Links

<!-- Basic phone link -->
<a href="tel:+1234567890">Call Us: (123) 456-7890</a>

<!-- International format -->
<a href="tel:+001234567890">International Call</a>

<!-- Multiple phone numbers -->
<a href="tel:+1234567890,+0987654321">Call Multiple Numbers</a>

3. Download Links

<!-- Force download with original filename -->
<a href="document.pdf" download>Download PDF</a>

<!-- Force download with custom filename -->
<a href="document.pdf" download="my-document.pdf">
  Download Renamed PDF
</a>

<!-- Download image -->
<a href="image.jpg" download="photo.jpg">
  <img src="image-thumb.jpg" alt="Download photo" />
</a>

Best Practices

• Use descriptive link text (avoid "click here")
• Always include meaningful href attributes
• Use target="_blank" with rel="noopener noreferrer" for security
• Ensure link text makes sense out of context
• Use relative paths for internal links
• Test all links regularly for broken references
• Consider link appearance and hover states
• Provide visual feedback for visited links