Links and Navigation

The \<a\> (anchor) element creates hyperlinks to other pages, resources, or locations.

Basic Link

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

<!-- Internal link -->
<a href="/about">About Us</a>

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

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

Link Attributes

Attribute	Purpose	Example
href	Link destination	https://example.com
target	Where to open	_blank, _self, _parent, _top
rel	Relationship to linked resource	noopener, nofollow
download	Download instead of navigate	download="file.pdf"
title	Tooltip text	title="Visit site"

Target Values

<!-- Same window (default) -->
<a href="/page" target="_self">Same Window</a>

<!-- New window/tab -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    New Tab
</a>

<!-- Parent frame -->
<a href="/page" target="_parent">Parent Frame</a>

<!-- Full body -->
<a href="/page" target="_top">Full Body</a>

Security: rel="noopener noreferrer"

<!-- ❌ Dangerous: window.opener can redirect your page -->
<a href="https://evil.com" target="_blank">Evil Site</a>

<!-- ✅ Safe: prevents window.opener access -->
<a href="https://evil.com" target="_blank" rel="noopener noreferrer">
    Safe External Link
</a>

Download Links

<!-- Force download -->
<a href="/files/report.pdf" download>Download Report</a>

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

<!-- Conditional download -->
<a href="/files/data.csv" download id="csv-link">Download CSV</a>
<script>
const link = document.getElementById('csv-link');
if (navigator.onLine) {
    link.href = '/files/data.csv';
} else {
    link.href = '/files/data-cached.csv';
}
</script>

HTML supports different link relationships using the rel attribute.

External Resources

<!-- Stylesheet -->
<link rel="stylesheet" href="styles.css">

<!-- Favicon -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Manifest -->
<link rel="manifest" href="/manifest.json">

<!-- Preload (high priority) -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.jpg" as="image">

<!-- Prefetch (low priority) -->
<link rel="prefetch" href="/next-page.html">

<!-- DNS prefetch -->
<link rel="dns-prefetch" href="https://api.example.com">

SEO Links

<!-- Canonical URL -->
<link rel="canonical" href="https://www.example.com/page">

<!-- Alternate versions -->
<link rel="alternate" hreflang="es" href="https://www.example.com/es/page">
<link rel="alternate" type="application/rss+xml" href="/feed.xml">

<!-- Author -->
<link rel="author" href="https://example.com/author">

Navigation Patterns

<!-- Main navigation -->
<nav aria-label="Main">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- Breadcrumbs -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/products/shoes" aria-current="page">Shoes</a></li>
    </ol>
</nav>

<!-- Skip link (accessibility) -->
<a href="#main" class="skip-link">Skip to main content</a>

Anchor Links (In-Page)

<!-- Link to section -->
<a href="#section-id">Jump to Section</a>

<!-- Section with id -->
<section id="section-id">
    <h2>Section Title</h2>
    <p>Content...</p>
</section>

<!-- Back to top -->
<a href="#top">Back to Top</a>

<!-- Smooth scrolling -->
<style>
html {
    scroll-behavior: smooth;
}
</style>

Common navigation patterns using HTML links.

Main Navigation

<nav aria-label="Main navigation">
    <ul>
        <li><a href="/" aria-current="page">Home</a></li>
        <li>
            <a href="/products" aria-expanded="false" aria-haspopup="true">
                Products
            </a>
            <ul>
                <li><a href="/products/shoes">Shoes</a></li>
                <li><a href="/products/clothing">Clothing</a></li>
            </ul>
        </li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Footer Navigation

<footer>
    <nav aria-label="Footer">
        <ul>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
            <li><a href="/sitemap">Sitemap</a></li>
        </ul>
    </nav>
</footer>

Pagination

<nav aria-label="Pagination">
    <ul>
        <li><a href="/page/1" aria-label="Previous page">← Prev</a></li>
        <li><a href="/page/1">1</a></li>
        <li><a href="/page/2" aria-current="page">2</a></li>
        <li><a href="/page/3">3</a></li>
        <li><a href="/page/3" aria-label="Next page">Next →</a></li>
    </ul>
</nav>

Skip Links

<!-- Hidden, visible on focus -->
<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}
</style>

<body>
    <a href="#main" class="skip-link">Skip to main content</a>
    <header>...</header>
    <main id="main">...</main>
</body>