HTML Links & Navigation
11 min · Video lesson
Lesson Content
Links are what make the web a web. The <a> (anchor) element creates clickable links. The href attribute tells the browser where to go.
External links point to other websites. Use the full URL including https://.
Internal links connect pages within your own site. Use a relative path — just the filename or folder path.
Anchor links jump to a specific section on the same page. The href starts with # followed by the id of the target element.
Opening in a new tab: Add `target="_blank"` to open the link in a new browser tab. When doing this, also add `rel="noopener noreferrer"` for security.
Navigation menus are typically built with a <nav> element containing an unordered list (<ul>) of links. This is the semantic, accessible way to build site navigation.
<!-- External link -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link to another page -->
<a href="/about.html">About Us</a>
<!-- Anchor link to a section -->
<a href="#contact">Jump to Contact</a>
<!-- Navigation menu -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/lessons.html">Lessons</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>Finished this lesson?
Mark it complete to track your progress through the course.
Learning Objectives
- 1Create links to external websites
- 2Link between pages in the same project
- 3Create anchor links to sections on the same page
- 4Use target="_blank" to open links in a new tab
0 of 31 lessons done