Links & Navigation in HTML
From the HTML cheat sheet · Text & Content Elements · verified Jul 2026
Links & Navigation
Hyperlinks and navigation elements
css
<!-- Basic links -->
<a href="https://example.com">External link</a>
<a href="/about">Internal link</a>
<a href="#section">Anchor link</a>
<a href="mailto:email@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<!-- Link attributes -->
<a href="https://example.com" target="_blank" rel="noopener">Open in new tab</a>
<a href="document.pdf" download>Download PDF</a>
<!-- Navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>html
<nav>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a>
</nav>🟢 Essential - Links are the foundation of the web
💡 Use rel="noopener" for target="_blank" (security)
📌 aria-current="page" shows current location
⚡ Skip links improve keyboard navigation
⚠️ Make link text descriptive, not "click here"
linksnavigationanchor
Continue with HTML
Save the full cheat sheet or work through every related task.