HTML - Links
Overview
Estimated time: 25–35 minutes
Links connect the web. Learn how to create accessible, secure, and meaningful links for navigation, downloads, and actions.
Learning Objectives
- Create internal and external links with proper attributes.
- Use
targetandrelsafely. - Author descriptive link text for accessibility.
Prerequisites
Basics
<a href="/about">About Us</a>
<a href="https://example.com" target="_blank" rel="noopener">External Site</a>
<a href="/docs/file.pdf" download>Download PDF</a>
<a href="mailto:[email protected]">Email Us</a>
<a href="tel:+15555555555">Call Us</a>
Try it
Best practices
- Use
rel="noopener"(andnoreferrerif you don’t want the Referer header) withtarget="_blank". - Keep link text meaningful: "About our team" rather than "click here".
- Ensure sufficient color contrast and a visible hover/focus style (handled in CSS).
Common Pitfalls
- Using
#as a placeholder href in production (breaks keyboard navigation). - Opening new tabs unnecessarily (hurts usability).
Checks for Understanding
- Why add
rel="noopener"when usingtarget="_blank"? - What’s wrong with "click here" as link text?
Show answers
- It prevents the new page from accessing
window.opener, improving security. - It’s not descriptive for screen readers and hurts SEO; use context-rich text.
Exercises
- Create a navigation list with three internal links and one external link that opens in a new tab safely.
- Add a download link to a local file and a mailto link with a prefilled subject.