Links

Links are what make the web a web - the <a> (anchor) element connects pages, sections, files, and resources together.

The Anchor Tag

The href attribute holds the destination. Add target="_blank" to open a link in a new tab, and pair it with rel="noopener noreferrer" so the new page can’t access the window that opened it - a small but real security consideration.

Try it yourself

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example (opens in new tab)
</a>

Output

Absolute vs Relative URLs

An absolute URL includes the full domain. A relative URL points to a file within the same site - either relative to the current page (about.html) or root-relative (/about.html).

Try it yourself

<a href="https://example.com/about">Absolute link</a>
<a href="/about">Root-relative link</a>
<a href="about.html">Relative link</a>

Output

Linking Within a Page & Other Uses

Give any element an id, then link to it with href="#id" to jump straight to that spot on the page. The <a> tag also handles mailto: and tel: links, and a download attribute for downloadable files.

Try it yourself

<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>
<a href="mailto:hello@example.com">Email us</a>

Output

Coding challenge

Create two links: one that opens "https://example.com" safely in a new tab, and one that jumps to a #contact section on the same page.

<!-- external link + in-page jump link -->

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. Which attribute holds the destination of a link?

2. What does target="_blank" do?

3. Which of these links to a section on the same page?

4. Why pair target="_blank" with rel="noopener noreferrer"?