← Lesson
BitWithBite
HTML · Quick Reference

Lesson 11 — Links & Anchors Cheat Sheet

HTML
In one line: The <a> (anchor) element creates a hyperlink. Its most important attribute is href (hypertext reference) — the destination URL. The element wraps the clickable content, wh...

Key Ideas

1The Anchor Element. The <a> (anchor) element creates a hyperlink. Its most important attribute is href (hypertext reference) — the destination URL. The element wraps the clickable c...
2Absolute vs Relative URLs. The href value can be an absolute URL (full address) or a relative URL (path relative to the current file). Use absolute for external sites and relative for internal p...
3The target and rel Attributes. Use target to control where the link opens. Use rel to declare the relationship between pages — critical for security and SEO.
4Special Link Types ⚓Anchor LinkJumps to an element with matching id on the same pagehref="#section-2" 📧Email LinkOpens the user's email client with a pre-filled addresshref="mailto:hello@site.com" 📞Phone LinkOn mobile, dials the number directlyhref="tel:+44123456789" ⬇️Download LinkTriggers a file download instead of navigating to itdownload="report.pdf" HTMLSpecial link typesCopy <!-- Same-page anchor: target element must have matching id --> <a href="#contact">Jump to Contact</a> <section id="contact">...</section> <!-- Email link (can pre-fill subject and body) --> <a href="mailto:hello@bitwithbite.com?subject=Hi there">Email Us</a> <!-- Phone link --> <a href="tel:+441234567890">+44 1234 567890</a> <!-- Download link --> <a href="/files/cheatsheet.pdf" download="html-cheatsheet.pdf"> Download Cheatsheet </a> Section 5 Accessible Links. Links must be accessible to everyone, including keyboard-only users and screen reader users. Poor link text like "click here" or "read more" is meaningless out of cont...

Code Examples

<!-- Text link --> <a href="https://bitwithbite.com">Visit BitWithBite</a> <!-- Image link --> <a href="https://bitwithbite.com"> <img src="logo.png" alt="BitWithBite Home"> </a> <!-- Button-style lin...
<!-- Absolute URL — full address including protocol --> <a href="https://bitwithbite.com/courses">Courses</a> <!-- Relative URL — same folder --> <a href="about.html">About</a> <!-- Relative URL — go up one fol...
<!-- Open in new tab --> <a href="https://github.com" target="_blank" rel="noopener noreferrer"> GitHub </a> <!-- Same tab (default) --> <a href="/about">About Us</a> <!-- nofollow tells search engines not ...