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>

Next lesson: Summary - Multilingual menu

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies