The difference between an anchor, a button, and an input button

()

Writing semantic HTML can be tricky. There are many ways to achieve a similar result and using the right element can impact usability and accesssibility.

Overview

While it's a simple language, HTML can occasionally be a little ambiguous. Writing semantic code can be a jarring experience that requires research and experience, and the result may be generating issues that aren't visible on the surface. What seemingly works perfectly may not always be the correct solution. Buttons are a good example of this, and an issue that I report on time and time again.

Buttons can be coded in multiple ways: you can use an anchor, use a button element that reacts differently when pressed, or use an input of the button type. Which one should you use, and when to use it is what we'll be exploring below.

Semantics

Semantic HTML ensures you're using the correct element for the job. In this scenario, we're exploring three possibilities.

Anchor

Anchors are your basic link components and should only be used when you need a link to another document, page, website or to another part of the same document.

The element can be styled to visually resemble a button should your design require it but should not be used with an empty or otherwise void href attribute. Instead, use a <button> when that functionality is needed.

If you're an old-school JavaScript writer, try and break the habit using void anchors for your triggers or listeners.

<a href="document.html">Read my document</a>

Button

The <button> element should be used to trigger an action, like toggling a menu or displaying additional content, but not to link or otherwise move the user to another document.

Unlike the input variant, the <button> element allows images and even code inside.

<button role="tab" id="tab1">Tab 1</button>

Input button

While not deprecrated, the correct use of <input type="button"> is generally limited to specific scenarios. Instead, when working in forms, look at the <input type="submit"> and, occasionally, <input type="reset">.

By default, the submit button type will, as its name suggests, submit when the Enter button is pressed anywhere in the form. This default behavior should not be modified and is why you should not be using an achor or standard button in a form.

<input type="submit" value="Submit form">
<input type="reset" value="Reset form">

Accessibility

You may be wondering why does all of this matter? At the end of the day, your button looks like a button on every browser and device, and it works fine when you click on it, right?

Semantics aside, using the incorrect element can impact usability and accessibility pretty heavily. Anchors and buttons are interpreted and interacted with differently by assistive technologies. For example, a button can be pressed using the space key, whereas an anchor is activated by pressing Enter when focused. The submit input is activated by pressing Enter in a form. Users relying on assistive technologies will expect an anchor to direct them to another page or document, and a button to perform an action that would not. Breaking this behaviour negatively impacts your document's accessibility and can lead to some confusion.

It may not sound like much, but compounding issues like these can make using your website or application a nightmare, particularly if you are reliant on assistive tools.

Conclusion

Use an anchor <a href=""> for links, use a <button> for actions that do not redirect the user, and either a submit or reset button in forms.