HTML / Beginner
If it changes state, use button. If it navigates, use a link.
Why this matters
Links and buttons have different jobs. Links navigate; buttons change state or submit actions.
Using the right element improves keyboard behavior, screen reader expectations, and browser defaults.
This also makes automated tests easier because the role matches the user intent.
<button type="button" aria-expanded={open} onClick={toggleMenu}>
Toggle filters
</button>
<a href="/pricing">
View pricing
</a>How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.
React: Use button for modal open, dropdown toggle, copy, save, and delete actions.
Next.js: Use Link for route navigation, not for opening menus.
Forms: Set type='button' for non-submit buttons inside forms.
Explore other stacks
Move from this HTML note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.
Pre-render dynamic pages at build time instead of on every request to cut TTFB.
Local state avoids unnecessary parent renders and keeps component intent obvious.
Cancel outdated browser requests so fast UI changes do not render old data.
Fluid spacing keeps layouts responsive without a forest of breakpoint overrides.
Sanitize on input, escape on output, and keep theme templates strict about user content.
Oversized images are still the easiest way to lose LCP before users see anything.