Links and Navigation
Build strong navigation using anchor tags, internal links, external links, skip links, email links, and accessible nav markup.
Build strong navigation using anchor tags, internal links, external links, skip links, email links, and accessible nav markup. This hands-on tutorial focuses on practical implementation of links and navigation concepts.
Links and Navigation
Links are the "HyperText" in HTML. They connect the entire world wide web. Without them, the web would just be a collection of isolated documents.
Lesson Path
- Previous lesson: Text and Content Elements
- In this lesson: You learn how to build professional, secure, and accessible navigation.
- Next lesson: Images and Media
The Anchor Element (<a>)
The <a> tag creates a hyperlink. Its most important attribute is href (Hypertext REFerence), which defines the destination.
<a href="https://techcoder.io">Visit TechCoder</a>
Link Types
1. External Links
Links to other websites.
Security Warning: When using
target="_blank"to open a link in a new tab, always addrel="noopener"orrel="noreferrer"to prevent the new page from accessing your window object (a vulnerability known as tabnabbing).
2. Internal Links
Links to other pages on the same website using relative paths.
<a href="/about">About Us</a>
3. Anchor (ID) Links
Links to a specific section on the same page.
<a href="#features">Jump to Features</a>
...
<section id="features">Our Features</section>
4. Functional Links
- Email:
<a href="mailto:support@techcoder.io">Email Us</a> - Phone:
<a href="tel:+1234567890">Call Support</a>
Semantic Navigation (<nav>)
Don't just use a div for your menu. Wrap your navigation links in a <nav> element. This signals to assistive technologies that this is a primary navigation block.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Accessibility Best Practices
- Be Descriptive: Avoid "Click here" or "Read more". Instead, use "Download the HTML Cheat Sheet".
- Visual Cues: Links should be visually distinct from regular text (usually underlined or a different color).
Interactive Navigation Bar
Build a responsive navigation header. Experiment with adding internal anchors and secure external links.
Knowledge Check
Quiz
Question 1 of 2When using target="_blank" on an external link, what should you usually add as well?