The Web’s greatest magic is that clicking on text takes you to another page. Because of this “connection,” pages all over the world are linked together like a spider’s web. What makes it happen is the link, and the tag you use is <a>.
The shortest possible link
<a href="https://example.com">View the sample site</a>Break it down and it looks like this.
| Part | Meaning |
|---|---|
<a> | Short for “anchor.” The tag that makes a link |
href="..." | The destination address (URL). This is the crucial part |
View the sample site | The clickable text shown on screen |
It means “when you click the text View the sample site, you jump to the place in href.” On screen, just that text changes color — the signal that it’s clickable.
Jumping to a page within your site
You can jump not only to outside sites but also to another page of your own site. In that case, you write the path to that page’s file.
<a href="/about.html">About this site</a>If a long address starting with https://... is like “the address of a house outside,” then /about.html is like “a room number inside the same house.” Within the same site, you can write it short.
On top of that, you can also make it jump to a specific spot within the same page. The “table of contents” links on a long page are exactly that.
HTMLIn-page linksWe’ll cover how to make links that jump within a page in detail in the next lessonA little care with your link text too
Actually, there’s a knack to choosing the text you turn into a link: make it so the link text alone tells you “where it goes.”
<!-- △ Close, but not quite: you can't tell where it goes -->
<p>For details, click <a href="/menu.html">here</a>.</p>
<!-- ○ Good example: the text alone tells you the destination -->
<p>For details, go to the <a href="/menu.html">menu page</a>.</p>If you turn only “here” or “this” into a link, people who skim through the links, or who listen with screen-reader software, won’t know where it goes. Turn the destination’s own name into the link — that alone makes for a far kinder page.
You can link to email and phone, too
A link’s destination isn’t limited to web pages. By changing how you write href, you can make links that open a new email or place a phone call.
<a href="mailto:[email protected]">Send an email</a>
<a href="tel:09000000000">Make a call</a>| How to write it | When you tap it… |
|---|---|
href="mailto:email address" | A screen for writing an email opens |
href="tel:phone number" | You can place a phone call on a smartphone |
Handy when you want to place a shop’s contact info, or your own “contact me” info.
Summary of this lesson
- A link is
<a href="destination">text</a> - Write the destination (URL) in
href - You can jump to outside sites, and to other pages within the same site
