Lesson 52 of 55 · HTML
Hyperlinks and Navigation
Duration: 10 min
Hyperlinks (<a>)
<a href='https://developer.mozilla.org' target='_blank' rel='noopener noreferrer'>MDN Web Docs</a>
Core attributes
href– Destination URL; can be absolute (https://…) or relative (/about.html).target='_blank'– Opens the link in a new tab/window.rel='noopener noreferrer'– Prevents the new page from accessingwindow.opener(security) and stops the referrer header from being sent.title– Optional tooltip that provides additional context.
Navigation best practices
- Wrap primary navigation in a
<nav>landmark for screen‑reader discoverability. - Use descriptive link text that makes sense out of context (avoid “click here”).
- Keep URLs human‑readable (
/projects/web-app) – aids SEO and usability. - For intra‑page jumps, use hash links (
#section-id). - Ensure links are focusable and display a visible outline when navigated with the keyboard.
Quick checklist for safe external links
target='_blank'? ✅rel='noopener noreferrer'present? ✅- Link text descriptive? ✅
- URL human‑readable? ✅
- Keyboard focus visible? ✅
Tip: Test navigation with only a keyboard (Tab/Shift‑Tab) to confirm focus order and visible outlines.
Try it yourself
Create a simple navigation bar with three links – Home, About, Contact – and wrap the list in a <nav aria-label='Main navigation'> element. Verify it appears in the browser’s Accessibility tree.