Lesson 8: Links

Anchor tags and their attributes are the basic building blocks of internet links.

Hyperlinks connect the current page to another document or resource. You can create them using <a> (anchor) tags.

The href attribute#

The href attribute defines the destination. It turns a plain tag into a clickable link. You can use it to link to other pages, jump to sections on the same page, start downloads, or trigger phone calls and emails.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

An absolute URL includes the full address starting with https:// (useful for linking to other sites). A relative URL links to another file in your own project folder (like about.html).

To scroll to the top of the page automatically, set the href to # or #top.

You can also prefix URLs with mailto: or tel:. When a user clicks these, the browser opens their email app or phone dialer.

You can pre-populate fields in a mailto: link using extra parameters like subject and body.

<a
  href="mailto:?subject=Join%20me%21&body=Sign%20up%20for%20the%20Machine%20Learning%20workshop.%20http%3A%2F%2Fwww.machinelearning.com%23reg"
  >Tell a friend</a
>

When including links that open external applications, make sure the text tells the user what to expect.

Downloadable resources#

If the link points to a file you want the user to download, add the download attribute. You can also suggest a default filename for the saved file.

<a href="downloads/hal.svg" download="hal.svg">Download SVG</a>

Where the link opens#

The target attribute tells the browser where to open the link.

• By default, it opens in the same tab (target="_self").
• Setting target="_blank" opens the link in a brand new tab.

If you use target="_blank", every click opens a new unnamed tab. To avoid opening dozens of empty tabs, pass a custom name to the target attribute instead. For example, target="reg" opens the link in a tab named reg, and subsequent clicks will reload that same tab instead of opening another one.

The rel attribute defines the relationship between the current page and the linked resource. For example, you can use rel="nofollow" to prevent search engine bots from following the link, or rel="external" to show the link points to an outside website.

Use hreflang to specify the language of the linked document, and lang to set the language of the link text itself.

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR"
  >atelier d'apprentissage mechanique</a
>

If you are linking to a specific type of file like a PDF, you can help the browser by declaring its file type using the type attribute.

<a
  href="/fr.pdf"
  hreflang="fr-FR"
  rel="alternate"
  lang="fr-FR"
  type="application/x-pdf"
  >atelier d'apprentissage mechanique (pdf)</a
>

User experience tips#

• Make sure link text clearly describes the destination. Avoid generic text like “click here” or “more information.”
• Visual focus indicators are necessary so keyboard users can see which link they are currently selecting.
• Do not nest clickable elements (like buttons or other links) inside a link. It breaks keyboard navigation and confuses the browser.

Now we have covered links. Next we will explore lists.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).