Button vs. Clickable Div in HTML
<button>
has some inbuild 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 specyfication 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 :)
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