Topic 11 of 41
Hyperlinks & Anchors
Overview
The Anchor tag (<a>) is the 'Hyper' in HyperText Markup Language. It enables the interconnected web by allowing users to navigate between pages, download files, trigger emails, or jump to specific sections within the same page. While React and Next.js heavily abstract routing with custom <Link> components, under the hood, they all compile down to this exact native HTML element.
Syntax
html
<!-- Standard external link -->
<a href="https://google.com">Go to Google</a>
<!-- Opening in a new tab (Crucial: requires target="_blank") -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
Open in New Tab
</a>
<!-- Linking to an email client -->
<a href="mailto:support@company.com">Email Support</a>
<!-- Linking to a phone dialer (Mobile friendly) -->
<a href="tel:+18005550199">Call Us</a>
<!-- Anchor Links: Jumping to a specific section on the SAME page -->
<a href="#pricing-section">Jump to Pricing</a>
<!-- The target element must have a matching 'id' -->
<section id="pricing-section">
<h2>Pricing Plans</h2>
</section>Common Pitfalls
- Using
target="_blank"withoutrel="noopener noreferrer". Opening a new tab gives the new page limited access to the original page's JavaScriptwindowobject, creating a massive security vulnerability (Tabnabbing). - Using
#as thehreffor a button (e.g.,<a href="#" onclick="openModal()">). If it triggers a JS action, it is a Button, not a Link. Screen readers announce links expecting a navigation event. Use a<button>tag instead.
Interview Questions
Q:
When should you use a
<button> versus an <a> tag?A:
Use an <a> tag when the action changes the URL or navigates the user to a new location. Use a <button> tag when the action triggers a dynamic on-page interaction (like opening a modal, submitting a form, or toggling a menu).
Real-World Example
Forcing a direct file download instead of navigating to the URL.
example
html
<!--
The 'download' attribute instructs the browser to download the file
to the user's hard drive instead of trying to open/render it.
-->
<a href="/assets/tax-form-2026.pdf" download="Tax_Form_2026.pdf">
Download Your Tax Form
</a>Check Your Knowledge
Test your understanding of Hyperlinks & Anchors with these quick questions.