<button class="button"> tag vs <div class="button">

Question

Is it incorrect to use the html <button> tag when designing a UI rather than using <div class="button">? In implementation I haven't noticed a difference between both approaches, and <button> seems more semantic, but I am not sure if it is only intended for usage within a form. The button would not be in a form. Using the <div> tag seems to be the most common way of making buttons (bootstrap) but I am not sure why. Are there any technical reasons for this?

Solution 1

It's better to use <button> rather than <div> or any other element to represent a button. The "type" attribute is important here and should be type="button", without it the default value is submit which doesn't make sense outside of a form.

And yeah by the way, having a <button> outside of a form is perfectly fine.

Often times while designing a UI, the <a> tag is the most appropriate element where it makes sense, but <button> is perfectly fine (and really, intended) for performing an action via javascript.

Using the <div> tag seems to be the most common way of making buttons (bootstrap) but I am not sure why.

I really haven't seen evidence of this, and to be honest it doesn't matter what they do. The bootstrap framework tends to disregard semantics, for example though the use of empty elements just for presentational reasons like <li class="divider"></li>.

Solution 2

From a usability perspective, it's better to implement <button> over <div> or <a> due to the way browsers handle interactivity.

If your users are sloppy clickers and they click-and-drag by mistake, or on a touch-screen, they can end up selecting the <div> contents rather than triggering a click event. Using <button> will greatly reduce this problem.

But, non-button objects, like <div>'s, can be more flexible when applying CSS. Especially in older browsers.