HTML Links: Internal & External Navigation

Master the <a> tag to connect your pages to the world and create seamless navigation within them.

🔗

Welcome! Let's explore HTML's most powerful feature: the hyperlink, or link. They let us navigate the web.

/* Links connect everything... */

External Links: The Web's Connective Tissue

An external link navigates to a resource on a different website. Its href attribute must contain the full, absolute URL, including the protocol (https:// or http://). It's a gateway from your page to the rest of the web.

Internal Links: Navigating Your Page

An internal link, also known as an anchor link, jumps to another section on the same page. Its href attribute begins with a hash symbol (#), followed by the id of the element you want to scroll to. This is perfect for creating a table of contents.

Important Link Attributes

The target="_blank" attribute is commonly used on external links to open the linked document in a new browser tab. For security, it's recommended to also add rel="noopener noreferrer" when using target="_blank".

Practice Zone

Interactive Test 1: Build an Internal Link

Build an internal link. Drag the parts to form a link that points to the content section.

Arrastra en el orden correspondiente.

Arrastra las opciones:

href="#content"

id="content"

Completa el código:

<a ______>Go to Section</a>

<div ______>Content...</div>

Unlock with Premium

Interactive Test 2: Complete the Links

Rellena los huecos en cada casilla.


<a href="">Visit another site</a>


<a href="">Jump to Chapter 1</a>

<h2 id="chapter-1">Chapter 1</h2>

Unlock with Premium

Practice Example: Code Editor

Create an external link to `https://todotutorial.com` that opens in a new tab, and an internal link to a section with the id `info`.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<a href="https://todotutorial.com" target="_blank" rel="noopener noreferrer">Visit Todotutorial</a>

<a href="#info">Go to Info</a>

<div id="info">
  <p>Information section.</p>
</div>

Unlock with Premium

Knowledge Check

What character must the href attribute of an internal (anchor) link begin with?

Unlock with Premium

Links in the Wild: Practical Uses

Links are more than just text. They form the primary navigation system of the web. Here are a few common patterns.

1. Navigation Menus

Most websites use a list of internal links for their main navigation menu, allowing users to quickly jump to important pages or sections.

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

2. "Back to Top" Links

On long pages, it's helpful to provide an easy way back to the top. This is a classic use case for an internal link.


<a href="#top">Back to Top</a>

3. Citing Sources

When referencing information from another website, use an external link to give credit and allow readers to find the original source. Using `target="_blank"` is polite here.

<p>According to research from <a href="https://example.com/study" target="_blank">Example University</a>, HTML is essential.</p>

Link Attributes Glossary

href: The **Hypertext Reference**. This is the most important attribute, specifying the destination URL or URL fragment for the link.
id: A **unique identifier** for an element. An internal link's `href` (e.g., `#contact`) must match the `id` of its target element.
target: Specifies where to open the linked document. The most common value is `_blank`, which opens the link in a new tab or window.
rel: The **relationship** between the current page and the linked document. When using `target="_blank"`, you should always include `rel="noopener noreferrer"` for security reasons.