🎓 A1Learner
🔍

HTML Links

A link is a clickable piece of a page that leads to another place. The a element makes a link.

A first link

The href attribute holds the address the link leads to. The link text sits between the opening and closing a tags.

<a href="about.html">About us</a>

An absolute address

An absolute address is a full web address. It names the whole path to a page on a site.

<a href="https://example.org/about.html">Example about page</a>

A relative address

A relative address names a page near the current page. This address names a file in the same folder.

<a href="team.html">Meet the team</a>

Open in a new tab

The target attribute controls where the linked page opens. The value _blank opens the page in a new browser tab.

<a href="guide.html" target="_blank">Open the guide</a>

A link inside one page

An href value that starts with # points at an id on the same page. A click scrolls the page to the element with that id.

<a href="#news">Go to news</a>
<h2 id="news">News</h2>

Example

<!DOCTYPE html>
<html>
<head>
<title>Our Site</title>
</head>
<body>
<h1>Our Site</h1>
<p>Read <a href="about.html">about us</a> to learn more.</p>
<p>Visit <a href="https://example.org" target="_blank">our partner</a> in a new tab.</p>
</body>
</html>

Key points

  • a element: the element that makes a link
  • href attribute: the address a link leads to
  • Absolute address: a full web address that starts with https://
  • Relative address: a path written from the current page
  • Use target="_blank" to open a link in a new browser tab
  • A link joins its visible text to an address held in href.

In this example, the heading names the page. The first paragraph holds a link with a relative address. The address names a file in the same folder. The second paragraph holds a link with an absolute address. Its target value opens the partner page in a new tab.

Note

An a element with no href does not lead anywhere.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does the href attribute hold?