<a>is used for page navigation
<button>is used for actions on the page
<input type="button" />is used in a form and the value is used in the form
Let’s take a look at this small piece of code:
Now half of the people I showed this piece of code, said: well there is nothing wrong with the code.
That is a perfectly fine way of defining a button.
If you take a closer look, you will discover a couple of smaller issues with this piece of code.
First, you would notice that hovering over the button you get a text cursor instead of a ‘hand’-cursor.
This is caused by leaving the attribute “href” undefined, you can fix it via defining something like ‘#’ or via CSS.
Then you would notice that by defining the “href” tag you would cause the browser to navigate to another page or the top of the page.
Voila, you are now in the situation that you are using some hack pattern that degrades the readability of your code.
Someone may come along and assume that someone made a mistake defining the href attribute /or used a placeholder and forgot to replace it.
Now let’s improve the readability of the code:
We are now using the correct tag
You will need CSS to ensure that the button looks the same in all Browsers, however you would probably anyway used CSS to style your
But what about IE8? – for that we set the type=’button’, and IE8 is almost of no concern anymore (even for big corporate customers)
<input type="button" />
Both types of buttons work in practice the same way.
However, the Button element allows you to add content elements, like an image.
And usually, you would use the
<input type="text" /> tag in a `