I'm on mobile now, and I cannot find the post I recently read which advises not to use a div for the functionality of a button. Perhaps the philosophy is well enough agreed upon that it doesn't matter.
It seems divs are a bit easier to style than <button> type (which was recommended in the answer i unfortunately cannot refer to). Even if that's not true, what is the disadvantage to using a div as a button?
Thanks!
<div> has little or no semantic meaning. It's just a generic container.
<a>, <button>, or <input type=button> all make it much more clear what the thing actually is, what it's supposed to do, etc.
This has several advantages:
Accessibility: Chances of a screen reader or whatever knowing what to do with an <a> is much greater than it managing to figure out that your <div> is actually a way to communicate back to the web server or whatever.
User interface advantages: If a user is used to tabbing through clickable elements or whatever, their browser is far more likely to do the right thing if you use an element that clearly indicates that it's there for the user to click/press/whatever. If you use <div>, then the browser might not highlight it or do whatever it normally does to tell the person that they can click it.
You get the clickability for free, rather than having to attach an onclick or whatever. With a <div>, there's probably no way to make it work without JavaScript. With the other elements, there's at least a hope (especially with <a>).
I'm probably leaving out a ton of other things that I just never thought about and maybe the above aren't the best examples, but I suspect you get the idea.
<div> does not support the tabindex attribute. So keyboard users are at a disadvantage.
Additionally, webpage optimizers (eg. Google on mobile) would be less likely to strip out an <input>.
