Mark Puchala II Mark Puchala II - 4 months ago 5x
HTML Question

<a> vs <button> vs <div> vs <input type='button">

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?


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.