Use a link to navigate to a resource and a button to perform an action. Both can look similar after styling, but their native behavior is different. HTML interview questions about clickable elements are often really questions about meaning, keyboard use and predictable browser behavior.

Which element fits each task?

<a href="/reading-room">Read about the reading room</a>
<button type="button" aria-expanded="false"
        aria-controls="opening-details" id="details-button">
  Show opening details
</button>
<div id="opening-details" hidden>
  The fictional room opens after the main library desk.
</div>
<script>
  const button = document.querySelector('#details-button');
  const details = document.querySelector('#opening-details');
  button.addEventListener('click', () => {
    const open = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!open));
    details.hidden = open;
  });
</script>

The link has a real destination. The button changes the state of content already on the page. Its expanded state matches the visible state after each activation. These are local examples; the snippet is shown as code, not embedded as an executable script in this article.

Why not use a div with a click handler?

A div does not acquire a button's complete interaction behavior just because it responds to a mouse click. Keyboard focus, activation and accessible meaning would need deliberate work. A native button already provides the correct foundation for a simple action.

Adding role=button is not a universal repair. A role describes meaning but does not automatically implement all expected behavior. Prefer the existing native control when it fits the job rather than rebuilding it without a concrete reason.

Why does an anchor need a meaningful href?

A real destination supports normal navigation behavior such as opening in another tab and copying the address. An anchor with a fake fragment used only to trigger an unrelated action mixes those expectations. A button is usually clearer for an action that does not navigate.

A link label should also tell the reader what they will get. Several links called “click here” are difficult to distinguish outside their surrounding paragraphs. Descriptive labels help both visual scanning and navigation through a list of links.

How do buttons behave inside a form?

State the type explicitly when the control is not meant to submit. A help toggle inside a form should not accidentally trigger submission. Conversely, a real submit button should participate in the intended form workflow rather than relying on a separate click handler to mimic it.

This distinction is easy to overlook when the same reusable visual style is applied to links and buttons. Reuse appearance where useful, but keep the rendered element and attributes tied to the action's meaning.

Does aria-controls make the panel work?

No. It identifies a relationship. The script must still change visibility, keep state accurate and preserve useful focus behavior. In this small disclosure, focus can remain on the toggle so the person can activate it again. A modal dialog requires a different interaction model.

Do not add an ARIA attribute just to make a test stop complaining. Explain the state it represents and how it stays synchronized with what users can actually do.

How can you verify the distinction?

  1. Use Tab to reach each interactive element in a sensible order.
  2. Activate the button with a keyboard and confirm its state changes.
  3. Confirm the link exposes its destination and navigates as expected.
  4. Check that opening details does not submit a surrounding form.
  5. Read the control names without the surrounding paragraph.

For a practice variation, replace the details button with a link to a separate opening-hours page. Explain which JavaScript and state attributes are no longer needed. That is an exercise in choosing the simplest truthful interaction, not merely changing tag names.

References and next practice

developer.mozilla.org — html links · developer.mozilla.org — html forms

Browse interview topics · Practise a question in Interview Challenge · How to Answer Technical Interview Questions Out Loud