Button vs. Clickable Div in HTML

Question

In HTML is it better to use a button or a clickable div?
Either way I'm going to use jQuery to handle the event of the click, but I'm wondering if there are advantages/disadvantages to using one over the other. Such as execution speed, loading speed, etc.

<button id="temp">Click</button>  

vs.

<div id="temp">Click</div>  

The code I'm using to handle the click event looks like this,

$("#temp").click(function(){
//Event details here
};

I understand that the button element is already pre-styled to look like a button and that (on windows) if you you press the enter key after a button has been selected (via click) the button will reactivate as if it were clicked again, but that is both of those factors aren't very important to me.

Answer 1

<button> has some inbuilt things that you may like, but also has some styling restrictions that not apply to <div>.

<button> can be focused, where <div> has to have tabindex attribute to make focus work. Pressing it can submit a form if configurated for ex. has built in onclick handler: <button onclick="submit()">

Usage of <button> applies to HTML5 document specification which puts divs in place of containers elevating role of contextual elements like <footer>, <section> and <button>.

In short I always use <div>s as can style it how I need and program them how I like, am not fancying predefined behaviours as they can vary on different browsers :)

Answer 2

Don't use <div> tags to make clickable elements. Use <a> or <button> elements. This enables browsers with JavaScript disabled to interact with them as expected. Even if your functionality requires JavaScript and there is no reasonable default behaviour you can assign to an <a>, use it regardless - it conveys "clickable" semantics.

In general, choose the tag that most closely describes the function of its content, not the appearance of its content, and avoid unnecessary <div> tags, lest your documents suffer from divitis.

http://csscreator.com/divitis