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

Html

Html Problem Overview


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 https://stackoverflow.com/questions/19201420/seo-button-vs-a-html-tags but the question is not the same]

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMicka&#235;lView Question on Stackoverflow
Solution 1 - HtmlMickaëlView Answer on Stackoverflow
Solution 2 - Htmlicc97View Answer on Stackoverflow