Button versus link
When to use a button (<button>
) or an anchor (<a>
) element? Choose the right element for the right application for an accessible website.
Button element
The HTML button element (<button>
) is used for programmable actions. For example sending a form or a JavaScript function opening a pop-up or a drop-down menu.
More about the button element on MDN
Input
Besides the button element, there is also an input element with the button type (<input type="button">
). This is also a valid method to use a functional button inside a form. This does have the limitation that no nested content can be used inside of the element. If you have a choice, always go for the button element.
Anchor element
The HTML anchor element (<a>
) is an element used to create a hyperlink to web pages, files, email addresses, locations on the same page or anything else that can be accessed via a url.
An anchor element should always be used in combination with the href attribute. This is where you specify the url.
Conclusion
A button element is used for functional purposes. An anchor element is used for hyperlinks.
Never use a <span>
or for instance a <div>
as a button or link. These do not provide the functionality as a button or anchor element would for accessibility.