Button vs link
Learn when to use <button> vs <a>.
When to use a, when to use button?
To move between pages, use <a>; a link targets a URL. To act on the current page, use <button>; for instance submit a form, open a menu, sort data.
The wrong choice hurts accessibility. <a> on click goes to an address; <button> on click starts an action. Screen-reader and keyboard users expect this split.
A side-by-side comparison
Compare these two: <a href="/about">About</a> takes you to another page — navigation. <button>Open menu</button> opens a panel on the same page — action.
Adding type="button" to a <button> stops it from submitting a form, leaving only the click action. If you want an <a> with no href to act like a button, prefer <button> for accessibility.
Exercise Add a link and a button to the menu
Add two <li> items inside the existing <ul>. In the first <li>, write a link with href to /about and the text About. In the second <li>, write a button with the text Open menu.
Show example solution
<li><a href="/about">About</a></li>
<li><button>Open menu</button></li>Test yourself
-
Which is more suitable for opening and closing a drop-down menu?
- <a>
- <button>
- <span>
- <div>
Show answer
<button> — Correct. Opening a menu is an action; <button> is built for it.
-
Write the button tag
<____ type="button">Open menu</button>Show answer
<button type="button">Open menu</button> -
Match each task to the right tag
- Go to a page
- <a> tag
- Submit a form
- <button> tag
- Open drop-down
- Action: <button>
- Visit another page
- Navigation: <a>