Links

Links

Links are how we travel around the web. They're the "hyper" in HyperText!

The <a> tag

<a> stands for anchor. You put the destination in the href attribute and the clickable text inside.

<a href="https://example.com">Visit Example</a>

href = "hypertext reference" = where the link goes.

Types of addresses

• Absolute URL: the whole address including https://:

  <a href="https://example.com">Example</a>

• Relative URL: an address relative to your page:

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

• Same-page anchor: jump to a spot on the same page using # and an id:

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

• Email: mailto: opens the email app:

  <a href="mailto:me@example.com">Email me</a>

• Phone: tel: dials a number on phones:

  <a href="tel:+15551234567">Call us</a>

Opening in a new tab: target

target="_blank" opens the link in a new tab.

<a href="https://example.com" target="_blank">Open in new tab</a>

When you open in a new tab, it's smart to add rel="noopener" too. It keeps the new page from messing with your page (a security thing):

<a href="https://example.com" target="_blank" rel="noopener">Safe new tab</a>

The rel attribute

rel describes the relationship between your page and the link:

• rel="noopener": security helper for new tabs
• rel="noreferrer": don't tell the next site where you came from
• rel="external": the link goes to another website

Downloads

Add download to make a file download instead of opening:

<a href="file.pdf" download>Download the PDF</a>

Always say where you're going!

A great habit: make link text describe the destination.

• Good: "Read the documentation"
• Bad: "Click here"

Screen readers and search engines thank you!

TL;DR

• <a href="...">text</a> makes a link.
• Addresses can be absolute, relative, page anchors, emails, or phones.
• target="_blank" = new tab, use with rel="noopener".
• download makes files download.
• Say where links go in the text.