Linking to Other Pages

The "hyper" in HyperText is all about links - the ability to jump from one page to another with a single click. Links are what turn a pile of separate pages into an actual web, and they are one of the most useful tags you will ever use.

The anchor tag

A link is created with the <a> tag, sometimes called the "anchor" tag. Unlike the tags you have seen so far, the anchor tag needs a little extra information to know where it should point. That extra information is called an attribute, and it goes inside the opening tag.

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

Here, href stands for "hypertext reference", and its value, in quotes, is the address the link points to. The text between the opening and closing tags, "Visit this site" in this example, is what actually appears on the page for people to click.

Linking to pages on your own site

Links do not always have to point somewhere else on the internet. You can also link to another page you are building yourself, using just the file name instead of a full web address.

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

This kind of link assumes the file about.html lives in the same place as the page you are linking from. As your website grows to more than one page, links like this are how you connect them into a single site people can navigate.

Writing good link text

It is tempting to write links like "click here", but that tells a visitor almost nothing about where they are going. Compare these two:

<a href="about.html">click here</a>
<a href="about.html">Learn more about me</a>

The second one is far more helpful, both for sighted visitors skimming the page and for people using screen readers that let them jump between links by their text alone.

Try adding a link in the starter code below, either to a real website you like or to an imaginary "about.html" page. Once you understand links, you are only one step away from adding images, which use a very similar pattern.