HTML/CSS - Buttons - When to use what

Question

I have a pretty basic question regarding buttons on HTML pages.

As we know, there are several possibilities to create them. It is possible to set display: block; on an a, so one can assign a color, width and height to it. But there is also the HTML element button and the element submit.

When to use what? For example, when creating a form, I need a submit element if I remember right. But when I have a button outside of a form, I can use a normal a. But still, I don't know then to use button.

Could you please help me out with this?

Answer 1

Anchors (<a>) should be used when it's a link, and not a form submission.

Search engine crawlers cannot follow links which are submitted by input or button, only a. Therefore for SEO purposes, its best to use anchors for links.

If its a form, you should always use either a button or an input because these can submit the form on pressing the enter button (unlike links), and are generally better for accessibility.

I won't go into detail regarding whether to use button or input however, as there is already an indepth post regarding this:

<button> vs. <input type="button" />. Which to use?

Answer 2

<button>

The button (<button>) HTML element represents a clickable button.

<a>

The HTML Anchor Element (<a>) defines a hyperlink, the named target destination for a hyperlink, or both.