A link takes a visitor from one page to another. You make one with the a element (the anchor) and its href attribute.
index.html
HTML
<a href="https://example.com">Visit the example site</a>The text between the tags is the link text. The href value is where the link goes.
Absolute and relative addresses
An absolute address includes everything: https://example.com/books/index.html. Use it to link to other websites.
A relative address is shorter and depends on where the current page is. Use it to link between pages of your own site.
| Address | Meaning |
|---|---|
contact.html | A file in the same folder |
books/new.html | A file inside the books folder |
../index.html | One folder up |
/about/ | From the site root |
index.html
HTML
<p>
<a href="books.html">Our books</a> |
<a href="contact.html">Contact</a>
</p>Good link text
Link text should make sense on its own. Screen reader users often listen to a list of all links on a page.
- Good:
Read the returns policy - Poor:
Click here,More,Link
warning
Making the whole sentence a link
<a>Click here to read our returns policy</a> works, but only the words that name the destination should be linked: “read our returns policy“.
lightbulb
Check every link
After you build a page, click every link. A broken link is one of the easiest ways to lose a visitor’s trust.
Exercise: a small menu
Create three links in a paragraph: Home (index.html), Books (books.html) and Contact (contact.html), separated by a pipe symbol.
Show a possible solution
index.html
HTML
<p>
<a href="index.html">Home</a> |
<a href="books.html">Books</a> |
<a href="contact.html">Contact</a>
</p>