When should I use a button (<button>) or a link (<a>) in HTML?
HtmlHtml 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.