Using Anchor Tags Versus Button Tags

When you're looking to solicit a user click to initiate an action, HTML provides two elements to do the job: the <a> (anchor) and the <button> elements. Determining which tag to select can be confusing, since both can be styled to look however you want. For example, you could have a "Learn More" call to action that is coded as an anchor and styled like a real-world clickable button. Conversely, you could have a "Save" button element that looks like a text link—with or without an icon. Since you can't depend on how the element looks, the tag you choose in a given instance depends on what happens when the user clicks the element.

<a> Tags are for Navigation

The anchor tag is used when clicking the element will update the URL and cause the browser to either navigate to a new page or navigate to a specific area of the current page. This is accomplished with the href attribute. Generally, the contents of the href will replace the current url in the browser, causing a new page to load, or, in the case of a single page app, a new view to display. When the href starts with a hash #, the browser navigates the current page to position the element whose id attribute matches the value after the hash, if any. This simple navigation behavior has provided the interconnectivity of the internet since the beginning.

    <a href="/wonderland">Go Down the Rabbit Hole</a>

Technically, the href attribute is not required, but if it is omitted then, according to the html specification, the element just ends up being a placeholder for its potential self:

If the <a> element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

<button> Tags Are for Performing Actions

A button in HTML is just like a real world button: it performs an action in response to being clicked. This action can be anything from submitting a form, closing a modal, fetching the latest data from the server or any other action the user needs to initiate.

    <button type="button">Save the Day</button>

The button element supports the type attribute which helps the browser determine how the button should function. Possible values for this attribute are:

• submit: The button will submit a form. The form must contain the button or the button must point to the form's id with its form attribute.
• reset: The button will reset the values of form controls.
• button: The button will do no nothing by default and can be used for any other purpose.

Avoid Crossing Purposes

It is possible to use JavaScript to add alternate actions to an anchor or to update the url and navigate with a button, but you have to explicitly override the built in functionality of the elements. You have to call event.preventDefault() in your JavaScript click event handler to prevent an anchor's default navigation, and you have to explicitly set window.location in the button handler to cause navigation.

Here are some other reasons not use the wrong element for the wrong job:

• Search engines use the hrefs to infer relationships between pages and websites. You lose this when the navigation happens in JavaScript.
• Some browsers can preload pages that they predict the user might visit. This also doesn't happen when the navigation is created in JavaScript.
• Buttons can submit forms by default. An anchor needs JavaScript to be written to submit a form. This really goes for any non-navigation action. In order to perform generic actions, an anchor must have its navigation functionality suppressed.
• Generally, overriding the default functionality of these elements creates extra code that is not necessary, and could introduce unexpected behavior if not implemented correctly.
• Your code remains simple, clean and semantic. Isn't that nice?

In general, use an <a> tag to handle navigation and a <button> to handle form submission and any other actions.