How Do Anchor Tags Work? | HTML Interview Questions

What You'll Learn

Creating different types of links
Security best practices
Special link protocols

The Anchor Element

The <a> (anchor) element creates hyperlinks - the foundation of web navigation.

Link Types

index.htmlHTML

<!-- External link -->
<a href="https://example.com">Visit Example</a>

<!-- Open in new tab (with security) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

<!-- Internal links -->
<a href="/about">About Page</a>
<a href="../index.html">Home</a>

<!-- Page section (anchor) -->
<a href="#contact">Jump to Contact</a>
<section id="contact">Contact form here</section>

Contact Links

index.htmlHTML

<!-- Email -->
<a href="mailto:hello@example.com">Email Us</a>

<!-- Phone -->
<a href="tel:+1234567890">Call Us</a>

Download Links

index.htmlHTML

<a href="report.pdf" download>Download Report</a>
<a href="report.pdf" download="annual-report-2024.pdf">
  Custom filename
</a>

Security Note

Always use rel="noopener noreferrer" with target="_blank" to prevent security vulnerabilities.