Links navigate to resources; buttons perform actions. Native semantics bring keyboard behavior and assistive-technology expectations.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A save action is a button; a link to an article has a real href. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify the behavior
Opening another article is navigation; opening a confirmation dialog changes current-page state.
Step 2: Use native semantics
Give navigation an anchor with href and actions a button with an explicit type.
Step 3: Verify keyboard operation
Links and buttons differ in expected activation. Native controls preserve those behaviors without custom key handlers.
Worked scenario
A save action is a button; a link to an article has a real href.
<a href="/notes/">Browse articles</a>
<button type="button">Open confirmation</button>The link remains navigable without scripting and supports opening a new tab. The button needs an action handler but already participates in keyboard focus and exposes button semantics. Inside a form, type=button avoids accidental submission.
Common mistake
A clickable div requires extra keyboard and focus behavior and remains easy to implement incorrectly.
Verify the behavior
Activate using keyboard and mouse, open the link in another tab and verify the action button does not submit an unrelated form.
Interview exercise
Choose a modal trigger element.
Answer and reasoning
Use a button with a clear name and appropriate expanded or dialog relationship where relevant.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.