vs vs vs Active Jul 22 '17 at 14:14 Viewed 1.8k times

Question

I've seen so many posts along the lines of "I'd like to one-specific-thing for my one-specific-situation when it comes to buttons in HTML.

If I may, I'd like to get a professional take all in one post, here:

When making buttons in HTML, what situations lead to:

• <a> being the best answer?
• <button> being the best answer?
• <div> being the best answer?
• <input type='button'> being the best answer?

Answer 1

There's a good article that summarizes the differences nicely

In short:

|                       |       General usage        | Complex designs | Can be disabled |
|-----------------------|----------------------------|-----------------|-----------------|
| <button>              | General button purpose.    | Yes             | Yes             |
|                       | Used in most cases         |                 |                 |
| --------------------- | -------------------------- | --------------- | --------------- |
| <input type="button"> | Usually used inside        | No              | Yes             |
|                       | forms                      |                 |                 |
| --------------------- | -------------------------- | --------------- | --------------- |
| <a>                   | Used to navigate to        | Yes             | No              |
|                       | pages and resources        |                 |                 |
| --------------------- | -------------------------- | --------------- | --------------- |
| <div>                 | Can be used for clickable  | Yes             | No              |
|                       | area which is not button   |                 |                 |
|                       | or link by definition      |                 |                 |

Answer 2

Generally, I try to use the HTML tag in the most "semantic way" and useful way:

• <a> tag: a is for "anchor", I use it when the button is a link to a content on the page or external content;
• div tag: this is a simple container. I use it when I have to do simple buttons without any specific job but really custom style(simple animation, transition, open modal, etc). This is the jolly.
• <button> tag: according with W3, this is the standard tag to create buttons on the page, so use it when you need an action like onClick().
• <input type="button"> tag: is equal to the button tag, but you need it for form submission, because browser that submit for with <button> can submit different values. I use it generally on form.