Comparing Anchor Tags to Buttons to Inputs

Anchor tags are different than buttons, but they can sometimes be used to perform the same task, even though the way we style them and code them might be quite different. The three elements below may look similar, but the first one is an anchor tag styled to look like a button. The second one is a true button. And the third one is an input of the button type. Look at the source code to see how each one of these is different.

• The #btn1 anchor tag has a hypertext reference (or href) that is linked to another location. It already knows that its job is to provide a link.
• The #btn2 button does not know what its job is. So for the button, we need to add a JavaScript click event to tell it that its job is to provide a link. First, we identify the button by its id on line 5 of the script.js file. And then on lines 8 through 10 of that file, we add the event listener, and the click function.
• The #btn3 input of the button type works very much like to the true button. We identify it on line 6 of the script.js file. And then on lines 12 through 14 of that file, we add the event listener and the click function. The biggest difference with the input is that it is an element that has no closing tag, so we need to give it a value to display its label on top.