Understand the idea

Before styling a control, describe what it does. “Go to the guides” is navigation. “Show a hint” changes the current page. That distinction helps choose an anchor or a button.

Use an anchor with href for a destination. Use a native button for an action. In a normal form, a button without an explicit type can submit the form. Give supporting controls type="button" and the sending control type="submit".

Read the example

Put this fragment in the body of a complete document. The script follows the elements it uses.

HTML · EXAMPLE
<a href="/html/">Browse HTML guides</a>
<button type="button" id="hint-toggle" aria-expanded="false"
        aria-controls="hint">Show hint</button>
<p id="hint" hidden>Check the button type.</p>
<script>
const toggle = document.querySelector("#hint-toggle");
const hint = document.querySelector("#hint");
toggle.addEventListener("click", () => {
  hint.hidden = !hint.hidden;
  toggle.setAttribute("aria-expanded", String(!hint.hidden));
  toggle.textContent = hint.hidden ? "Show hint" : "Hide hint";
});
</script>

Follow the browser’s behaviour

A link can be opened in another tab or copied as an address. Replacing it with a scripted button loses those familiar options. Conversely, using href="#" for an action changes navigation without expressing the action correctly.

Check the surrounding form

When a button behaves unexpectedly, inspect its form owner and type before changing event handlers. Preventing every click’s default behaviour can hide the original design mistake.

Practise: the button that submits unexpectedly

A small mistake, explained

What goes wrong

A clickable div may work with a pointer while providing no built-in keyboard action or button semantics.

How to fix it. Replace it with a native button. Keep a visible focus indicator and an understandable label.

Try it yourself

Tab to both controls. Activate the button with Space and Enter. Confirm that the link navigates and the button stays on the page.

Further reading

MDN — Buttons act. Links navigate. (new tab)

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.