When should I use a button (<button>) or a link (<a>) in HTML?

Question

I was reading the Bootstrap documentation about the button tags (http://getbootstrap.com/css/#buttons-tags), as <button> and <a> tags have exactly the same appearance, and I found this :

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

What is the reason that can lead me to use a <button> tag (which doesn't have a href attribute) instead of a <a> for navigation ?

Maybe <button> is better when designing web applications when it interacts with the page itself, and of course for submitting forms, but is it all ?

[this question is related to SEO: <button> vs <a> HTML tags but the question is not the same]

Answer 1

I have to use for links and navigation between page / views.

I have to use for actions, for example on the current page : validating/resetting a form, showing a modal

Answer 2

From this excellent Introduction to Accessibility page talking about Button vs Link:

Simple set of rules

A link is focusable and can be triggered by the enter key. A link will redirect you to a new page or a section within the same page. In VoiceOver's rotator, it will also be collected within the "Links" window.

A button is focusable, too, and can be triggered by the space key. A button will trigger an action like opening or closing something. Or sending a form. In most cases JavaScript is used to do this. In VoiceOver's rotator, it will be collected within the "Form controls" window. That alone says something.

They also have great embedded youtube video showing how confusing it is for screen-readers when people mix up buttons and links

Where I hit a boundary issue between these two was generating a PDF that would open in a separate tab. It's a button because you generate something, but you generate a download that I wanted to automatically link to in a separate tab so that the web application that generated the PDF stayed in it's own tab.

My decision for this was to use an icon image link.

Update:

CSS Tricks' When To Use The Button Element from another answer here that was deleted because there was nothing but a link. But it is a great link.

So as not to get complaints about just a link, here's some of the useful snippets:

• Button is a Form Element
• “if a button (link) doesn’t have a meaningful href, it’s a <button>”
• If you don’t like those meaningless href’s, a <button> can seem like a nice alternative. But unfortunately outside of the context of a <form>, a <button> is equally meaningless.
• Even if a <button> doesn’t do anything outside of a form without the help of JavaScript, it still feels better for things you can click that do stuff other than change pages. A bogus href link definitely doesn’t feel right.
• Go forth and uhm, make clickable things correctly.

Answer 3

Thanks to the comments on my question, this is the answer I believe to be true :

I have to use <a> for links and navigation between page / views.

I have to use <button> for actions, for example on the current page : validating/resetting a form, showing a modal...