Links to Other Sites

The a element with an href attribute turns words into a link to any page on the web, and good link text tells people where the link goes before they follow it.

Novice · HTML · Updated

After this lesson you can

  • Write a link to another site with a and href, using an absolute URL and link text that makes sense on its own
  • Decide when a link should open in a new tab, and open one safely with target and rel

Key takeaways

  • A link is an a element (a for anchor) with an href attribute that holds the address it goes to.
  • A link to another site uses an absolute URL, the whole address, starting with https://.
  • Link text should make sense on its own, such as "the band's tour dates", never "click here".
  • Open a new tab only when leaving the page would lose something, and say so in the link text.
  • target="_blank" opens a new tab, and rel="noopener" stops the new page from reaching back to yours.

Links are what turn a pile of separate pages into the web. A fan page links to the band's official store, a class report links to its sources, and a portfolio links to the projects it shows off. Without links, every page would be a dead end. This lesson shows how to write a link to another site, what to put in its words, and when (rarely) to open it in a new tab.

Hypertext: text you can follow

A book can point you somewhere else with a footnote, but you still have to go and find the other book. A web page can take you there in one click. Text with links you can follow is called hypertext, the HT in HTML, and each link is a hyperlink (usually shortened to link).

In HTML a link is the <a> element, read "a", short for anchor: the link is anchored to the words inside it. Its href attribute (read "h-ref", for hypertext reference) holds the address it goes to:

<a href="address">the words people click</a>

The words between the tags are the link text: what the reader sees, and clicks or taps.

An absolute URL: the whole address

A web page's address is its URL (read "U-R-L"), short for Uniform Resource Locator. To link to another site, you give its whole URL, starting with https://. A whole address like that is an absolute URL: like a full mailing address with the street, city and zip code, it works from anywhere.

<p>Tickets are on <a href="https://www.neonlanterns.example/tour">the band's tour page</a>.</p>
  • https:// says how to fetch the page: over HTTPS, the secure way browsers talk to websites.
  • www.neonlanterns.example is the site's name, its domain.
  • /tour is the page on that site, its path.

The .example ending is set aside for examples like this one, so it never leads to a real site. On your own pages, copy a real address from your browser's address bar.

Leave off https:// and the link breaks: href="www.neonlanterns.example" makes the browser look for a file named www.neonlanterns.example in your own folder. The next lesson, Links Between Your Own Pages, shows why.

Link text that makes sense on its own

Screen reader users can bring up a list of every link on a page and jump straight to one. Sighted visitors skim the links too, because they stand out. A list that says click here, click here, read more tells nobody anything. Write link text that says where it goes, even when it's read on its own:

<!-- Hard to use: the link text says nothing about where it goes -->
<p>To see the band's tour dates, <a href="https://www.neonlanterns.example/tour">click here</a>.</p>

<!-- Clear: the link text is the destination -->
<p>See <a href="https://www.neonlanterns.example/tour">the band's tour dates</a>.</p>

The second one is shorter, too. Good link text names the place: the band's tour dates, Paper Moon on Bandcamp, the venue's parking map.

Opening a new tab, safely

The target attribute says where a link opens. target="_blank" (read "underscore blank") opens it in a new tab.

Most of the time, don't. People expect a link to open in the same tab, with the Back button to return, and anyone who wants a new tab can open one themselves (Ctrl+click on Windows, Cmd+click on a Mac). A new tab fits when leaving the page would lose something, such as a half-filled order form with a link to the ticket rules. When you do it, say so in the link text, so nobody is surprised:

<a href="https://www.neonlanterns.example/ticket-rules" target="_blank" rel="noopener">
    Ticket rules (opens in a new tab)
</a>

rel (for relationship) says how the other page relates to yours. rel="noopener" stops the new tab from reaching back to your page. Without it, in older browsers, a page opened this way could quietly swap your page for a fake one, such as a copy of your login page, while the visitor was looking at the new tab. To be honest: current browsers have treated every target="_blank" link as noopener since about 2021, so they're already safe. Writing it costs nothing, protects anyone on an older browser, and tells the next reader you thought about it.

Try it. In your neon-lanterns folder, add a paragraph to index.html with a link to a real site for a band you like, using its full address from your browser's address bar. Give it link text that would make sense in a list of links on its own. Then add a second link that opens in a new tab safely, with link text that says so.

Check yourself

2 questions to try on the lesson page.

So what

A link is only as good as its address and its words. An absolute URL that starts with https://, and link text that names the destination, make links that work and that everyone can use.

Key terms

Cheat sheets

Related