Hone

Lessons · HTML and CSS · links

Links

a is an anchor and href is where it goes: a full address, a path on this site, or a fragment that jumps to an id on this page.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Links are the web. Reading an href tells you whether a click stays on the site, leaves it, or scrolls within the page, and each behaves differently.

How to think about it

Read the href from its first character: https means another site, a leading slash means this site from the root, a hash means this page.

Worked example

<a href="https://example.com">Example</a>
Absolute: the whole address, another site.
<a href="/about">About</a>
Site-relative: starts at the root of this site, so it works from any page.
<a href="#top">Back to top</a>
A fragment: jumps to the element with id top on this page.
<a href="/report.pdf" target="_blank" rel="noopener">Report (new tab)</a>
target opens a new tab; rel=noopener keeps that page from reaching back into this one.

Your turn

Link to the contact page on this site.

<a ="/contact">Contact</a>

The trap

Link text that says 'click here'. Screen readers can list a page's links out of context, and twelve 'click here's say nothing. Name the destination.

Practise links on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.