Lessons · HTML and CSS · goes somewhere, or does something
Goes somewhere, or does something
A link navigates. A button acts. That decides which element to use, and it is about what happens rather than how it looks.
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
The two are announced differently and behave differently. Screen reader users list links to navigate; anyone might middle-click one. A 'link' that is really a button breaks both, silently.
How to think about it
Ask where the user ends up. New page or new place on this page: link. Something changes here: button. Both can be styled to look like either, so appearance never settles it.
Worked example
<a href="/invoices">Invoices</a>A link, with an href, which is what makes an anchor a link at all.
<button type="button">Add row</button>An action. <a onclick="..."> with no href would be a span in disguise: not focusable, not announced as a link.
Your turn
What makes an anchor a link.
an attribute
Write a page and watch it render
The trap
href is the whole difference. An anchor without one is the same trap as the div, wearing a more reassuring tag name.