Vì sao một `div` gắn `onClick` không thay thế được `<button>`?

Vì onClick chỉ mang lại hành vi chuột. <button> là phần tử tương tác dựng sẵn, kèm theo cả một tập hành vi mà div không có:

• Focus được bằng bàn phím (nằm trong tab order tự nhiên).
• Kích hoạt bằng Enter và Space — trình duyệt tự chuyển thành sự kiện click.
• Role button trong accessibility tree, nên screen reader đọc "nút, Lưu" thay vì đọc trơ nội dung.
• Trạng thái disabled chặn cả click lẫn focus.
• Nằm trong <form> thì type="submit" submit form, kể cả khi nhấn Enter ở ô input.

Muốn div tương đương thì phải tự làm lại tất cả:

<div role="button" tabindex="0" onclick="save()"
     onkeydown="if (event.key === 'Enter' || event.key === ' ') save()">Save</div>

Vẫn còn thiếu disabled, submit form, và hành vi mặc định theo từng nền tảng.

• Nguyên tắc: dùng phần tử gốc trước, chỉ dựng lại bằng ARIA khi thật sự không có phần tử phù hợp.
• Lý do thường gặp khiến người ta chọn div là "khó style" — có thể xử lý bằng all: unset hoặc reset border/background trên chính <button>.