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>
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:
<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
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
window.location in the button handler to cause navigation.
Here are some other reasons not use the wrong element for the wrong job:
- 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.