Links navigate; buttons act

What it is

A link’s contract is navigation: go to another resource, usually returnable, shareable, openable in a new container. A button’s contract is action: do something in the current context—submit, delete, play, open a panel—without promising a new addressable place. The split is not a visual rule. It is the prediction model for “how the world changes after I press.” Using <a> to submit, or <button> to go somewhere, swaps parts on that model.

Why it happens

Browsing history teaches that underlined or in-prose words take me elsewhere, and that Back works; a filled control changes data here. Once the prediction exists, habits follow: links are long-pressed, opened in a new tab, copied; buttons are mashed and treated as submit. An action built as a link invites “delete in a new tab,” or Back as undo of a POST that already happened. Navigation built as a button will not be copied, will not be prerendered, and the session history may ignore the “jump.” Underneath, a link has an href as a resource id and a button does not; the semantics merely translate that engineering fact into a model of consequences.

Studying it

Give the same visual two implementations (real link / real button) for “go to details” and “delete this item.” Allow new tabs, Back, copy.

Independent variables: role, whether the task is navigation or action, whether a new-tab gesture is available. Dependent variables: attempts to new-tab or copy, Back used as undo, verbal reports of a wrong expectation.

A lab that strips browser chrome (no new tab) cannot measure the navigation contract. Test in a real browser, not a chromeless WebView demo.

Where it stops holding

In a single-page app many “jumps” do not replace the document; if they still change an addressable location (the URL), treat them as links. Opening a dialog or a drawer is not navigation, however large the content; use a button. A download is sometimes a link (an addressable file) and sometimes a button (a report generated on the spot)—ask whether the resource can be fetched on its own. A “link that looks like a button” may be styled as a button if the role remains navigation. The contract is the distinction; appearance is the next question.

Applying it

• If it changes the URL or opens another resource, use a link. If it submits, deletes, toggles, or opens a transient panel, use a button.
• In review ask “should Back undo this?” If yes, it is probably an action; if no, and a history entry should remain, it is probably navigation.
• Do not click-script a div into either role; neither contract appears automatically.
• Verify with a long-press or a right-click. If “Open in New Tab / Copy Link” appears and those commands make sense, the role is a link. If they are meaningless or absent, the role should be a button.

Related

• Within the group: E1.08.2 A semantic mismatch breaks assistive technology · E1.08.3 Swapping appearance misleads expected consequences
• Adjacent: E1.16 Link and button semantics · G4 Cross-page flow · J5.02 Accessibility tree and roles
• Search terms: link versus button · navigation versus action · href