Skip to main content

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 H​T​M​L 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 M​D​N

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 H​T​M​L 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.

More about the anchor element on M​D​N

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.

Scroll to top