--- title: The Difference Between a Button and a Link | daily.dev description: A detailed explanation of the semantic difference between HTML buttons and links, and why that distinction matters for accessibility and UX. Links represent... canonical: https://daily.dev/posts/the-difference-between-a-button-and-a-link-qrk1r0zav twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Difference Between a Button and a Link | daily.dev og:description: A detailed explanation of the semantic difference between HTML buttons and links, and why that distinction matters for accessibility and UX. Links represent... og:url: https://daily.dev/posts/the-difference-between-a-button-and-a-link-qrk1r0zav og:image: https://api.daily.dev/og/posts/qRk1R0zAV.png og:image:alt: The Difference Between a Button and a Link og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The Difference Between a Button and a Link **[Hacker News](https://daily.dev/sources/hn)** · 6 min read · 3 upvotes · 0 comments ## Summary A detailed explanation of the semantic difference between HTML buttons and links, and why that distinction matters for accessibility and UX. Links represent re-contextualizable destinations (supporting middle-click, bookmarking, sharing), while buttons trigger actions in a fixed context. The post argues that the common workaround of styling links as buttons is an anti-pattern, and advocates for the Triptych Project's 'Button Actions' proposal — adding `action` and `method` attributes to `` — so that navigating to a new state can be done correctly in pure HTML without JavaScript or misusing link semantics. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community take How the wider developer community reacted, aggregated from 1 discussion and 76 comments across hackernews (as of 2026-07-29). **TL;DR:** The community broadly agrees on the semantic distinction between buttons and links, but is divided on whether the Triptych 'Button Actions' proposal is necessary given existing workarounds like `formaction`/`formmethod` and the `form` attribute. Several commenters — including what appears to be the proposal's author — actively defend the proposal against skeptics. **Sentiment:** 35% positive · 40% mixed · 25% skeptical **The case for** - The proposal would allow buttons to trigger navigations without JavaScript, benefiting accessibility-focused and government sites. - Existing workarounds (dangling forms, `form` attribute) are clunky and don't cover all layout scenarios (e.g., cancel button to the left of submit). - Supporting legitimate button-navigation use cases could help enforce the norm that links should look like links. - Extending HTML forms to support more HTTP methods (DELETE, PUT) would eliminate the need for separate human-facing and machine-facing APIs. **The pushback** - The `formaction` and `formmethod` attributes already cover many of the described use cases without a new proposal. - A blank form with the `form` attribute on the button is a sufficient workaround for the remaining cases, just clunky. - Codifying `button[action]` as a standard could confuse screen reader users who rely on the clear behavioral distinction between `` and ``. - The 'Cancel' example used in the article is weak — cancel is conceptually close to navigation and the Django admin 'delete' link is already correctly a link. - The proposal presupposes developers know better than users by removing re-contextualization features (middle-click, bookmarking) that users may want. **By community** - hackernews (mixed): Commenters are split between appreciating the semantic clarity the proposal aims for and questioning its necessity given existing HTML attributes, with a lively back-and-forth between skeptics and what appears to be the proposal's author. **Hottest debate:** Whether `formaction`/`formmethod` plus the `form` attribute already solve the problem the Button Actions proposal addresses, making the proposal redundant. **Open questions** - How would screen reader users and accessibility tooling distinguish `` from a plain `` link in practice? - Will the proposal address the full range of HTTP methods (DELETE, PUT) or only GET/POST? - How should 'Cancel' be implemented when it needs to discard in-progress form state rather than simply navigate away? **Highlights** > > Copying, sharing, bookmarking—these are all features for re-contextualizing the action of a link. Buttons serve a complimentary purpose because they don’t allow for any of that. This sells me on the opposite of what the author is saying. If, because some jackass decided that to open a page in a different window I need to click the button, copy the URL, then go back and open a new tab, then paste, that's a terrible experience. This proposal presupposes that the developer is smarter than the user (they're frequently not!). There's functionally no reason to do this. It doesn't add anything for the user, it only takes things away in the name of making it feel "more native". > Should “Cancel” be a link? No! Its job is to close the edit view. I've been building websites for 25 years and I've literally never had this problem. And that's partially because "Cancel" is pretending you're in a desktop app with desktop idioms. No real, actual person designs websites like this. And the number of people who are doing zero styling but who also care about the distinction between a link and a button is vanishingly small. It's simple: just stop trying to be clever. Design a website like you're writing hypertext. > — [bastawhiz on hackernews · 3 comments](https://news.ycombinator.com/item?id=49093013) > The `formaction` and `formmethod` attributes already exist. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... > — [minitech on hackernews · 2 comments](https://news.ycombinator.com/item?id=49092359) > > This seems to conflate appearance with semantics. If an element causes a navigation, I make it a link. Neither of my examples work with links. Logout buttons must be buttons because they trigger unsafe requests, and "search" buttons are buttons because they submit the form as a query parameter. Both of these examples, are, however, navigations.[0] > Whether it looks like a button is irrelevant, that’s CSS. It's not irrelevant, because even if you style a link like a button (or vice versa), it will still behave like the thing it actually is. That's why it's important to have native HTML behavior that lets people use the right semantic element. [0] https://html.spec.whatwg.org/multipage/browsing-the-web.html... > — [alexpetros on hackernews](https://news.ycombinator.com/item?id=49093152) > I see this is part of the Triptych project, an attempt to, among other things, bring more verbs into HTML forms. As I've said before one of my long-time dreams is to have HTML forms support methods other than GET and POST. Clicking on forms is how humans interact with HTTP, and for some strange reason the web has evolved to omit many very important words us humans must use to communicate. While a machine is allowed to say `DELETE /widgets/123`, a human is forced to say `POST /widgets/123/delete` or `POST /widgets/123?_method=DELETE`. This is not only semantically incorrect, but also results in idempotency and caching issues, and, perhaps worst of all, forces developers to maintain two separate APIs: nice, well-formed REST endpoints for machines, and separate kludgy endpoints for humans, who were granted a stunted language. > — [acabal on hackernews · 2 comments](https://news.ycombinator.com/item?id=49092669) > Totally, this is part of the problem I'm trying to solve. I wrote a little about these "call to action links" that you're describing in the proposal.[0] The tl;dr is that I think it would be easier to hold the line that "links should look like links" if we supported the legitimate use cases for navigating with buttons. I would love more feedback from the accessibility engineering community so please look up my email or comment on the proposal if you think I've missed something. [0] https://triptychproject.org/proposals/button-actions#what-ab... > — [alexpetros on hackernews](https://news.ycombinator.com/item?id=49093487) **Source threads** - [hackernews](https://news.ycombinator.com/item?id=49091738) · 54 points · 76 comments ## Similar posts on daily.dev - [Building Better Buttons](https://daily.dev/posts/building-better-buttons-kfg2u6xfq) · Simple Thread · 68 upvotes · 5 comments - [Explaining the Accessible Benefits of Using Semantic HTML Elements](https://daily.dev/posts/explaining-the-accessible-benefits-of-using-semantic-html-elements-qzckf8xz9) · CSS-Tricks · 10 upvotes · 2 comments - [If you want to create a button from scratch, you must first create the universe](https://daily.dev/posts/if-you-want-to-create-a-button-from-scratch-you-must-first-create-the-universe-81uyduuo1) · Hacker News · 2 upvotes · 1 comments - [The Two Button Problem – Frontend Masters Blog](https://daily.dev/posts/the-two-button-problem-frontend-masters-blog-56i2s1wtl) · Frontend Masters · 122 upvotes · 6 comments - [Please, use a link\!](https://daily.dev/posts/please-use-a-link--eb1jsgjev) · Ibrahim Diallo · 82 upvotes · 10 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/the-difference-between-a-button-and-a-link-qrk1r0zav) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The Difference Between a Button and a Link","url":"https://daily.dev/posts/the-difference-between-a-button-and-a-link-qrk1r0zav","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-difference-between-a-button-and-a-link-qrk1r0zav"},"datePublished":"2026-07-29T02:05:01.423Z","dateModified":"2026-07-29T05:26:02.017Z","description":"A detailed explanation of the semantic difference between HTML buttons and links, and why that distinction matters for accessibility and UX. Links represent...","image":"https://media.daily.dev/image/upload/s--VDukGCjf--/f_auto/v1722860399/public/Placeholder%2002","thumbnailUrl":"https://media.daily.dev/image/upload/s--VDukGCjf--/f_auto/v1722860399/public/Placeholder%2002","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-difference-between-a-button-and-a-link-qrk1r0zav","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,html,accessibility","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"The Difference Between a Button and a Link"}]} ```