Lessons · HTML and CSS · a button, not a styled div
A button, not a styled div
<button> is in the tab order, announces as a button, and responds to Enter and Space. A styled div is none of the three.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
This is the highest-value swap on the road. All three behaviours have to be rebuilt by hand on a div, and in practice only the first one ever is.
How to think about it
Use the element. If the defaults look wrong, style them away -- a button takes any CSS you like, including all: unset. The div is never the shorter path; it only looks like it for the first ten minutes.
Worked example
<button id="b">Go</button><div id="d" role="button">Go</div>The browser reports the button's tabIndex as 0 and the div's as -1. Zero means in the tab order; -1 means Tab will not stop there.
Your turn
The two keys a real button responds to.
Enter and
Write a page and watch it render
The trap
A div with an onclick handler is not a control that is hard to use. It is a control that cannot be reached at all, by anybody without a mouse.