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

I've lately been using buttons as JavaScript hooks if it feels right to attach event handlers to buttons rather than an anchor element.

Anchor tags represent a location, whereas a button for me is more of an act. I've been using buttons as slide navigations, to show/hide content and to perform ajax requests. :D

Answer 2

According to w3Schools.com,

Definition and Usage

The <button> tag defines a clickable button.

Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.

Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.

And also :

Tips and Notes

Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

For what I see, <button> tags are intended to be used outside of forms, and <input type="button"> inside.

By default, both are styled as your browser's used to style <input type="button">, unlike <a> tag.

Answer 3

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 4

in a form you should use appropriate element.

'a' is not really appropriate in a form.

have a look to the main goal of elements on W3C for instance.

because you can take any element, and with CSS or JS you can change behavior and purposes... and it's so bad. (usages, accessibility, comprehension)

Answer 5

<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.